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:Bootstrap Demo 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:
Bootstrap Dropdown Menu

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

This entry was posted in Javascript. Bookmark the permalink.

7 Responses to Bootstrap makes me look good

  1. Bram Peirs says:

    Hello,

    The checkbox or image left of the date column in the image with your table. Is this implemented in bootstrap. I would like to use it.

    Thanks in advance.

  2. I like that secondary nav submenu on the table demo figure.
    Is that custom ?

    also
    For a datepicker, you can use jquery ui and this bootstrap theme.

    http://addyosmani.github.com/jquery-ui-bootstrap/

  3. TheNightCoder says:

    Hey,

    the first section of your article is one of the funniest things I’ve read in a long time. I know exactly what you’re talking about, and I just wanted to say thx for the great article.

  4. ssamayoa says:

    I been a JEE developer for the last decade and recently was moving my UI from JSF to ExtJS (nice C/S JS framework but UIs get very “loaded” like fat client application). A few days ago I found Bootstrap and now I’m rethinking on use JSF 2 + Bootstrap instead of ExtJS because it simplicity and elegance.

    Regards.

  5. Dan says:

    Good luck getting bootstrap looking right with a header and a SCROLLABLE table. As soon as you have a scrollbar appear, the scrollbar will bleed into the header and mess up the formatting. See this: http://jsfiddle.net/Ph7GZ/10/

  6. pradeep says:

    can i source code for the aboev screen

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s