Authors’s Note: I have a more recent article with a more hands-on experience with Foundation 4. This article will tell you its a toss up on which to use. It’s not. Foundation 4 wins in a landslide. Click the link to find out why. If you want to know how Twitter Bootstrap 3 stacks up against Foundation 4, you can read the in-depth review here.
Twitter Bootstrap and ZURB’s Foundation 4 are two of the most popular front-end development frameworks. Both frameworks make developing a high quality site easier and quicker (and we’ve written extensively about Twitter Bootstrap before). But which framework is right for you?
I put that question out on our Twitter feed and found out something… the good folks at ZURB love them some Foundation 4.
@buxofficial ZURB, of course! It’s mobile first, sass based, truly responsive, has smaller js files and has a happy, fast growing fan base!
— Bryan Zmijewski (@bryanzmijewski) May 22, 2013
@buxofficial Foundation, but I’m a little biased.
— Matt K (@mkelly12) May 22, 2013
Understandably, if you’re ZURB, you should be proud of Foundation 4. But is that truly the better framework?
If you’re in a hurry, let me cut to the TL;DR: It’s a toss-up. If you need IE 8 support, a non-responsive design, or want to develop on the framework with the largest community, you want Twitter Bootstrap. If you love ZURB products and want to integrate further into their suite of tools and products or you want to develop a mobile-first experience, Foundation 4 is a great way to go.
Either way, it’s hard to go wrong. Both frameworks offer a lot of capability in a quick free download. Let’s look closer at these frameworks to see what’s really going on.
Twitter Bootstrap 2.3.2 Overview
It’s rounded out by a robust community of active developers. I’ve previously written about my 12 favorite bootstrap resources and these will give you an idea of the breadth of tools and resources that are available to use.
If you’re looking for a grid system that includes both responsive and non-responsive grids and has a bunch of CSS and jQuery bells and whistles with a large community of developers, this could be the framework for you.
There’s a lot to like.
ZURB Foundation 4 Overview
While that all sounds cool, what would be helpful is a chart of each framework’s components and differences.
A Chart of Each Framework’s Components & Differences
ZURB Foundation 4
|Grid System||960 non-responsive/ multi-break responsive||single-break responsive|
|CSS Components||Mostly Shared, Media Objects, Typeahead, Affix, Popovers||Mostly Shared, Pricing Tables, Joyride, Clearing|
|Browser Support||IE 8 Support||No IE 8 Support|
|Community||Large community||Small community, but plays well with other ZURB products|
Grid systems are a quick and easy way to layout content on a site. There are many different kinds of grids out there to try from Twitter Bootstrap and Foundation 4 to ZenGrids and 960.gs and more, you’ve got options.
Here, Twitter Bootstrap and Foundation 4 show their biggest differences.
Foundation 4 is proud of the fact that they’re a “mobile-first” framework. What this means is that they’ve designed the framework to look good on mobile devices first, and then scale nicely to larger screens. Responsive design has one break in Foundation 4. This means that as you scale the width of your page down, the page content will adjust itself within its given layout until it hits the break point. Once it hits that width, it collapses into a mobile friendly version of the site.
Of course, it’s possible to create as many other break points as you’d like but out of the box, Foundation 4 has one break point.
This mobile-first strategy has its advantages. For example, it makes mobile navigation a breeze, something that’s more complicated in Twitter Bootstrap.
Twitter Bootstrap doesn’t have the laser-like focus on mobile-first, though I’ve heard that it’s coming when version 3 comes out. Currently they offer a traditional 960 non-responsive grid and a fluid/responsive grid. They also offer multiple break points. Some people may call this “bloat”. Others call it “flexibility”.
The biggest thing to know about the grid systems is that because of the way that Foundation 4 uses the box model, it does not support IE 8. If you want it to work in IE 8, you’re going to have to use Twitter Bootstrap. Also, it’s time to upgrade your browser.
Outside of that consideration, or if you simply must have a fixed-width site, it all comes down to your preferences for implementation, though anecdotally, people tend to slightly prefer how Foundation does it. But really, it’s a toss up.
SASS vs. LESS
One of the questions you have to ask yourself is if you’re going to be digging into the SASS or LESS code in your version or if you plan to write plain old CSS. SASS and LESS are both languages that essentially make CSS smarter and more dynamic. CSS Tricks has done a great job here summarizing the differences between the two. And to save you the drama, they prefer SASS for a variety of reasons. For one thing, SASS uses Compass, which itself is a CSS authoring framework. What this means is that Compass contains a bunch of mixins and helper functions to make writing CSS quicker and easier. If Bootstrap and Foundation are frameworks for creating sites, Compass is a framework for creating CSS stylesheets. Ya dig?
Twitter Bootstrap uses LESS, Foundation 4 uses SASS. If you’re already familiar with SASS and LESS and plan on using it, chances are you’ve already picked one or the other so your choice of front-end framework will depend on which dynamic stylesheet system you want to use. Of course, if you’re going to be writing CSS, then the choice of LESS or SASS doesn’t factor in to your decision.
jQuery vs. Zepto
I asked ZURB founder Bryan Zmijewski about this on Twitter and he said that when in IE, Foundation 4 defaults back to jQuery. Smart!
— Bryan Zmijewski (@bryanzmijewski) May 23, 2013
ZURB vs. The Twitter Bootstrap Community
The last main point involves the community surrounding each framework. The Twitter Bootstrap community is the most robust community of all the frameworks. Here’s a list of 319 different resources for Bootstrap alone. Somebody is dealing with the problem you’re having, or has already solved it and has posted the code. Honestly, this is my favorite thing about developing with Twitter Bootstrap – the shear number of resources and other people developing.
On the other hand, you have ZURB. I don’t exactly know where ZURB came from. It was just one of those things that as soon as you first heard about them there was instant credibility. Maybe it’s because they put out a ton of free, high-quality digital products – like Foundation 4 or Joyride or PatternTap. Their development tools are a step ahead too. You just know that when you’re talking to a ZURBian (that’s what they call themselves, right?), you’re talking to a smart, thoughtful, professional.
And that’s the rub between Bootstrap and Foundation. It’s true that the Foundation community is much smaller. But instead of a large community where a lot of the ideas are half-baked or half-implemented, you get ZURB and the integration of their other digital products. And if my interaction with the guys is any indication, they are also readily available on Twitter. If a question comes up, you know you have smart people to go to for answers.
Twitter Bootstrap vs Foundation 4 – Which One Is Right For You?
The biggest difference between these two frameworks comes down what, for the life of me, seems like rather hair-splitting stuff.
- If you need IE 8 support, Twitter Bootstrap
- If you want the smallest, lightest package possible, Foundation 4
- If you want SASS (and Compass), Foundation 4
- If you want LESS, Twitter Bootstrap
- If you want ZURBian goodness, Foundation 4
- If you crave community, Twitter Bootstrap
- If you need a fixed-width grid, Twitter Bootstrap
- If you’re just goofing around, try both
Still don’t know? Check out this chart for more.
Have you tried these frameworks? Which do you prefer? Why? Tell us in the comments!