Twitter Bootstrap

Even if you're not a designer, Bootstrap is a great way to make your sites look nice.

In a previous article, I described the relatively new phenomenon of design frameworks. Just as Web application frameworks make it easier to create server-side applications, design frameworks make it easier to create client-side designs. They do this by providing predefined CSS classes, each of which indicates the width of the column you want to create, the type of element you're using, or the color and style you want to use.

It's true that CSS masters will find a design framework unnecessary. After all, such people already can tweak the layouts, adjust the colors or create beautiful buttons, all on their own, without having to use the assistance of predefined classes. But speaking as someone who is design-challenged, the introduction of design frameworks has made it possible, even for someone like me, to make a Web application that doesn't cause people to go screaming into the night.

The secret behind such frameworks is that by buying into their predefined CSS classes, you give up some of the freedom you had with pure CSS. You agree to use their classes and to use their HTML structure in some cases. This is generally a worthwhile trade-off, in that your code and CSS end up being much shorter and more legible. You can concentrate on your domain of expertise, namely software development, rather than tweaking the CSS to look just right. And, because these frameworks constantly are evolving to support designers and developers, each upgrade supports more browsers, more optimizations and more CSS classes that you can use to integrate into your work.

One framework in particular has taken the world of Web development by storm during the past year: Twitter Bootstrap. Bootstrap first was released in summer 2011, and it was written by Mark Otto and Jacob Thornton, both of whom work at Twitter. Bootstrap, which was released under an open-source license on GitHub, has become an almost-overnight sensation. Indeed, it is currently the most-watched open-source project on GitHub, surpassing even Ruby on Rails.

There have been grumblings on such sites as Y Combinator's "Hacker News" about the proliferation of sites using Twitter Bootstrap. I see this as positive, raising the minimum acceptable level for Web design, while also making it straightforward and easy for designers to extend those designs.

Bootstrap is based on LESS, a language that compiles into CSS, and which is similar in many ways to SCSS. This means if you want to work with Bootstrap, you either need to compile the LESS stylesheets into CSS manually, take care of this in your deployment system or use a precompiled version of Bootstrap. Although using a precompiled version of Bootstrap is clearly the easiest way to go, it also gives you the least flexibility, because you won't be able to modify the LESS source to your own designs.

In this article, I discuss Bootstrap, including how you can integrate it into your own Web applications.

Installing Bootstrap

There are several ways to install Twitter Bootstrap. The easiest and most straightforward is to clone the Git repository from GitHub:


git clone https://github.com/twitter/bootstrap.git

This creates a new subdirectory named bootstrap, containing a number of files and directories. The docs directory contains the current documentation, the same as you can see on the Bootstrap site itself on GitHub. And, because it is written using Bootstrap, it provides a nice set of examples for using Bootstrap on your own sites.

I discuss the img directory below, so for now, you largely can ignore it. The js directory contains jQuery plugins that integrate with Bootstrap. The less directory contains, as you might expect, a number of files in LESS format, which then can be compiled into CSS files. It is these resulting CSS files that you will use on your site, not the LESS source files.

Now, how do you compile the LESS files into CSS? One way is to install and run the LESS compiler yourself. LESS is implemented in JavaScript, which means that it either can run in the browser or—in the case I'm describing—on the server, in a browserless implementation of JavaScript, such as Rhino or node.js. (It's true that earlier versions of LESS were implemented in Ruby, but that has not been true for some time, so be sure to use the JavaScript version.) I decided to upgrade node.js on my server by downloading the source and installing it from scratch with this:


./configure && make && make check && make install

Once this was done, I had not only the "node" binary, but also the "npm" binary, which allows me to install packages for node.js. You can install LESS with the following:


npm install less

Once that's done, you should be able to go into the less directory and issue the command:


lessc bootstrap.less > bootstrap.css

This compiles bootstrap.less into CSS, which you capture into the file bootstrap.css.

Some Web application frameworks can perform this compilation for you behind the scenes, on a regular basis or as you deploy. It's worth searching through the documentation for your favorite application framework. Bootstrap has become so popular that nearly every major one supports it somehow.

______________________

Reuven M. Lerner, Linux Journal Senior Columnist, a longtime Web developer, consultant and trainer, is completing his PhD in learning sciences at Northwestern University.

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Bootstrap

RonTrex's picture

Bootstrap is awesome. I've been using it for various projects but my favorite by far is to create mobile websites with Bootstraps fluid design. In fact, Bootstrap has been gaining quite the popularity recently and there's even a website for all sorts of bootstrap resources. What makes me love bootstrap is it's simplicity. You only have to specify a few classes to get the website looking the way you like it, the rest is already done for you.

Ron @ http://www.bluepelicanloans.com/

Everybody got lazy!

Robson's picture

Twitter Bootstrap is a wonderful tool and it help developing sites really faster.
The problem of Bootstrap is that it seems to have made everybody lazy: I'm really tired of seing sites with the same look over and over.
To try to solve this issue, I made a themer for it: http://bootswatcher.com.
I hope it helps to get back people's creativity...

Not just for CSS challenged

Scott Keller's picture

Bootstrap is great even for those who aren't CSS challenged. Every good web developer uses some predefined CSS to set sane base fonts, even out browser inconsistencies and provide necessary utility classes (like clearfix).

Bootstrap not only provides this but using less, you can set some variables and customize the look and feel quickly and easily so your page doesn't look exactly like every other Bootstrap page ever created.

I wish they'd convert their icons to a web font (see Font Awesome for a great implementation of this). I also wish it was a little friendlier with jQuery UI (I want Bootstrap look & feel buttons with jquery's .button() function to provide better functionality).

minor nits...

Michael J. Ryan's picture

should be explicit; npm -g install less

less prefers to go into a global install, but for demo purposes, as this blog, it's best to specify... also, in windows "global" is per user, not per system.

There are also server plugins that will do less compilation (and caching of compiled files for you). And they are available for a number of frameworks as well (if you're using RoR, Express, IIS, Apache, etc..) I've gotten it plugged into a couple of web projects with Visual Studio, as well as in deployment scripts.

It's a really nice starting point for new web projects, and imho a lot cleaner than using say jQuery Mobile or jQuery UI for an application base... There is definitely not a kitchen sink approach with makes it flexible... Here's a site that I've been working on using it recently.

Webinar
One Click, Universal Protection: Implementing Centralized Security Policies on Linux Systems

As Linux continues to play an ever increasing role in corporate data centers and institutions, ensuring the integrity and protection of these systems must be a priority. With 60% of the world's websites and an increasing share of organization's mission-critical workloads running on Linux, failing to stop malware and other advanced threats on Linux can increasingly impact an organization's reputation and bottom line.

Learn More

Sponsored by Bit9

Webinar
Linux Backup and Recovery Webinar

Most companies incorporate backup procedures for critical data, which can be restored quickly if a loss occurs. However, fewer companies are prepared for catastrophic system failures, in which they lose all data, the entire operating system, applications, settings, patches and more, reducing their system(s) to “bare metal.” After all, before data can be restored to a system, there must be a system to restore it to.

In this one hour webinar, learn how to enhance your existing backup strategies for better disaster recovery preparedness using Storix System Backup Administrator (SBAdmin), a highly flexible bare-metal recovery solution for UNIX and Linux systems.

Learn More

Sponsored by Storix