Framework Fight: Zurb Foundation vs. Twitter Bootstrap

by on 24th May 2012 with 54 Comments

screenshot

In the vast world of rapid prototyping CSS frameworks and toolkits, there are a ton of different options to choose from, but ever since Twitter’s Bootstrap hit the scene it seems like it has largely gobbled up this market. Is there room or reason for anything else?

The folks at Zurb think so and aren’t about to abandon their widely successful Foundation project. Having written about Bootstrap several times in the past, I’m going to jump into Foundation today and see what I think.

Meet Foundation

screenshot

So what is Foundation? Zurb describes it as “an easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device.”

Right from that description you can tell that Zurb is putting a lot of emphasis on the cross-device aspect of its layout grid. Interestingly enough, the word “responsive” doesn’t appear anywhere on the Foundation site (that I can find), but the benefits are definitely similar: design one project that works everywhere.

Is It Like Bootstrap?

These two projects certainly aren’t identical, but they’re about as close to direct competitors as you can get. Basically, they’re similar enough that if you’re using one, you’re almost certainly not using the other.

Both Bootstrap and Foundation seek to give you all of the tools that you need to quickly perform CSS-based layout and prototyping work with some JavaScript goodies thrown in. They’re also both marketed with a heavy emphasis on clean, minimal design, which is a result of the extensive default styling on things like typography. Even their home pages look remarkably similar:

screenshot
screenshot

The Grid

screenshot

The first thing that I turn to with any framework is the grid. The layout system is often the cornerstone that the entire experience is built on so getting this right is a big deal.

With Foundation, you start with a flexible twelve column grid, which responds well to browser resizes and uses media queries to handle the shift to smaller devices. In Bootstrap, you also have a twelve column grid that makes heavy use of media queries. Here you have the option to choose between fluid and static columns, which is nice.

Implementing the Foundation grid should be a snap if you’ve used other grid systems before. Yes, it does involve the use of non-semantic class names so if you hate frameworks for that reason, this won’t be the one that changes your mind.

The system here is easy enough that you can pick it up almost immediately. Each time you want a new row, create a div with the class “row”. From here you have twelve columns to fill. You can split it in half with two six column divs, cut it in thirds with three four column divs, etc. Simply apply a class that corresponds to the number of columns you’d like to fill in addition to the “columns” class.


Lorem ipsum...

Lorem ipsum...

If we recreate this example in Bootstrap, the syntax is extremely similar, though more succinct. Bootstrap doesn’t require the extra “columns” class so you’ll be able to trim back your markup just a bit. Admittedly though, “span6″ sure doesn’t read as nice as “six columns”.


Lorem ipsum...

Lorem ipsum...

Both grid systems have all of the advanced features that you need: nesting, offsets, pushing/pulling, etc. As with the code above, you’ll find that with these features, Foundation’s syntax is a little more straightforward and easy to read while Bootstrap’s is more succinct.

Who Wins the Grid Battle?

I’m a grid fanatic and really love digging around and seeing what makes these things tick. I’ve built pages with both the Bootstrap and Foundation grids and honestly find them both to be excellent. They’re so similar in approach that I don’t think this will be the deciding feature for anyone trying to choose between the two.

If you hate one of them, you’ll probably hate them both and if you like one of them, it won’t be difficult to switch to the other. It used to be the case that Bootstrap would’ve lost this battle without a second thought, but now that Bootstrap 2 has gone responsive, I’m declaring it a draw.

Basic UI Elements

Both of these frameworks contain pre-styled but customizable UI elements so that you can quickly mockup your app or web page without giving too much thought to how you’re going to structure different pieces.

Let’s start by looking at one of the most basic UI pieces, a button. In foundation, all you really need for a button is an anchor tag with the “button” class applied.

However, this is going to create an incredibly simple button. If you want to make it more interesting, each additional piece of styling has another associated class. For instance, below I’ve made a small, blue, glossy button with rounded corners.

screenshot

The story is the same here as with the grid. Foundation’s style is more verbose, but especially in this case, it allows for an easier to tweak experience. Instead of splitting classes off by what they do, Bootstrap assigns different personalities to each class. So you can choose between “btn-info” and “btn-warning” for different style options.

As far as styling, I personally like the subtle gradient look that Bootstrap uses better than the glossy Foundation look, but this can be easily customized in both frameworks so it’s pretty much a non-issue.

Forms, Tabs, and Labels Oh My

It’s simply not worth going through every UI element and comparing the syntax, you should get the picture by now. Both frameworks stock you up on the most common UI items so that you can implement them with virtually no heavy lifting whatsoever.

Tabs, navigation, breadcrumbs, forms, labels, tables; if you want ‘em, you got ‘em no matter which of these you’re using. That being said, if you’re looking for quantity, Bootstrap really takes the lead here and seems to just pack in a ton of interesting UI elements. Each framework has some unique pieces not in the other, but Bootstrap wins the numbers game.

JavaScript Goodies

Foundation isn’t only a CSS library, it has some great JavaScript features as well. One of my favorite features is the Orbit slideshow, which is really easy to implement and customize.

screenshot

All you need to set up a slideshow is a div with some images in it (use alt tags for captions). From here you just point your JavaScript at that div and call the “orbit” function. If you want to go further, there are plenty of options to tweak.

There’s also a pretty cool modal window plugin, some tooltips, tab functionality, dropdown menus, alert messages and some nice form validation. Jumping over to Bootstrap we see most of the same types of items implemented in subtly different ways. Once again though we find that the Bootstrap offering is a little more robust.

screenshot

Preprocessor Support

One area where Foundation and Bootstrap went their separate ways is with their preprocessor support. Foundation went with Sass and Compass while Bootstrap went with LESS. I started as a LESS fan but have since been won over to the power of Sass so I’m inclined to like Foundation better in this regard, especially given the Compass integration.

Compass is a powerhouse of preprocessor goodness and really makes it easy to code up cross-browser CSS3 with little effort. I’ve always been fairly surprised that Bootstrap chose the LESS route instead.

That being said, it’s interesting to note that Bootstrap pretty nearly serves as Compass for LESS. Just like with Compass, Bootstrap comes built in with all sorts of helpful mixins that help you utilize complicated CSS features with very little hand coding.

Whether you’re using Foundation or Bootstrap, taking advantage of the preprocessor support will make it far easier to customize and extend the framework.

Cut The Crap, Who Wins?

It’s difficult to declare a winner here. As I mentioned previously, Bootstrap 1 was easily inferior to Foundation simply because the layout was purely static and non-responsive. With Bootstrap 2 however, Twitter really upped their game and have built an exceptional toolset and Foundation has some work to do if it’s going to match it.

Bootstrap simply has more to offer from a strict feature list perspective. It’s also more succinctly coded, better organized and far more thoroughly documented. This is on top of the fact that the developer community has thoroughly embraced Bootstrap to the point that superb third party themes, plugins and other extras are easy to find.

That being said, there’s an important question here: is bigger better? Just because Bootstrap seems to have more in it doesn’t necessarily mean that it’s superior. In the world of web design and development, less is often more. Foundation has a simpler, less bloated feel to it that I really appreciated. It really is amazingly easy to download it and begin busting out web pages in no time.

Bootstrap users will chime in here and point out that the bloated argument doesn’t apply because there’s a custom Bootstrap download builder that easily lets you decide what you do and don’t want in your framework.

Which Do You Think Is Better?

You should give both frameworks a test drive to see which you gel with better. However, you came here for an opinion and I’ve got one for you. If you only want to download one of these libraries, go with Bootstrap. I’m not a Bootstrap fanboy and to be honest I haven’t even adopted it into my personal workflow. Further, I see Foundation as the underdog and would love to give it the prize here, but I think it’s got some catching up to do before that happens.

But what do I know? You guys are using these types of tools every day and I want to hear what you think. Is Foundation better than Bootstrap? Why or why not? Would you consider using either of these in your workflow if you’re not already?

Comments & Discussion

54 Comments

  • http://www.jeffscottward.com Jeff Scott Ward

    Interesting. Always had been flip flopping between them, but almost always chose Foundation due to SASS. That really becomes a non issue if your in and around the github world and can fork a sass version. As much as I would like to award Zurb as well, currently as of May 2012 its definitely behind on the feature set front compared to bootstrap. Very eagerly awaiting Foundation 3.

    In my humble opinion, I hate LESS… with a burning passion, I hate the @ syntax, its way less expressive (or not at all?), and does NOT have a framework like Compass. If Sencha Touch built there platform with SASS, its a clear indicator who wins. I still to this day don’t understand people who use LESS other than for the fact its part of bootstrap, i just dont.

  • http://www.skiddmark.com Steve Davies

    This article reminds me that I’ve got some housekeeping to do. I originally built our site using Zurb Foundation, then came across Twitter Bootstrap and loved its more comprehensive functionality, so we’ve got both running on parts of the site.

    I know, I know, that’s not an optimal way of using them, but perhaps it demonstrates for anyone considering a migration, that the two frameworks can be run together, so migration can be scheduled in phases.

  • Rubens de Melo

    I chose the Foundation, because it is simpler and I meet most of my projects.

  • Raymond Gentry

    I was really having a difficult time understanding grid systems. Maybe it was just the documentation that made this simple concept seem complicated. When I started experimenting with Foundation, the entire grid concept finally clicked. For some reason the Foundation site made this easy to understand. The project is actually marketed as simple and easy. I only built one site with Foundation, and then i moved on to Bootstrap 2 because of its features and its responsive layout. I actually liked the Foundation grid a bit more than the Bootstrap grid, but the differences are small. Foundation rules in simplicity, Bootstrap rules in features.

  • http://braginteractive.com Brad

    Bootstrap is sexier! Compare just the forms and buttons. Anyone would choose Bootstrap.

    If anyone wants to use all the Bootstrap features in a WordPress theme, check out http://bragthemes.com. StrapPress is super nice!

  • http://www.circulationstudio.com Brian

    I like looking into their code and getting ideas to incorporate into my own framework. I also dig that Foundation claims it is made to be overwritten to avoid “same-ification”. It is pretty easy to recognize a bootstrap based site, when designers quickly put something together without much customization.

    I prefer variety and knowing the code inside and out!

  • mark

    Grids aren’t even close. Foundation is better. Twitters nested grids have to equal in number the grid they are contained in. Foundation divides its parent into 12 logical units so you don’t have to rename div classes. What kind of review is this?

  • Flint

    Grid wise, I prefer Foundations’

  • http://11heavens.com Caroline Schnapp

    > Both grid systems have all of the advanced features that you need: nesting, offsets, pushing/pulling, etc.

    Bootstrap has pushing/pulling? AFIK it does not have that, which would be so sweet to get a left sidebar in that does not rise above the main content on mobile devices.

  • http://11heavens.com Caroline Schnapp

    > Bootstrap is sexier! Compare just the forms and buttons. Anyone would choose Bootstrap.

    In Google Chrome and Desktop Safari, Bootstrap definitely looks sexy. In other browsers, including on iOS devices, not so much, unfortunately. Buttons do look great but other form fields often don’t.

    • Bill

      Second this, ’tis why I moved from Twitter. Not cross-browser consistent look-n-feel.

  • http://about.me/edcharbeneau Ed Charbeneau

    I love Foundation’s grid system. I also like that Foundation encourages you to design your site with your own style. Bootstrap leaves that cookie cutter feeling IMO.

  • http://www.jonathanshariat.com Jonathan

    Like many have said, I like foundation because it is more simple but I would choose bootstrap in a heartbeat when building a web app.

  • http://glideinteractive.com Robin

    https://github.com/thomas-mcdonald/bootstrap-sass

    This is bootstrap with sass, about to test it out in my current project (already used Foundation and like)

    • http://golfbuds.com Keith

      Any opinion on bootstrap since starting on the project you mentioned In May?

  • http://tomhermans.com Tom Hermans

    A really close call, but I like Foundation’s grid, and certainly their UI of buttons etc. just a tad better.
    Let’s see what v3 gives us vs TBS2

  • http://www.2jstudio.com/ Airzebeth

    Apart from the fact it is not that bad, some of us still use LESS CSS just because they don’t use Ruby but PHP… which probably explains Twitter choice by the way (http://techcrunch.com/2008/05/01/twitter-said-to-be-abandoning-ruby-on-rails/). No need to tell which framework I choose, even if they indeed are both good material !

  • aleks

    I prefer Bootstrap and Foundation but recently came across this, might be worth checking out: http://www.gumbyframework.com/

    I am also excited to see what Zurb will come up with for the next version of Foundation.

  • http://www.lancebridge.com Chat

    @aleks, thanks for the gumby link..
    I was in fact undecided on which one to go for… I guess i will try out bootstrap…
    thanks for the comparison Joshua!

  • http://www.umarfarukm.com/ Umarfaruk M

    But i love bootstrap <3 its delicious!

  • Caesar

    They say Zurb Foundation 3 is the most advanced in the world. Oh well!

  • http://ajtroxell.com AJ Troxell

    Granted my personal site sticks pretty close to the default styles and functionality of the grid, because of lack of time to spend on it, but I much prefer Foundation. It has a simplistic view on a grid, equal count of grids no matter how many levels deep you go. Pushing and pulling is extremely simple. And now with Foundation 3 using padding instead of margins, this allows for a whole world of styling via graphical elements that were rather cumbersome in version 2. I use Twitter Bootstrap daily at my day job, but steer clear of it outside of work.

  • Frans

    do someone mention, a general name for zurb foundation, make it become not a good product naming compare with twitter bootstrap. even the product better.

  • http://hannenz.de hannenz

    Foundation 3 is out now and has a lot of really nice features and cleaning up. I started out with Foundation and fell in love immediately. Bootstrap looks very advanced but i think i will stick with foundation; mostly because – as someone else stated – Foundation forces you more to go into individual styling while proividing a bullet proof and rock solid (literally) FOUNDATION :)

  • zofrex

    I agree that it is a very close call. For mocking up rapidly, I think Bootstrap takes the gold, you get a little bit more and type a little bit less.

    For a production site however, Foundation hands down for me. Bootstrap gives you more but the flipside is you can tell when it’s been used, whereas Foundation is a lot more subtle. The real selling point for me however is being able to have semantic markup: Using @import in your .sass means you can apply Foundation’s classes without littering your markup with non-semantic classes, whereas doing the same with Bootstrap takes a bit of work. (You can see an example of how to sass-ify Bootstrap’s grid here: https://bitbucket.org/zofrex/zofrex.com/src/72c1384768c7/source/stylesheets )

  • Nene

    Please what font was used to write the ORBIT JQUERY in the image above.

  • Stephen Ginn

    I’ve been using Bootstrap for quite some time now and love it. Only issue I have with it is the massive amount of divs / nesting it causes. Also, it needs more styles for form-replacement and common IE fixes. (I’ve also run into a few bugs).

    Basically, Bootstrap has some complexity issues. But, it’s well-documented, easy to use, and fast.

    Took one look at the Zurb Foundation and didn’t like it because it was too slow. If a framework slows down the site a lot…then it’s not even worth using.

  • http://merobox.com MeroBox

    We love Twitter Bootstrap, it’s cool!

  • http://pakpenyo.com PakPenyo

    Foundation looks great but underdog. Bootstrap is mainstream and cool. So, nothing better than other.

  • AntoxaGray

    I choose Foundation, because it uses SASS.

  • http://xaviesteve.com Xavi

    It’s a tight result, at the moment of writing this Foundation 3.0 is out and looks very good. Although I am still sticking with Bootstrap: it has a bigger community/activity and most importantly, the coding style, variable naming and overall architecture is much more minimal and similar to how I code.

  • http://superdit.com aditia

    I haven’t tried Zurb but I think the ui has more clean design than bootstrap, but bootstrap have more feature to use

  • Groovy

    At last thorough use of both systems, Bootstrap’s functionality couldn’t compare to Foundation’s. The menu and grid systems alone in Bootstrap are worthy of ridicule. There is no time to point out just how shallow of an investment you’ve made here just to garner ad money, but it should be mentioned that even with 20K+ minds on github all humping the Bootstrap product, they still miss the mark. Zurb has been doing it longer and better. This is like comparing Dojo to any of those little MV-ANYTHINGICANIMAGEGOESHERE-ish front-end framework attempts made by those Node-humping skateboard kiddies.

    • Joshua Johnson

      Bizarre comment friend. 1. No affiliation with Twitter here so no ad money. 2. Your metaphors are weird. :)

      • Bill

        One has to admit tho – creative response! :) lol

  • Mike

    I used both bootstrap2 and fondation3 and i have to say foundation3′s grid is much better. For all js goodies, it’s equal, with a slight advantage to bootstrap. Overall if you’ve never used either i would recommend Fondation3!
    Foundation 3, is built with box-sizing: border-box, a CSS property that tells the browser to consider border and padding as part of the width of an object rather than as an addition. gutters are created simply with padding on the columns.

  • http://roes-wibowo.com Roes Wibowo

    It’s too difficult to know which better. But, I prefer Zurb Foundation as my favourite framework because that’s my requirement to work. By the way, bootstrap isn’t bad one.

  • http://baguioads.ph/ Gary Dapogi

    It’s really a preference and choice. I am a newbie web designer and I am using them both. One day If i got the time, I would want to mix them together. Grid system from bootstrap while javascript from Zurb. I am more adept with twitter bootstrap’s grid system than zurb.

  • http://wpmonkeys.com/ Banhawi

    I prefer Zurb Foundation over Twitter Bootstrap, Foundation is richer and with the recent 3.0 update is became more richer and with SASS support. For Bootstrap i like much of their basic styling over Foundation basic styling for example Basic Buttons.

  • http://www.netlingshq.com Dipesh Batheja

    We have been doing lot of PSD to HTML projects on Twitter framework. But i have personally liked Zurb Framework more. Better styling and inbuilt custom form elements JS, the new version have ti all. Looking forward to do some more client projects on Zurb as well.

  • Peter O’Connor

    I spent a few days on Foundation 3, attracted by its responsive layout. However, under the hood, I found it is not as neat as Bootstrap.

    It is difficult to do any slightly-complicated modifications, as it exposes very few variables. And they don’t really work out-of-box in some cases, such as the top bar.

    It is also impossible to dig into the codes and customize there. It is written in the name of scss, but not in the spirit of scss.

  • http://jetstrap.com/ Max Lynch

    Another difference between the two is simply the ecosystem. There are a growing number of tools and services focusing on bootstrap, and I think that will continue to give it an advantage going forward. My company builds bootstrap tools and we are excited about the future of bootstrap.

  • Tim Peterson

    bootstrap wins

  • Matt

    I used Foundation. I also merge parts of Bootstrap into my project with no problems. I select the parts I want from bootstrap like tables, and icons.
    Works like a charm.

  • Matt

    I used Foundation. I also merge parts of Bootstrap into my project with no problems. I select the parts I want from bootstrap like tables, and icons.
    Works like a charm.

  • Jack9

    Foundation is the winner as they understand JavaScript (i.e. they honor the semicolon ;)

  • http://www.lemiffe.com lemiffe

    Bootstrap all the way!

  • http://Richbyte.com Gaurav

    In my opinion:
    Bootstrap – great for prototyping web apps
    Foundation – great for building websites

  • http://colinscroggins.com Colin Scroggins

    It is worth noting that there is a difference in browser support between the two. On a recent project, I started with Foundation and had to move to Bootstrap because the client desired Internet Explorer 7 compatibility.

  • Cristian

    I have no preference, but when our company was working with CustomPSDS.com they built some kick ass wireframes for us before we started development and we asked what framework they used: Bootstrap. Looked great, and was perfect for a pre-development prototype.

  • Scott

    If you choose a CSS framework for its button (or even form) styles, you’re doing it wrong.

  • http://about.me/kennyma Kenny Ma

    I find that Foundation’s grid system is better than Bootstrap because Foundation’s nested grid implementation is easier to maintain. Take a look at the follow examples in Bootstrap and Foundation.

    Bootstrap:

    Page Header

    Some content

    Some more content

    Foundation:

    Page Header

    Some content

    Some more content

    Take a look at the nested grid in the main-content. Notice that nested grid in Bootstrap need to add up to the parent’s column count while nested grid in Foundation always has 12 columns. With Foundation, you don’t have to keep track of how many columns is in the parent. With Foundation, if you need to change the width of the parent, you don’t have to change the width of all of the children. Things get even more complicated when you use a templating engine and you need to make changes to the layout file containing the parent grid.

    This is why I prefer Foundation over Bootstrap.

  • http://about.me/kennyma Kenny Ma

    code embed failed

  • http://anchetawern.github.com Wern Ancheta

    Nice article. I have tried both bootstrap and foundation and I can say that foundation feels right for me.

Subscribe
Membership
About the Author