by Flo Preynat

I’ve already talked about Foundation in the past. Out of all the big responsive front-end frameworks out there, Foundation is the one I prefer. Most of it comes down to the fact that the Zurb tool went with Sass (and Compass) which I’ve been using for ever, as opposed to Bootstrap which took the Less route instead.

Speed speed speed

“Foundation 5 is our fastest, best build yet. It’s packed with features to help you code and learn faster than ever before.”

There you have it. The new version of Foundation is supposed to blow us away in terms of speed.

Let’s take a look at all the new shiny features.

A better User experience

We already knew about Interchange, and if you don’t, I invite you to read my blog post on how to use it.

Be aware that the new Foundation is now integrated with fastclick.js, an easy-to-use library for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers, and hence make your mobile experience snappier.

Off Canvas feature made it top of the navigation docs, offering the Foundation users a native integration of the now-well-known feature.

“Off-canvas menus are positioned outside of the viewport and slide in when activated. Setting up an off-canvas layout in Foundation is super easy.”


Finally, better GPU Acceleration and improved forms will also offer your users a better experience.

Coders gonna code… faster

If you have used the Foundation framework before, you would have noticed that the medium grid was not included by default. Foundation 4.3 had indeed introduced an optional medium layout, which needed to be manually added to your scss (not a big deal but still an additional step) to get featured.

The medium grid is now in Foundation 5 by default.
Note: min-width 641px (40.063em) and max-width 1024px (64em)


Also to note, a new command line interface using Libsass, a C/C++ port of the Sass CSS precompiler made by the inevitable Hampton Catlin, and some handy Sublime Text Snippets.

Redesigned Document structure

The layout of the document section had never been the strongest point of the Foundation website. It was a bit all over the place, especially for somebody using it for the first time. Does what I’m looking for fits in the javascript section, or in the navigation section? (e.g. Sections).

In Foundation 5, the features are now grouped by functions, and not by technology. A small JS annotation will however indicate whether the feature you are opting for is based on js or not.

On top of that, you will find a dedicated forum, some new videos helping you get up to speed with the framework, and if you need it a paid training program.

My take away on the new Foundation 5

Zurb are certainly not showing any signs of slowing down in terms of development and those definite improvements of the responsive framework are there to show just that. Expect more and more from them, as they slowly but surely grow as a serious support & service provider to companies.

My name is Flo Preynat and I am the freelance webdesigner and developer behind shoogle designs. I live in France and specialize in responsive web design. Give me a shoogle or get in touch with me on twitter.

Most Recent Posts

Special Recent Posts

Sip: a color picker refreshingly simple indeed

Sip: a color picker refreshingly simple indeed

July 10th, 2014

I've just discovered Sip, a color picker app for Mac users. "Just discovered" since it's been around[...]

Perch – the CMS that does not pollute your web design workflow

Perch - the CMS that does not pollute your web design workflow

July 7th, 2014

I have recently finished a project based on Perch, the clever 'little' CMS created by edgeofmyseat.c[...]

Responsive video code snippet

Responsive video code snippet

June 29th, 2014

More of a reminder than a pure detailed blogpost, this code snippet will be my go-to resource when I[...]

Project Naphta: a nifty extension to play with text embedded in images

Project Naphta: a nifty extension to play with text embedded in images

June 9th, 2014

We've all been there. You want to select a good chunk of text on a website, only to realise you can'[...]

Free photos for your web design projects

Free photos for your web design projects

June 4th, 2014

Nothing beats using a real professional photographer when working on a cool project. You can be the[...]


Be the first to drop your two cents here!