Using RavenDB, AngularJS and WebAPI gives us an awesome amount of capability when it comes to programming but it is also nice to create a good looking application. Now like a lot of other developers I am not a skilled graphical or UX designer so this is definitely somewhere I can use some help. Fortunately the Bootstrap CSS framework with its utilities is a great help. By just following a few basic rules it is perfectly possible to get a decent looking web application. And as Bootstrap includes a lot of responsive features it even works well on mobile devices. Even though Bootstrap is responsive by default doing to does take some work, more about that some other time.
Adding Bootstrap
Fortunately adding Bootstrap is easy as the basic ASP.NET application I used as a starter template already contains the version 3.0.0 version CSS. This is not quite the last version, that is 3.1.1 right now, it is good enough to get started with. Additionally I normally prefer to work with the LESS version of Bootstrap instead of the CSS version but that is also something we can leave for later.
Creating a simple movies list with an movie poster can be done with the following markup:
1: <div class="row well" ng-repeat="movie in movies">
2: <div class="col-sm-2">
3: <img ng-src="{{movie.Posters.Profile}}"/>
4: </div>
5: <div class="col-sm-10">
6: <h4 href="" class="Title">{{movie.Title}}</h4>
7: <p>
8: {{movie.CriticsConsensus}}
9: </p>
10: <span class="pull-left">
11: <button class="btn btn-primary">Read More</button>
12: </span>
13: <span class="pull-right">
14: <span ng-repeat="genre in movie.Genres">
15: <button class="btn btn-info btn-xs">
16: <span class="glyphicon glyphicon-tag"></span>
17: {{genre}}
18: </button>
19: </span>
20: </span>
21: </div>
22: <div class="clearfix"></div>
23: </div>
Basically each movie is contained in a well and is divided into two columns, the first for the poster and the second for the title and description. Bootstrap uses a 12 column layout system and we basically allocated the first two columns for the poster and the last 10 columns the movie title etc.
The "Read More" and genre buttons don’t do anything yet but movies page looks quite a bit nicer. Not that it is done, viewing this on a tablet or phone doesn’t quite have the experience you might want. More on that in another post.
Try it
The running application can be found here and the source on GitHub here.
Conclusion
Using Bootstrap it is pretty easy to do a reasonably nice layout. A professional UX designer would most likely not agree with me there but then he possesses a skill set I don’t and I can’t afford to hire one for each project. And even lots of professional UX designers I know use Bootstrap as a starting point.
Index of posts on the RAW stack
See here for more posts on the RAW stack.