Responsive Design Framework Foundation 4 Goes Mobile-First, Switches From jQuery To Zepto

Product design company ZURB just launched the fourth version of Foundation, its responsive design framework that directly competes with Bootstrap. The new version, ZURB tells us, has been completely rewritten from a mobile-first perspective. The company says this “empowers a designer to reverse their thinking ” and lets you “design for the mobile experience before you design for the desktop one.”

In addition to a number of other new features, the Foundation team also decided to switch away from jQuery and use the smaller and lighter Zepto.js library instead. ZURB says this is meant to ensure “that pages load quickly and efficiently given our mobile focus.” Given that Zepto is API-compatible with jQuery, developers can always switch back to the jQuery library, too.The team also made changes to how the developers and designers that use the framework write their code. In previous versions of Foundation – just like in Bootstrap – developers would write code that focused very specifically on the layout of the page (think <div class=”three columns”>). Now, in Foundation 4, these presentational classes have been replaced by a more semantic approach (<section>, <div class=”main”>, etc.) that moves the definition of the layout into the SCSS definitions.

Foundation 4 also features more mix-ins and placeholder classes, but besides the new semantic markup, the main difference from the last version is a focus on being mobile-first. This, ZURB partner and design lead Jonathan Smiley told me earlier today, means that ” the media queries in Foundation that determine what device sees which layout are reversed, meaning that you’re building the simple, mobile device layout first.”

Typically, developers build the mobile page first, but in this approach, he told me, you start with the mobile version and then “make the conscious decision to make the layout more complex and powerful as the devices used for the site become more full featured, have larger screens, etc.”

All of these changes obviously mean that you can’t just upgrade from version 3 to 4. ZURB has written an extensive migration guide for existing users, which should make the transition relatively painless (and you don’t have to upgrade, of course).