Before we begin, let me give you a quick background. I’m a web developer who likes to dabble a bit in UI design. The majority of the projects I work on are non public facing, so they are often without the aid of a graphic designer. This usually leads to the production of a fully functioning web app that looks like a mixed bag of CSS tutorials. Sounding familar?
Enter Twitter Bootstrap.
Bootstrap is an open-source, cross-browser collection of CSS and HTML conventions. It is essentially a front-end toolkit for rapidly developing stylish web applications. It covers everything from forms, typography, tables and buttons to layouts and dynamic components like tabs, menus and pagination. It is built on with the power of LESS and has support for many jQuery plugins (modals, dropdowns, alerts etc).
One of the strong points of Bootstrap is how easy it is to integrate into a project and use in conjunction with other technologies. To give you an example, my most recent project used Bootstrap in conjunction with display tag. Display tag is a JSP tag library for displaying tabled data, with built in column sorting and pagination. The integration between Boostrap and display tag was seamless. I only needed to set the CSS classes on the display table to use Boostrap CSS classes:
<display:table class="table table-striped table-condensed" name="results"> ... </display:table>
Bootstrap even took care of the table row stripping (although display tag has support for this too). Here is a picture of the result: Another thing I like about Bootstrap is that it makes use of custom HTML 5 data attributes to activate/link the majority of it’s dynamic content. For example, have a look at the code required to pop up a modal:
<a class="btn" data-toggle="modal" href="#theModal">Launch Modal</a> <div class="modal" id="theModal"> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <h3>Super Cool Modal</h3> </div> <div class="modal-body"> <p>Some body text</p> </div> <div class="modal-footer"> <a href="#" class="btn btn-primary">Save</a> <a href="#" class="btn">Close</a> </div> </div>
<ul class="nav"> <li class="dropdown active" id="menu1"> <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1"> Listings <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="/list/1.html">Update</a></li> <li><a href="/list/2.html">Create</a></li> <li><a href="/list/3.html">Delete</a></li> </ul> </li> <li class="dropdown" id="menu2"> <a class="dropdown-toggle" data-toggle="dropdown" href="#menu2"> Other <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="/other/1.html">Reviews</a></li> <li><a href="/other/2.html">Users</a></li> </ul> </li> </ul>
Although I’m extremely pleased with Boostrap, there are a few concerns/issues that I have. The most obvious is that if you use Boostrap on all your projects, guess what all your projects are going to look like? I think the Twitter look and feel is very nice, but the novelty may wear off after a while. I know you can get around this by overlaying your own CSS customisations to the Boostrap core, but we are starting to head back into a mixed bag of CSS tutorials problem. Maybe to a lesser degree though, since we would have a solid CSS base (using LESS) to work off. Another issue I’ve found with Bootstrap, is that it doesn’t have native support for a date picker. This was unfortunate because our search UI required the user to enter a start and end date. Thankfully with a bit of googling I was able to find this little widget, which did the job fine. I’m pretty sure something like this will makes it’s way into Bootstrap soon.
As stated on the official website, Bootstrap is ‘built for and by nerds’. It allows me as a developer to create a gorgeous UIs in less time, which means a happy client and in turn a happy boss. Bootstrap makes me look good. So if you’re a front-end developer and have yet to use Bootstrap, I’d recommend giving it a shot.