Thursday, 26 June 2014

5 reasons why Foundation is better than Twitter Bootstrap

I’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 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 amobile-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.

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’sAffix, 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 I’ll look at some of the problems with Foundation and how to get it working on older browsers.

Alternative content