An Easy Jump to Foundation 5

Little HTML changed

Zurb released Foundation 5 in November. Zurb touts faster all-around. Faster responsiveness, faster code, even faster learning.

Subjectiveness aside, this is a big release for developers who compile their own code, especially on the SASS->CSS front. For those who don't, a few new grid styles and little-to-no editing past HTML makes it an easy and worthwhile transition.

JavaScript dance

Foundation 4 moved from jQuery to Zepto. Foundation 5 moves back to jQuery. According to Zurb:

We switched to Zepto (with a jQuery option) in Foundation 4 for its smaller file size and faster load time. But faster downloads didn't always translate to better performance, so Foundation 5 uses jQuery 2.

Medium grid

A medium grid, targeting tablets, is what I was missing in Foundation 4, but is included in Bootstrap 3, and something I liked working with.

I use a CSS override file for my Foundation setup here, and getting full-width mobile, full-width tablet, and partial-width desktop would have required a lot of customizing. I thought it tipped the scale of using the framework as a base being worth it. With a medium size built-in, it's easy for me to set this up now.

Partial-width desktop?

If you have a one-column desktop site you have two options to display content: very large text, or a narrowed column. I played with both and the text became awkwardly large, so I narrowed the column. It's two-thirds of the full-width and has about 70 characters per line, which can be a little long for readability, and something I'm always tinkering with.

Is it worth it?

For prototypes, quick work and some basic sites, yes. Either of the popular front-end frameworks will do. For larger sites that will need a lot of customization no matter what, I can't see the pull. The override headache, work-arounds, and risky updates lead me to just make my own grid. Luckily, these are all broken out into different components and offer download customizers (besides github repos), so you could always take a shortcut where you want (form styling, for example) and reduce time and headache by downloading what you want.