5 reasons why Foundation 4 is better than Twitter Bootstrap 2

Tags: , , , &


We’ve all heard of Twitter Bootstrap and how popular it is as a website design tool. While Bootstrap is fast, fun and friendly, it does present some problems for web designers. There’s a slightly less well known framework out there called Foundation which might just be a better tool for building websites.

In this Foundation series we’re going to explore Foundation, a Bootstrap alternative. We will look at the features which make it so awesome, why it’s better than Bootstrap (2) and some of the flaws which prevent it from taking over the web design world.

By the way if you are still on the fence after this article, be sure to check out our flowchart to help you decide which framework is right for your project.

Let’s kick it off on a positive note with some of the areas where Foundation has the upper hand…

1. It’s built with Sass!

…and it comes with a big shiny Compass gem. This was the biggest drawcard for me. I love using Compass as it takes care of a lot of cross-browser styling issues and makes for some really clean HTML. One of the things that really irked me about Bootstrap was all the messy mark-up that I inevitably ended up producing. Foundation solves this by providing handy mix-ins for (nearly) every one of it’s nifty features. Elements are targeted with specificity, mix-ins are added, presentation remains separate from content and the web design gods are happy.

2. It’s built for developers and designers

One of the great things about Bootstrap is that you can customise it, download it and throw it at a website, making it a silver-bullet solution for devs. One of the drawbacks as a web designer is that once Bootstrap is set up, if you want to add more onto it, or make some changes it’s not so easy. Foundation is far better in this respect, the mix-ins provided make for a far more flexible framework. Foundation basically says, “if you want to use it straight out of the box you can, but if you do want to customise things further, here are all the tools you need”. Foundation actively encourages best practices like a mobile-first approach and the separation of presentation from content.

3. It’s really lightweight

Foundation is not just responsive, it’s actually mobile-optimised. First of all it uses Zepto, which is a super-lightweight version of jQuery. Compare Zepto’s 24kb with jQuery’s 84kb, this will make a big difference when downloading on a data network. Another great feature is that Foundation gives you fine control over which assets you include, allowing you to remove all the bells and whistles at the start, then add them on as required.

4. It’s actually built for mobile devices

Bootstrap 2 has got responsive design down, there’s no argument there, but it doesn’t really optimise content for mobile. Foundation has a solution for responsive content and a solution for media too! Rather than downloading the same size image on all devices, you can use Interchange to specify different images for different media queries. Foundation also does flexible videos too, which respects the video’s aspect ratio while scaling it down appropriately.

Another valuable mobile feature is that all the plugins are touch-optimised, making for a thoroughly enjoyable mobile experience.

5. The plugins are cooler!

Bootstrap has some good features for dealing with interactivity, they’re simple, robust and they respond really well. Foundation is built by Zurb, who if you don’t know, make some totally kick-ass JavaScript plugins. I mentioned Interchange before, which also solves another new problem for web designers: Retina images. Interchange works with media queries, so you can render any Retina-version images using the high-pixel-density media query (mentioned in our Retina display article).

The other two plugins I find particularly exciting are Joyride and Magellan. Joyride takes new visitors on a quick tour of your website, this can be enormously helpful for introducing the features of a web app, and it’s super-easy to implement. Magellan, like Bootstrap’s Affix, is a simple, style-independent way of keeping a secondary navigation fixed in place as the user scrolls down the screen. The advantages of Magellan are that it is more flexible and it also includes the the clever page-section highlighting when the user scrolls down the page (ie. Scrollspy on Bootstrap, which is separate).

Coming up next

Foundation’s lack of support for legacy browsers could be it’s Achilles heel. In the next article we’ll look at some of the problems with Foundation and how to get it working on older browsers.

If you are still on the fence about what framework might be right for you, be sure to check out our flowchart to help you decide which framework is right for your project.

People who have viewed this post also viewed


  1. john

    Interesting post thanks.

    I think too that Foundation satisfy both designers and developpers. As it comes frome a design company (Zurb), design features are better with Foundation.

    However as Devbean point it the lack of IE support is a big drawback.

    And do yo compare it with Bootstrap 2 or Bootsrap 3 ? There is a lot of nex features inside Bootsrap V3 and there is possible support of SaaS by third party.

    So the choice is not easy.

    1. Sam Post author

      In this series, I’m comparing Foundation with Bootstrap 2… it looks like I’ll have to write another article discussing Bootstrap 3! There are some really cool new features in the new Bootstrap (many seem to have been inspired by Foundation…).

      Foundation is lacking somewhat in it’s support for legacy IE browsers, which I agree is a big drawback. With the new IE auto-update rolling in however, this should slowly become less of a problem.

      You might also like to check out our post on how to solve Foundation’s IE legacy problems.

  2. devbean

    Well, since Foundation is built on Zepto, I read about this JS library and found that it does not support IE (even IE10), so I think Foundation will be more suitable for mobile. I think we could not give up IE for most web sites.

    1. Nilaf

      I would prefer foundation 4. Zepto delivers good performance if used right on mobile.For IE use jquery fallback.

      There is one other problem. Foundation 4 is mobile first and ie8 does not support media queries.You can use polyfills like respond.js

    2. Sam Post author

      On the Foundation website, Zurb suggests doing a check for Zepto compatibility and loading jQuery if Zepto is unavailable. I believe this is a slightly better way of doing things, as it means providing the user with the smallest resource size possible. Remember also that you don’t have to use Zepto, jQuery will work with Foundation just as well.


Leave a comment

* Required fields


Please enter the CAPTCHA text