Bootstrap makes me look good

07 Mar 2012 Bootstrap makes me look good

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>

Note the data-toggle=”modal” attribute on the button, which means clicking the ‘Launch Modal’ button will make ‘theModal’ div appear as a modal. There is absolutely no JavaScript required! I like this because it keeps the code clean and I don’t need a high working knowledge of JavaScript to make basic UI components work. This also helps minimise code on the ‘view’ side of things. If you’re not already sold, here is another code example for creating drop down menus:

<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>

As you can see, no JavaScript! The drop down menu’s are identified with data-toggle=”dropdown”, and Bootstrap takes care of the rest!

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.

I should also point out that Bootstrap isn’t the first or only one of it’s kind, there are quiet a few floating around the web. I’ve also looked into jQuery UI, Zurb Foundation, YUI and HTML Kickstart. Zurb Foundation and HTML Kickstart are very similar in offerings to Boostrap, but in my opinion Twitter Bootstrap has that little bit of extra visual design polish to it’s UI. YUI and jQuery UI are heavier frameworks with a bit more emphasis on JavaScript than Boostrap. I always felt like I needed to do a lot more work on the CSS side of things when using jQuery UI or YUI. To their credit though, I think they have better API’s and documentation than Bootstrap. Though this is possibly because they need it? I found Bootstrap to have a very small learning curve compared to jQuery UI or YUI.

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.