Twitter bootstrap

A few weeks ago, we built a new internal tool at work. Developing this very UI-intensive application required me to write more javascript, CSS and HTML5 and less C# than I’m used to. The process of writing so much javascript in a structured way is worth a blogpost of its own. For now, I want to focus on how we created the layout.

For an internal tool like this one, functionality is much more important than design. But although there’s no designer involved, people expect it to look good anyway. So I started looking for a quick way to make a decent layout. I could use a template or framework of course. But I was a little reluctant to that, because in the past that often resulted in me fighting the template, to ultimately end up with a less than optimal solution.

And then my colleague Thomas (who helped me build this app, even on a Sunday!) suggested to use the Twitter bootstrap framework, the UI framework created by some smart guys at Twitter. I checked it out and was pleasantly surprised…

Image

I instantly liked it, mainly because:

  • It’s very easy to get going
  • It has everything you’d expect in such a framework
  • The documentation is good
  • The design itself is very clean
  • As far as I could tell, it follows common conventions (both in layout and code)

But what I like most about it is the philosophy it follows. The way everything is structured just makes sense, even to someone who’s not a UI specialist. Just glance at the following snapshot, taken straight from the docs:

This is the kind of html you’ll be writing to do 80% of the work. Nothing complicated here. It’s completely void of any boiler plate code you’d typically have to write.

Finally, the knowledge you gain by using a framework like bootstrap is very relevant. It’s not about learning to work with a bunch of very specific abstractions. It’s submerging yourself in a coherent set of best practices presented in the best way possible: a working and modular framework.

Conclusion: Twitter bootstrap is a very useful framework for prototyping and developing tools and backend systems. I’m not sure how it fits in other use cases (as the base of a large website for example). As with all frameworks, It’s probably not the holy grail for all types of webapps and websites in the world. Anyway, I highly recommended it and will certainly use it again in future projects.

Side note: another great thing that we ended up using the (optional) LESS version of bootstrap. Checking out LESS was on my TODO list for a while, and I’m glad I had a hands-on start now.

Advertisements

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