Home > Development > Quick evaluation of Twitter Bootstrap

Quick evaluation of Twitter Bootstrap

I must admit I suck at graphical design. It’s one of the reasons that put me in the way of Flex and Vaadin in the first place: out-of-the-box, you got an application that is pleasing to the eye.

Using one of these technologies is not possible (nor relevant) in all contexts, and since I’ve got a strong interest in UI, I regularly have a look at other alternatives for clean looking applications. The technology I studied this week is Twitter Bootstrap.

Bootstrap is a lightweight client-side framework, that comes (among others) with pre-styled “components” and a standard layout. Both are completely configurable and you can download the customized result here. From a technical point of view, Bootstrap offers a CSS – and an optional JavaScript file that relies on jQuery (both are also available in minified flavor). I’m no big fan of fancy client-side JavaScript so what follows will be focused on what you can do with plain CSS.

Layout

Boostrap offers a 940px wide canvas, separated in 12 columns. What you do with those columns is up to you: most of the time, you’ll probably want to group some of them. It’s easily achieved by using simple CSS classes. In fact, in Bootstrap, everything is done with selectors. For example, the following snippet offers a main column that has twice the width of its left and right sidebars:

<div>
    <div>Left sidebar</div>
    <div>Main</div>
    <div>Right sidebar</div>
</div>

A feature provided worth mentioning is responsive design: in essence, the layout adapts itself to its screen, an important advantage considering the fragmentation of today’s user agents.

Components

Whatever application you’re developing, chances are high that you’ll need some components, like buttons, menus, fields (in forms), tabs, etc.

Through CSS classes, Bootstrap offers a bunch of components. For existing HTML components, it applies a visually appealing style on them. For non-existing components (such as menus and tabs), it tweaks the rendering of standard HTML.

Conclusion

I tried to remake some pages of More Vaadin with Bootstrap and all in all, the result in not unpleasing to the eye. In the case I can’t use Vaadin, I think I would be a strong proponent of Bootstrap when creating an application from scratch.

You can find the sources of my attempt here.

email
Send to Kindle
Categories: Development Tags: ,
  1. May 13th, 2012 at 22:46 | #1

    As a typical back-end/middleware nerd I sometimes gets so jealous when I’m thinking that front-end guys can visually create almost anything they think about :) . You want to have some fancy page – you create it. Of course I can create beautiful messaging solution but it’s hard to express it in web browser :) .

  2. Nicolas PERU
    May 14th, 2012 at 08:23 | #2

    Only drawback it’s its popularity that makes almost every new site looks the same ;) (at least the ones made by dev). But I also liked it.

  3. May 14th, 2012 at 08:25 | #3

    Good point!

  4. May 14th, 2012 at 11:33 | #4

    Hi Nicolas! Long time no see. I’ve been having a great read on your site. You might fancy looking into Foundation (http://foundation.zurb.com/). They are ex-members of the Twitter Bootstrap team.

  5. May 14th, 2012 at 13:31 | #5

    Hi Cedric,
    Hope you’re doing fine!

  1. No trackbacks yet.