Everything designers need to know about Foundation 6
Foundation 6 is almost ready to exit beta, and it’s better than its predecessors in nearly every conceivable way: it’s more streamlined, it’s simpler, and yet somehow more sophisticated. Zurb have outdone themselves.
Foundation 6 features
Explicit support for RTL languages
Older versions supported RTL (right-to-left) languages like Arabic to an extent; but they needed some tweaking. Foundation 6 has support built right in.
The Flex grid is exactly what you think it is: it’s the Grid component re-done with Flexbox. On the one hand, this gives it a number of features and options that a regular float-based grid can’t handle. On the other hand, it’s probably not as well-supported, especially by IE. It’s a trade-off.
Typography helper classes
A couple of cool enhancements were included for website-style typography. Specifically, there are helper classes designed to make typographic layouts just a bit easier to deal with:
- Text alignment classes
- Subheader classes — applies a lighter color to any heading with the .subheader class.
- Lead paragraph styles
- Un-bulleted lists
- Statistics — applies a larger font size to important numbers
As mentioned above, all of the previous navigation components got merged into one-big flexible component. This means that all navigation types will play nicely with each other. It also means that you can choose different kinds of navigation for different screen sizes. Want drill-down navigation on a smart phone, and a horizontal bar on a desktop? Easily done with the screen-size-specific classes. Want your “Top bar” back? Just add a wrapper div around the default menu components. But though it’s simpler to use overall, it’s still loaded with features. Be sure to check out the documentation about menus and navigation.
You know those little circles or squares — usually placed on or near icons of some sort — with tiny numbers in them? Like when you have Facebook notifications? Those are called badges. You learn something new every day. Also, Foundation has them now.
Need to make something stay on the screen while the user scrolls? Want to make it stop at a certain point? Sticky is your plugin! This is also the thing to use if you want to make the Magellan menu work like it did in Foundation 5.
Well, the name sounds like it’s an element where you can embed a video or Flash object (yuck), and you could do that I guess. What it’s really meant for is displaying any media object, such as an image, alongside text information. For example, you could put a user’s avatar next to their username and their comment in a comments section. Or, you might use it to place a movie’s release date, main actors, and other meta data next to a review of the movie. Check the documentation for examples.
Features that are basically the same as before
Every feature has been updated or rewritten. However, many are functionally unchanged. Double-check the documentation to make sure you’ve got the right classes, check out some of the upgrades, and go. Here are these more-or-less-the-same features, in alphabetical order:
- Abide — form validation
- Basic global styles
- Breadcrumb navigation
- Color mixins
- Dropdown menus
- Equalizer — column alignment
- Flex Video
- Interchange responsive content
- Magellan — no longer sticky by default
- Media queries (it should be noted that the break points have changed)
- Progress bars
- The Grid
- Typography styles
- Visibility and utility classes
So is it really any good?
Yup. The renewed focus on building sites (as opposed to a framework that tries to meet the needs of both sites and apps) is refreshing, and reduced size is always a plus. Look forward to it going live very very soon.
Ezequiel Bruni is a web/UX designer, blogger, and aspiring photographer living in Mexico. When he\‘s not up to his finely-chiselled ears in wire-frames and front-end code, or ranting about the same, he indulges in beer, pizza, fantasy novels, and stand-up comedy.