Foundation 4 is Here: The Smartest Foundation Yet by ZURB ZURBlog

Well, it's that time again. We're pretty excited.

After hundreds of hours of discussions, experiments, hackathons, pull requests, visual explorations and decisions, we're thrilled to announce that Foundation 4 — the largest update to the Foundation Framework yet — is available right now.

Like its predecessor, Foundation 4 wouldn't be possible without the support of the entire ZURB team and our advisors. We also need to thank all of you who submitted issues, made feature requests, wrote pull requests and just generally drove the community effort around Foundation. Your support (or in some cases, relentless pursuit of better code) is a big part of the success of Foundation.

Foundation 4 is a bit of a different animal. Ready to dive in?

Mobile First

ZURB advisor Luke Wroblewski has been beating the drum on Mobile First for a while now. And in large part because of his insights here, we've retooled Foundation from the ground up to be Mobile First. This is no hack job; we didn't just flip some media queries and call it a day. We went through the framework and rethought how grids should work, how components should work in a mobile-first paradigm, so we could be sure the solution we deliver in Foundation 4 is smart and sturdy.

Now when you use Foundation, the layout you write by default will be built for a small device — something that may not even support more complex layouts or grids or media queries. While smartphones are getting bigger each day, there's an enormous group of people out there using older devices, who want to see your site. With Foundation 4 you can let them — the basic layout construct in Foundation 4 will work all the way back to feature phones.

Foundation has always prided itself (Can a framework pride itself? Why not.) on the Grid, the responsive layout engine that now drives thousands of sites. In Foundation 4, the grid has become even more flexible and even more powerful, with built in tools for different device sizes and a new, simpler syntax that better reflects how the grid works and how it should be used.

That's just some of it — dig into Foundation 4 and see some of the extensive work we've done to make it the best implementation of a Mobile First philosophy ever. If you're used to Foundation 3, we've also written a migration guide so you can better understand the changes.

All Semantic

Frameworks up until now have had one a major Achilles' heel — they required presentational classes all over your markup. Rows, columns, tabs — all kinds of classes that dictated not just what something was, but how it looked. Well, no more. In Foundation 4, with the magic of Scss, you can now remove almost all of the presentational classes from your markup.

We've built Sass mixins and extensions for almost every component of Foundation. Now you can write whatever markup is most semantic, most representative of what your content really is. Then, simply attach Foundation components to it in your Scss. For example, you might have a main content section and a sidebar: on a large screen you could attach eight columns to the main content, and four columns to the sidebar. If you ever want to change it later you simply change your Scss, and your markup stays the same. Pretty rad, right?

Sweet New (and Speedier) Javascript

We've been building plugins for Foundation for some time now, starting with Orbit and Reveal and then adding in Joyride, Clearing and Magellan. With Foundation 4, we wanted to make sure that not only were those plugins the best they could possibly be, but also that we were setting Foundation up for even greater plugins in the future. So, we rewrote them all.

Foundation plugins should now conflict less with other libraries, work better with AJAX, be easier to turn on or off and, on top of all of that, be faster and lighter.

We're also using Zepto.js, a jQuery API compatible library. This dramatically reduces how much your users will need to load (especially on mobile devices) and provides the added benefit of using CSS for animations, taking advantage of hardware acceleration where possible. And if you need jQuery, just swap it in — everything will work just fine.

Go get it!

Foundation 4 is available right now from foundation.zurb.com, and just like Foundation 3 you can use the Sassified version to take advantage of the new semantic options or you can grab the default / custom CSS downloads. We even rewrote the customizer to be more reliable. We love you guys that much.

We're having a great time working on Foundation and making it available to all of you, but we also need your help. If you see issues or have questions please let us know through our Github page or our Twitter account.

We hope you love Foundation 4 as much as we do (or at least almost as much — we're quite fond of it) and that it'll help you make more semantic, mobile-first and responsive sites. And just like last time, we need a beer. Want to get one with us at the launch party?