Comparing Responsive CSS Frameworks - Bootstrap, Foundation, and Skeleton

by Brian Haveri, Technology Director
October 22, 2012

Comparing Responsive CSS Frameworks - Bootstrap, Foundation, and Skeleton


View the detailed comparison:
http://responsive.vermilion.com/compare.php

Don’t know which responsive framework to use? Neither did we, so we tested them all.

 
What is responsive web design?

Responsive web design is a rapidly growing approach to web development wherein webpage layouts respond to their environment. That is to say websites should look good and function well no matter where they’re viewed, be it a desktop computer or mobile phone. Responsive frameworks give developers a baseline for building responsive websites.

The setup

Each developer on our team tackled a different framework and then reported their findings back to the group. We all used the same design from an actual client project to build a webpage with the frameworks, then compare the differences in UI, syntax, and developer happiness. 

Which frameworks did we test?

We focused on the three big responsive frameworks:

  1. Twitter Bootstrap

  2. ZURB Foundation (version 2 and 3)

  3. Skeleton

Where are the pages we created?

Our comparison actually isn't page specific but we did test real client designs including a recent website launch for Campaign for Action.

The surprising results

It wasn’t obvious beforehand, but responsive CSS frameworks fall into two categories:

  1. Both responsive framework and UI library: Bootstrap and Foundation

  2. Primarily responsive framework: Skeleton

Bootstrap has popularity and momentum on its side, so we had high expectations. In fact, we expected Bootstrap to walk away the clear winner, becoming our framework of choice going forward. Turns out Bootstrap is great, but there’s no clear winner; not even close. Let’s take a look at each framework...

 

What you should know about each framework

Twitter Bootstrap

Have you ever thought, “That looks like a Bootstrap site?” Well, Bootstrap was built as a style guide for internal tools at Twitter. Bootstrap is style-heavy and great for rapid prototyping.

Bootstrap’s grid system comes with both fluid and fixed layouts. Mobile support landed in Bootstrap 2.0 and is solid, but still has room to grow.

ZURB Foundation

In terms of “responsiveness,” Foundation is arguably the most robust framework. ZURB, a product design agency in Silicon Valley, built Foundation as boilerplate for client projects where custom design is expected. Foundation’s grid support is best-in-class and with version 3 released 6/29/2012, Foundation’s grid options became even better.

Foundation’s UI library is also great for rapid prototyping, but not as expansive as Bootstrap.

Skeleton

Skeleton is a style agnostic framework built by Dave Gamache (Designer at Twitter; formerly Interaction Designer at ZURB). Syntactically, Skeleton is reminiscent of the popular 960.gs, making Skeleton easy to learn for many web developers. Skeleton’s grid support is on par with Bootstrap and has room to grow.

If your goal is rapid prototyping, you will probably need to pair Skeleton with jQuery UI or a similar library. That’s not bad, in fact that simplicity is arguably awesome, but it’s clearly a line in the sand between Skeleton and Bootstrap/Foundation.


Building a responsive team

The best result from our experiment? Our entire team can articulate the ins and outs of each framework. Our interactive team showed incredible initiative, breaking down each responsive framework into an exhaustive list of features, pros, and cons. All of this in addition to their full schedule of client work. Cheers to Vermilion’s interactive team and to the developers of Bootstrap, Foundation, and Skeleton for moving the responsive web forward.