Why Bootstrap?

In the .NET Rocks show on "What Developers Should Care About in 2013" I mentioned Bootstrap – an open source frontend web framework from developers at Twitter. 

Here are some additional thoughts on Bootstrap to describe what Bootstrap is, as well as arguments for and against using the framework.

What Is Bootstrap?

Ultimately, Bootstrap gives you CSS and JavaScript to control the presentation of content in HTML. Bootstrap provides the default settings for typography, tables, forms, and buttons. Bootstrap also provides  components (navigation bars, pagers, and progress bars) as well as scriptable widgets (tooltips, tabs, and picture carousels), to name just a few things.

Since Bootstrap is all CSS and JavaScript you can use Bootstrap with any server technology or development environment. The idea behind Bootstrap is to get a site up and running quickly with a good looking and visually consistent interface.

Arguments Against Bootstrap

There is an inherent usability in the familiar and mundane, but some web designers will feel Bootstrap's sense of style is a little too familiar, and a little too mundane. These designers would rather start from scratch than start building another web site that looks "Bootstrappy".

One thing to keep in mind is that Bootstrap is not a "theme". Bootstrap is a framework. If you accept all of the defaults you'll build yet another Bootstrappy site. It takes a little bit of work to make a unique looking site, but building a unique look is certainly possible (take a look at Built With Bootstrap for inspiration). There are also now dozens of sites like Bootswatch (motto: saving the web from default Bootstrap)  where you can download colorful themes for Bootstrap.

There are also some limitations and quirks to Bootstrap, but like any framework if you follow the conventions and direction the framework wants you to follow, you'll have an easier time.

Arguments For Bootstrap

Here are three reasons I like Bootstrap:

1. Semantic class names. Building reusable components is a challenge in designing any kind of framework, and since Bootstrap is about style we want reusable style definitions. The classes provided by Bootstrap are meaningful without being specific about presentation details. For example, classes like warning, important, info, and alert all have an obvious meaning, but they don't give away any spoilers about the background colors they'll use. You can then use these Bootstrap classes in any application and even with heavy amounts of customization, the class names still make sense.  

2. Compositional classes. Another technique Bootstrap uses to achieve reusability is the use of composition. Similar to compositional design techniques in an object-oriented programming language, the style definitions provided by Bootstrap are small, focused, and designed to be combined together in interesting ways. For example, giving a span the class of "label" will allow you to present text inside an area that stands out a bit, but with a neutral background color. Giving a span a class of "label" and "label-important" will make the label text stand out (white text on a red background, by default). The "badge" classes are similar but provide rounded corners. Once you get the "feel" of how to combine Bootstrap classes, you'll find it is easy to build everything from alert messages to zebra striped tables with row hover effects.

3. The Grid. Grid layouts have been around for many years now, so it's almost unthinkable to have a framework without the ability to layout content in a grid. With Bootstrap you have fixed grids (using specific widths) or fluid grids (that expand and contract to the available space), and add in responsive design touches as well. More in the grid in a future post.

Why Do I Use It?

There are more reasons to like Bootstrap than just the three reasons I provided above. Ultimately, though, I like using Bootstrap because someone carefully designed a framework that is both re-usable, extensible, and provides sensible defaults.  If you haven't used a CSS framework before, 2013 would be a year to try one. If nothing else, you can learn how to better organize and design your own presentation rules.