At the Forge

In my last 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.

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.

Now, if this seems like a lot of work just to get started with LESS, you're right. And in general, you probably won't want to start off adjusting the source LESS files, but rather just playing with the resulting CSS classes and other goodies Bootstrap provides. To do that, you simply can take a snapshot of the compiled CSS files created by LESS. One quick-and-dirty way to do this is to grab the CSS file that came with the Bootstrap documentation; although you won't be able to change things in the LESS source, it's good enough for beginning purposes. Just look in docs/assets/css/bootstrap.css, and copy that into your Web project.

A middle ground, which allows you to customize things easily but doesn't require that you install and use the LESS compiler each time, is to use the Bootstrap configure-and-download functionality, from the Bootstrap home page. Enter the colors and basic design paradigms you want to use, and you'll get a custom CSS file delivered to your browser.

Finally, it's possible to run LESS in the browser, because (as I indicated above) it's written in JavaScript. However, I've generally found this to be a less acceptable way to go about things, if only because it's so much slower, and of course, I'll always want to use it on the server, so I generally get things going there instead.

In every case except for the in-browser LESS compiler, you always will end up with a CSS file, typically named bootstrap.css. This file should be placed, not surprisingly, alongside your other CSS files, and then incorporated into your HTML file in the standard way:

<link href="/bootstrap.css" media="all" 
 ↪rel="stylesheet" type="text/css"/>

If you fire up your HTML file with just that, you'll see...well, almost nothing. A little bit has changed, namely the default fonts and margins (which probably have disappeared). But for the most part, you really haven't changed anything, and there aren't any obvious benefits. That's because Bootstrap is an à la carte system, in which you can take any or all of it, depending on your interests and needs.

That said, one thing that you'll almost certainly want to do is add a div tag with the “container” class immediately within your body tag, as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>ATF</title>
    <link href="bootstrap.css" media="all" rel="stylesheet"
     ↪type="text/css" />
  </head>
  <body>
    <div class="container">
    <h1>Title</h1>
    <p>Body</p>
    <p>Body 2
      <ul>
        <li>Thing One</li>
        <li>Thing Two</li>
        <li>Thing Three</li>
      </ul>
    </p>
    </div>
  </body>
</html>

If your system is like mine, you'll see that the contents have shifted over to the right, with a large left-hand margin. Actually, the size of the margin depends on the width of your browser. By using a div within the body, the width of that div can stay relatively stable, even as the browser width changes around it.

Now, things truly become interesting when you start to divide your file into separate rows. You see, Twitter Bootstrap provides you with a grid—meaning that you divide your text into rows, and that each row consists of content, each of which consumes a certain number of columns. Bootstrap uses a 12-column grid, meaning that within any row, you can mix and match text using any combination of 12 columns. You indicate how many columns wide something should be by assigning a class of “spanN” to your HTML element, where N is a number between 1 and 12, inclusive.

For example, you can have a wide paragraph as follows:

<div class="row">
    <p class="span12">Wide paragraph. Very wide paragraph. 
    Super-duper wide paragraph. Fill the screen's width paragraph.
    Use lots of text to fill the screen's width paragraph.</p>
</div>

Or, you can have four narrow columns:

<div class="row">
    <p class="span3">Narrow paragraph. Narrow paragraph. Narrow
    paragraph. Narrow paragraph.</p>
    <p class="span3">Narrow paragraph. Narrow paragraph. Narrow
    paragraph. Narrow paragraph.</p>
    <p class="span3">Narrow paragraph. Narrow paragraph. Narrow
    paragraph. Narrow paragraph.</p>
    <p class="span3">Narrow paragraph. Narrow paragraph. Narrow
    paragraph. Narrow paragraph.</p>
</div>

Or, even a left-hand sidebar, with main text on the right:

<div class="row">
  <p class="span2">Sidebar. Sidebar. Sidebar. Sidebar.
  Sidebar. Sidebar. Sidebar. Sidebar. Sidebar. Sidebar.
  Sidebar. Sidebar. Sidebar. Sidebar. Sidebar. Sidebar.
  Sidebar. Sidebar.</p>

  <p class="span10">Main text. Main text. Main text. Main
  text. Main text. Main text. Main text. Main text. Main
  text. Main text. Main text. Main text. Main text. Main
  text. Main text. Main text. Main text. Main text.</p>
</div>

Now, it's true that these class names lack any semantic value, and they are in some ways a new-fangled technique for doing tables—which, as all of us know, are a terrible non-CSS way to do layout. But, the advantages are huge. I know that these classes have made it far easier for me to experiment with layouts, moving text to different places on the page, and understanding what will happen to the rest of the items on my page when I do so.

Now, Bootstrap provides a number of classes that are not meant to be used on their own, but rather in conjunction with other classes. For example, you always can have a title that uses the h1 tag, but perhaps you really want the h1 to stick out on your home page. To do that, just add the “hero-unit” class to your h1's list of classes. The fact that each tag may contain any number of classes makes it trivially easy to add and remove design styles from Bootstrap and to experiment with what different ones will look like.

Now, it's true that h1, h2 and their friends get styled nicely by default when you use Bootstrap, setting not only the font size and boldface but also the line height. But, you can make them even snazzier than the defaults, by (you guessed it) using some of Bootstrap's classes. If your h1 is the page header, you can enclose it in a div whose class is “page-header”.

Non-headlined text can enjoy some treats too. If you want some text, such as a glossary definition, to appear when the user's mouse cursor hovers over it, just wrap the text in an “abbr” tag:

<abbr title="GNU'S Not Unix!">GNU</abbr>

Text with such an abbr tag has a light underline beneath it, which allows users to identify such text more easily.

Tables get some fancy styling as well. By using the table-striped class, you automatically can have alternate rows contain a light background color to distinguish them.

Bootstrap also has strong support for HTML forms. Like all other block-level elements, the “form” tag can take a “spanN” class, indicating its width. But the form itself will look much spiffier than would be the case without Bootstrap. Text fields are sized appropriately and get a nice shadow when they receive the input focus. Submit buttons have nicely rounded corners, and the mouse cursor changes to a pointer when hovering over them.

But wait, it gets better. Let's say you want your submit button to be a bit larger than usual. Well, just add the “btn-large” class to the “input” tag, and you'll have a larger button. You also can use btn-small or btn-mini for buttons of other sizes.

You also can colorize your buttons by setting additional classes. The “btn-primary” class will use Bootstrap's primary color (blue, by default). But, instead you can use “btn-danger” (for red), “btn-warning” (for yellow) and a host of other colors. In this way, Bootstrap is using CSS classes semantically. I find it very useful to be able to think in terms of what the buttons are for, rather than what color they contain. The levels and colors are consistent across Bootstrap as well. If you put text within a span or div with both the “label” and “label-warning” classes, or the “badge” and “badge-warning” classes, the text will be highlighted with the warning color. You also can have button groups, labeling of check boxes and radio buttons (so people can click on the text, not just the widget), and many other features.

If you want your site to have a simple navigation bar, you can avoid creating the HTML and CSS necessary for such a thing to work, and just use Bootstrap's “navbar” class. Whether you want a simple navbar, one with pop-up, JavaScript-controlled buttons or even a form inside your navbar, Bootstrap has all of those options available. You even can set up your navbar such that it's “responsive”—meaning that it knows how to expand and collapse based on the user's browser window width.

The “img” directory contains two images: one for all of the white-on-black icons that Bootstrap provides and another for all of the black-on-white versions of those same icons. The icons are all on one image, because they take advantage of CSS sprites, a technique that makes it possible for your browser to download a single image and then selectively display parts of that image independently. Thus, if you have a download link on your site and you want to have a download icon, you can add:

<p><i class="icon-download"></i>Download</p>

Now, here's the thing you might notice about the icons: they're using the <i> tag, which normally is for italics. But, the text that accompanies the icon doesn't go inside the tag. Rather, it goes next to the tag. The only reason for <i> is that it allows CSS to pull up a sprite as the background image. The icons are a great start for many of the things you'll want on a site.

I've been doing Web development for a while and thought I had seen rapid adoption of technologies before. But, Twitter Bootstrap has beaten them all from what I can tell. It's popular, of very high quality, adheres to standards, works across platforms and languages, and is easy to use.

The only negative I can think of is fairly minor—namely that it uses LESS rather than SCSS, which means that integration is a tiny bit more complex with Ruby on Rails. But, even that integration is a no-brainer. Ruby gems exist that solve this problem in a number of different ways.

I've adopted Bootstrap in my own work and expect to adopt it on future projects as well. Bootstrap doesn't solve all the problems with CSS, but it solves so many of them and makes them so accessible, that it allows even someone like me to create an attractive site. And, after years of having to give excuses when my simple, prototype sites didn't look very attractive, I now have a way to ensure that they'll at least be minimally aesthetically pleasing.