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
Twitter Bootstrap is a front-end framework consisting of a CSS grid system for both responsive and non-responsive sites and basic css that governs the look and feel of icons, typography, code, tables, forms, buttons, and images. It also includes a bunch of components to make working with dropdowns, button groups, button dropdowns, navs, navbars, breadcrumbs, pagination, label and badges, typography, thumbnails, alerts, progress bars, and media objects easy. It’s rounded out by a bunch of helpful javascript jQuery plugins. There are 13 in the current version including transitions, modals, dropdowns, scrollspy, tabs, tooltips, popovers, alerts, buttons, collapse, carousel, typeahead, and affix.
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
ZURB’s Foundation 4 is the biggest competitor to Twitter Bootstrap as a front-end framework. Like Twitter Bootstrap it includes a responsive grid system, base CSS, CSS components, and javascript plugins. Foundation comes out of the box with the responsive mobile-first grid system, navigation, buttons, forms, typography, alert boxes, global styles, panels, pricing tables, tables, thumbnails, flex video and the javascript plugins Clearing, Dropdown, Joyride, Magellan, Orbit, Reveal, Section, and Tooltips.
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
Feature |
Twitter Bootstrap |
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 |
| Javascript | jQuery | Zepto |
| Browser Support | IE 8 Support | No IE 8 Support |
| Community | Large community | Small community, but plays well with other ZURB products |
Grid Systems
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
Twitter Bootstrap and Foundation 4 use different javascript libraries to power their plugins. Twitter Bootstrap uses jQuery and Foundation 4 uses Zepto. The majority of people reading this aren’t going to be writing their own jQuery or Zepto code, so debating the merits of one or the other from a coding standpoint isn’t really why this is important to consider. Though if it is, here’s a pretty good rundown of the differences between the two. What’s really going on here is a tradeoff between speed and compatibility.
jQuery is a well-known fully featured javascript library. Zepto is a jQuery compatible library that strips a lot of functionality and compatibility out so that it takes up 9.7kB instead of jQuery’s 32kB. What you give up is browser compatibility. Foundation 4 claims to support IE 9 and IE 10, dropping support for IE 8. Zepto doesn’t claim compatibility with any version of IE. Zepto was designed to be a javascript library made for mobile and cutting-edge browsers. jQuery sacrifices a bit of speed for compatibility. If Zepto doesn’t support IE, then what gives?
I asked ZURB founder Bryan Zmijewski about this on Twitter and he said that when in IE, Foundation 4 defaults back to jQuery. Smart!
@buxofficial @foundationzurb defaults back to jQuery :). Best of both worlds!
— Bryan Zmijewski (@bryanzmijewski) May 23, 2013
By my count, Twitter Bootstrap comes with 13 javascript plugins and Foundation 4 has seven. If your main purpose in using javascript on your site is so you can use these javascript plugins, then its important to know the differences between the two. Refer to the Twitter Bootstrap javascript page or the Foundation 4 documentation for more details. But for most of us, we’ll be able to get by with either one. So again, it’s a bit of a tossup. For example, if you choose Twitter Bootstrap, you can still use Joyride, even though that’s a ZURB product, you just have to add it yourself. But for the purposes of this article, we’re really only thinking about the default configuration for these two frameworks.
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!
Nice detailed article! But if you need IE8 support with Foundation you can use Foundation 3, which is still fully supported.
Pingback: The Fast and the Furious: 3 Easy Ways to Speed Up Your Website in Less than 10 Minutes
“The majority of people reading this aren’t going to be writing their own jQuery or Zepto code …”
Just curious why you made the assumption.
Because our readership tends to skew more towards business owners rather than coders.
It doesn’t really matter. Unfortunately it sounds from the article that Foundation uses Zepto instead of jQuery. The real answer is it is able to use Zepto instead of jQuery. Zepto is just a lighter weight JavaScript library that can be used instead of JQuery. Foundation works just fine by using jQuery instead of Zepto. Basically you have the choice. If you want all of the power of jQuery, great, you can use it. If you don’t need the extra bloat, then use the lighter weight Zepto. With Bootatrap you don’t get a choice.
That makes sense. I’m new to the site. Forgive my ignorance, and thanks for the great article.
🙂 No worries. It’s a valid question. It’s totally reasonable to expect that people looking at a frontend framework would also know something about javascript.
“If you need IE 8 support, Twitter Bootstrap”
This statement doesnt make any sense to me. We have developed mobile site using Twitter bootstrap and they are really easy to develop/
Foundation 4 doesn’t support IE 8. You’ll either have to use Foundation 3 (a solution I didn’t offer) or use Twitter Bootstrap. Both support IE 8.
I guess Foundation 4 support IE 8 too, but for that we need to use “ie8-grid-foundation-4.css”. For more information please see below links:-
https://gist.github.com/hatefulcrawdad/5068210
http://foundation.zurb.com/docs/support.html
Definitely Twitter Bootstrap!
In what way is Foundation 4 non-IE8 compatible? Is it in the Grid/CSS use or their use of Zepto?
Of the two, what is the best to implement within a CMS?
Foundation 4’s grid system is what isn’t compatible. If you want IE 8 support AND want to use Foundation, you’ll have to go back to Foundation 3. Which is better for a CMS? It depends on the CMS. Which one are you using? WordPress?
Which one easier implement with WordPress?
It sort of depends. If you want to start with a theme that’s already been bootstrapped, they have those. If you want to do it yourself from scratch, both of them essentially boil down to adding a few lines of code to the header, and one to the footer. Then as long as you include the necessary files when you upload your site, it will work like a charm. So if you’re doing it from scratch, you can go either way.
i love bootstrap! =D
Twitter Bootstrap
I loved Bootstrap, until I finally used Foundation. Foundation allows to to create a grid for both narrow and wide screens. Bootstrap only allows you to create a grid for wide screens, and expands everything to 100% width on narrow screens. Speaking of which, the article claims Bootstrap has multiple breakpoints, but realistically everything interesting happens at just one breakpoint, so I don’t find it much more responsive than Foundation.
Also Foundation allows you to easily use your own class names using their mixins. Bootstrap doesn’t. This can be huge, especially when you don’t have control over your HTML markup (maybe a 3rd party JavaScript plugin is injecting HTML into the DOM).
75% of the JavaScript in both platforms is junk, in my opinion, but one feature that I use quite often is tabs. However, tabs suck for mobile, if you have more than 2-3 tabs, because the screen isn’t wide enough to fit them. Foundation has a tabs group that will convert to an accordion when on mobile, Bootstrap doesn’t. This is really handy.
I also find that Bootstrap might be a bit more heavy with their styles. So, when you want to create you own look, you have to “undo” a lot of their styles, where Foundation feels a bit more like a blank palette. I do prefer SASS over LESS, but find LESS capable enough to where I wouldn’t dismiss a framework that uses it.
At the end of the day, from a guy that has actually used both frameworks, Foundation is better, in my opinion. Now, if you are more of a beginner, you might prefer Bootstrap, because I do think it gives you a bit more of a polished look out of the box, plus a few extra JavaScript plugins.
Solid comment. Thanks!
Hi Mike,
thanks for opinion. I’ve tried bootstrap on one project – seemed fine.
I tried Foundation 4 because it looked promising. However in v. 4 they changed tabs approach to sections. My task was to accomplish tabbed navigation with overlapped tabs on both ends. This requires negative margin and tabs basically are positioned relatively. F 4 positions tabs absolutely depending on previous tab width. I spend several hours to make it work, but failed.
Do you have any suggestions: is it possible in F 4?
TIA
Alex
You can find this “mobile first” multi-grid feature in Bootstrap 3, which is not official yet, but I’m using currently with no problems at all.
“Also Foundation allows you to easily use your own class names using their mixins. Bootstrap doesn’t.”
Good point!
Both are really top notch, but having worked with both frameworks, I prefer Foundation. I agree with the article by CSS Tricks that SASS is more robust, particularly in how it handles logic. I also felt the single-breakpoint was the way to go. Twitter bootstrap makes some assumptions about grids and breakpoints that, while curable, are a little annoying to have to work around. At the end of the day, however, I wouldn’t turn down either. Although I’ve seen some conversions of Twitter Bootstraps LESS to SASS, I’d love to see official support for it. That would make the decision between the two pretty darn difficult.
You should checkout Bootstrap 3, which is currently still in development. It has all the goodies of foundation that are mentioned in this article!
You don’t need to go with Zurb if you want SASS. There is a sass (scss) mirror of Twitter Bootstrap! https://github.com/jlong/sass-twitter-bootstrap
Oh dang! Sweet! 🙂
I think alot of the problems with bootstrap are being addressed by third party themes built upon the framework.
If you look at a site like http://www.bootstraptheme.net/, you’ll notice the quality of the themes is forever increasing, along with fixes to the problems you mention.
Pingback: HTML5・CSS3フレームワークのまとめ情報 | 日本Geeks
Nice and Comprehensive article – fully clear my concept about difference of Foundation 4 and bootstrap as i was curious of sass and bootstrap but let me tell you Foundation is Awesome (y)
Twitter Bootstrap
Pingback: HTML5・CSS3フレームワークのまとめ情報 | blog of Johann Canu
I just made a bootstrap site and I styled it will scss… I did it because I didn’t know that I couldn’t.
It’s not that you can’t. It’s only that Twitter is built with Less whereas Foundation is built with scss. Therefore, if you are using scss, you can use the scss version of foundation and include their styles via mixins on your own styles (that way you don’t have to use any unneeded presentational class names in your html).
Found this post too
http://www.inserthtml.com/2013/07/bootstraps-and-web-kits-enemy-or-efficient/
uikit had some nice feats too that make selection harder
Pingback: Foundation 4 Is Better Than Twitter Bootstrap 2. Here's Why. | A Better User Experience
Pingback: Anyone know of an Axure widget library available for the Zurb Foundation Framework?
I’ve personally always been a fan of bootstrap, but I think they definitely both have different assets and it’s kind of just up to personal preference. I’ve read a lot about people swearing by Foundation 4, but the new bootstrap 3.0 that was just released also has a large following.
I was looking over RC1 of Bootstrap 3 today. Personally, I find their grid system confusing and their documentation really muddy. It’s not as clean as F4. I’ll be doing a comparison of the two in the next week or so. They’re similar enough that it’s probably good to know both, but as of now, I’m still a believer in Foundation. What are your favorite bits about Bootstrap?
Pingback: Moving to Jekyll | Rich Tolocka
Pingback: Twitter Bootstrap 3 vs Foundation 4 - Which One Should You Use? | A Better User Experience
I want to use jquery instead of zepto, does Foundation 4 fall back automatically? Or, Should I just install for example the jquery library from twitter boostrap separately and call from it?
Yes, as far as I know, if your browser doesn’t support Zepto, it automatically falls back to jQuery. However, if you want to force the issue:
Look for this bit:
<script> document.write('<script src=' + ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') + '.js><\/script>') </script>Replace it with this bit:
Done!
Pingback: Twitter Bootstrap 3 vs Foundation 4 | IT Media Connect
Pingback: 前端工作流程 « 可乐吧
Pingback: 前端工作流程 - javascript - 开发者第2279331个问答
Pingback: 前端工作流程 - javascript教程 - 开发者
Many moons ago I tried out Bootstrap. This, of course was before I had even heard of Zurb let alone Foundation.
After several weeks of trying to wrap my brain around Bootstrap, I came to the conclusion that Bootstrap was a pain in the back end to figure out.
Then I got an email that contained a link to an article on Foundation. After reading it, I headed over to the Foundation web site had a look around and decided to give it a go. Within a matter of “hours” I had a good understanding and had a little project up and running. I haven’t looked back.
So I would say to anyone who wants to look into a responsive framework, stay away from Bootstrap. In my opinion its over complicated. Foundation on the other hand is powerful yet super easy to use and configure.
And just in case anyone is interested Foundation and WordPress go really well together. I was able to create a WordPress theme that incorporates all of the features of Foundation without any hiccups. Plus there are a lot of other developers who have created some amazing WordPress themes with Foundation.
So the Yeti def gets my vote for president.