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!
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.