Why Bootstrap?

Wednesday, January 2, 2013

Twitter 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.


Comments
gravatar AbelebA Wednesday, January 2, 2013
I haven’t listened to the podcast yet but I downloaded it and will listen to it on my drive home. I do like Bootstrap and have used it on a limited basis in the past. I’m a software developer by trade and struggle to create good design when implementing a website. My websites might end up looking bootstrappy but they are responsive and simple to modify. Other options that I use are Skeleton CSS framework and the template created by Initalizr.
gravatar Eric Hexter Wednesday, January 2, 2013
Do not forget the number 1 reason to care about bootstrap.. cause Eric does :) http://lostechies.com/erichexter/2012/12/24/twitter-bootstrap-mvc4-new-release-1-0-71/
gravatar Nat Thursday, January 3, 2013
Ok Scott, it's time for a Pluralsight course on Boostrap... Well, what are you waiting for?! :)
gravatar Georgi Hadzhigeorgiev Thursday, January 3, 2013
I love Bootstrap! It saves me tons of time and liberates me from playing "the great designer" role and still having nice and clean looking websites.
gravatar Andrey Thursday, January 3, 2013
Look at this alternative: http://foundation.zurb.com/ It looks better than Bootstrap.
gravatar Rex Thursday, January 3, 2013
In a project where I currently use bootstrap I almost never think about bootstrap. The project uses bootstrap's components and presentation extensively, so there is thought involved in using those pieces, but I'm not dwelling specifically on bootstrap and how it integrates into the project. It doesn't get in the way too much. In another project I added a limited set of bootstrap components years into the project. The integration hasn't been as smooth, but the goal isn't to migrate fully to bootstrap as the underlying visual framework, rather to gradually establish semantic and visual consistency for alerts, menus, forms and icons using bootstrap as needed. Like everything else, bootstrap isn't the be-all and end-all, but it's nice to have in your toolbox whether you use it big or use it small.
Comments are now closed.
by K. Scott Allen K.Scott Allen
My Pluralsight Courses
The Podcast!