We wrote an article a while back comparing Bootstrap 2 and Foundation 4, the two most popular frameworks for front-end development. Foundation 4 came out on top in the last round, with some forward-thinking features like the fluid grid, interactive website tours and its native support of Sass.
With the recent stable release of Bootstrap 3, usage of Twitter’s latest version of the framework has grown with the same explosive popularity as the previous version. Bootstrap 3 has taken on board many of the popular features seen in Foundation, as well as introducing some cool new stuff.
Here’s a new feature line-up comparing the two frameworks, the new handy features in Bootstrap and the features which set the two apart.
|Bootstrap 3.0||Foundation 4.3|
|New Bootstrap 3 features|
|Built-in icon fonts||‚úî||‚úñ|
|Built-in testing server||‚úî||‚úñ|
|IE 8 support||‚úî||‚úñ|
|Foundation 4 only|
|Native Sass support||‚úñ||‚úî|
|IE 7 support||‚úñ||‚úñ|
Despite Foundation being able to boast more features, I would say the two frameworks are now pretty much on par. Bootstrap 3 is moving more towards an all-in-one development environment. Whereas Foundation offers more in the way of interactive components for rapidly building feature-rich apps and websites. They both look really clean, they’re easy to customise and they’ll speed up the development process enormously. So it really comes down to what suits you!
There are a few other key differences to consider when choosing a framework, which we touched on briefly in the previous feature comparison:
The developer community
Bootstrap has been around for longer, hence a much larger user-base, which is supported and maintained by Twitter. I’ve noticed there are less support resources for Foundation and troubleshooting generally takes quite a lot longer. Zurb provide training for Foundation 4, which may be the direction they want their users to go.
I’ve been impressed with the documentation for both frameworks. The Bootstrap 3 docs are well structured and communicate how to quickly implement their features. Foundation’s docs are a little less in-depth, but a fair bit more developer-oriented, with mix-ins provided for just about every component.
Setting up your development environment
Developing in Bootstrap 2 was all a bit mysterious, so I reckon they’ve have made huge improvements in Bootstrap 3. It requires setting up Node, Bower, Grunt and Jekyll, which take about 10 minutes to get running on Mac, and roughly an hour on Windows (Jekyll doesn’t really work on Windows, and takes some extra time to get working). I was so impressed with the workflow they’d created, I wrote this article all about it.
The Ruby-based development environment for Foundation is a piece of cake to set up on Mac (with Ruby being pre-installed on nearly all of their machines). Unfortunately, in my experience it is far less trivial setting up Ruby/Rails on Windows and it can take hours.