Responsive frameworks - Foundation 5

Foundation is a HTML5 responsive framework which is ideal to prototype and build the front end of a website
Drupal article - Responsive frameworks - Foundation 5
It's been 4 month since I published the first part of the article "Responsive design frameworks". Things took different turn, and so parts 2 and 3 didn't come as planned. In two weeks I will be presenting at Drupal South in Wellington, so I've decided to rectify the situation with blog posts about the recent releases of Foundation 5 and Bootstrap 3.1, beginning with Foundation.
To recap, what is Foundation?  Foundation is a HTML5 responsive framework which is ideal to prototype and build the front end of a website. It consist of:
  • Responsive CSS styles for forms, grids, media, navigation, typography, and content to fit various devices,
  • SASS support for CSS. User can quickly modify certain CSS styles by using the SASS compiler,
  • JavaScript extentions to extend the CSS styles including sliders, panels, responsive images, accordion, tabs, etc.
So, with respect to my previous article, what's new in Foundation 5?

1. Speed

It is fast. Real fast. At least that's what Zurb (the company behind Foundation) claims. And here's why...
  • improved GPU acceleration for improving animation speed,
  • addition of new JavaScript libraries support for faster performance (e.g. jQuery2 instead of Zepto),
  • inclusion of fastclick.js library for a faster mobile experince,
  • new 13 templates for a quick start to suit the project you are working on,
  • Interchange JavaScript library provides a very lightweight utility for loading content (including styles) for particular devices.

2. Medium grid

By popular demand, the medium grid size was added as a stable feature (it was an experimental feature in version 4). Grid-wise, Foundation comes closer to the Bootstrap grid structure now.

3. New external tools

Apart from working on Framework itself, Zurb also adds various miscellaneous tools to make the developer's life easier. Version 5 includes:
  • CLI support to build a new project by typing

    foundation new project-name

    (powered by Node.js)
  • LibSass Support. The backend SASS compiling library is now responsible for compiling your code faster into CSS.
  • Bower support. This popular upgrade manager makes it easy to manage future Foundation upgrades for Foundation-based websites and apps.
  • The popular code editor Sublime gets some love as well with a number of code snippets available on GitHub.

4. Documentation & support

The strongest framework features of Foundation are excellent documentation and focus for where the framework should go next. To improve the user experince Zurb added:
  • a new Getting Started guide,
  • a new official Foundation forum,
  • enterprise support for corporate users.


To summarise, I hear more and more developers choosing Foundation over Bootstrap. The decision is mostly influenced by the availability of excellent documentation, and a focused path for the framework and its support tools.
In the end, it still comes down to personal preference, but the Foundation 5 update brings more power and speed to an already robust framework.

The Author

Vladimir Roudakov

Solution Architect / Social Engagement