When Foundation 6.0 was launched last November, designers and developers were introduced to new tools built from the latest web technology that enabled them to build responsive sites faster and easier than ever before. Whether it's the ZURB Stack, which uses the latest in front-end tools, or the flexbox grid, which puts Foundation on the cutting edge of web standards, Foundation continues to be the most forward thinking front-end framework.
Today, the Foundation team is excited to announce another leap forward, the release of Foundation for Sites 6.2! This latest update includes an ES2015 codebase, more flexbox integration, support for newer HTML elements, and loads of other optimizations that push Foundation further into the future! As the world's most advanced front-end framework, Foundation is always pushing the web forward, taking advantage of the latest web technologies. This new update upgrades our JavaScript codebase and CSS component library to keep us and our users well ahead of the pack.
What's New?
An ES2015 codebase! The spec for ECMAScript 2015, the latest version of JavaScript, was completed last summer, making it the first new version of JavaScript in over five years. With ES2015, we get an easier way to write classes, simplified function and object syntax, template and multi-line strings, and more. For Foundation 6.2, we upgraded our entire JavaScript codebase to ES2015, keeping our work on the cutting edge of web standards.
Even the latest versions of modern browsers still haven't yet implemented every feature of the new JavaScript. However, thanks to Babel, we can write modern JavaScript today, and have it converted into a form that current browsers still understand. That's right: you can write bleeding-edge JavaScript and still support IE9!
The way you use Foundation plugins hasn't changed at all, but users of the ZURB Template will need to make some quick changes to compile the new codebase'we cover this in the 6.2 Upgrade Guide. We'll also be collecting feedback on the upgrade process in the Foundation Forum, so be sure to join the rest of the Foundation community in the conversation!
More Flexbox components! With Foundation 6.0, we introduced an optional flexbox grid, for developers building sites with more cutting-edge browser support. In 6.2, we've now added an optional flexbox mode which supercharges existing components with flexbox, replacing old hacks like floats and table cell display.
If you've never used flexbox in your CSS before, you're in for a treat. Flexbox solves many problems with web layouts that have plagued web developers for nearly fifteen years. With the display: flex property, it's now much, much easier to automatically size elements based on their contents, or how many items are in a row. Both horizontal and vertical alignment are also dead simple, no more weird transform hacks to center things! And there's even more: automatic right-to-left support, built-in source ordering, and vertical orientation.
If you're just getting started with flexbox, the article A Complete Guide to Flexbox on CSS Tricks is a great place to start.
More native elements! We borrowed the styles for <input type='range'>, <progress>, and <meter> from Foundation for Apps and brought them into Foundation for Sites. These are newer HTML elements which can replace our built-in components for range sliders and progress bars, if you have the browser support.
Community Shoutouts
We couldn't have turned around Foundation 6.2 as quickly as we did without hard work of our awesome community. Nearly two dozen community members contributed code to this release. We'd like to call out a few folks in particular:
- Colin Marshall helped us upgrade our entire JavaScript codebase to ES2015. (Pull requests #7762, #8018, and #8086)
- Andy Cochran reworked button groups to fix multiple issues with responsive stacking and borders. (Pull request #7933)
- Marius Olbertz added right-to-left language support to the Slider plugin. (Pull request #7684)
We also have some great discussions happening over on the Foundation Forum! Over the past few weeks, we've been collecting feedback on the functionality of Reveal and the Responsive Menu patterns. We took some of the feedback from those discussions and put together some bug fixes for each in 6.2.
- We fixed a number of issues with dropdown menus, including positioning and arrow bugs. (Pull request #8200)
- We reworked Reveal's positioning logic, fixing over a dozen open issues in one fell swoop. (Commit 884b10)
Looking Ahead
Foundation 6.2 introduces some significant changes to the codebase that make your workflow even easier and keep you on the bleeding edge of the web. Many of these changes are designed to bring the code more in alignment with the next version of Foundation for Apps 2, which we'll have more to say about soon.
We're also looking to invest in the awesome Foundation community in a big way. We'll soon be publishing a Contributions Guide that details how you can get involved with the Foundation ecosystem.
In the meantime, dive Foundation for Sites 6.2 by reviewing the changelog and the upgrade guide. We're collecting feedback on the upgrade process in the Foundation Forum. We're anxious to hear what you think of Foundation's latest leap forward!