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.

As you’ll see for yourself when you finally get it installed — simple enough on OSX or Linux, but on Windows, Node can be finicky — Foundation 6 can only be installed via package manager these days. I feel like I’m getting old, dreaming of the good old days when CSS frameworks came in .zip files, and not from a terminal command.

Still, I wasn’t lying when I said that Foundation 6 is awesome. Well, I should say “Foundation for Sites”, because Foundation isn’t just one framework anymore. Besides Foundation for apps, Zurb has also been busy making a few tools to speed up development.

[pullquote]This release has been all about performance…you can build sites faster, those sites will download faster, and the JavaScript will run faster.[/pullquote]

First, there’s the Foundation CLI, which can install any version of Foundation for you, complete with starter projects. The pre-compiled CSS in Foundation for Sites will be available to download separately upon final release. For now, however, the CLI is the way to get it, and stay up-to-date with any changes prior to final release.

Then there’s Panini, a static page compiler with Handlebars templating and several other features to help you build static prototypes and/or sites fast. It compiles the Sass, puts all JavaScript into one file, it can compress all your code, and more.

Foundation 6 features

Now, don’t get the idea that this version of Foundation is any less feature-filled — it’s still got everything you need and more — but it should be noted that some elements which were better suited to apps than sites have been removed. Those elements are now a part of Foundation for Apps.

The rest of the work in this version was all about getting rid of redundant code, and streamlining everything that was left.

For example, instead of creating three different menu components for three different menu designs, there’s just one menu component, with several variations. For the person writing the HTML, there’s little difference: add a class, and you have a menu; change a few classes, and you have a menu that looks entirely different.

In fact, for all the differences, a lot of the classes and markup are going to look very familiar, if not the same. It’s all built on Sass so you can customize it as always.

This release has been all about performance. Once you learn how, you can build sites faster, those sites will download faster, and the JavaScript will run faster. Foundation in now about half as heavy as it was in terms of file size. Half.

New 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.

Flex grid

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

Navigation

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.

Badge

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.

Sticky

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.

Toggler

In case dropdowns, accordions, drilldowns, tooltips, and modals aren’t enough for you, here’s a generic way to make stuff appear or disappear. It’s a simple JavaScript-based toggle event that can be applied to basically anything.

I imagine it’s for those times when none of the other components fit the purpose, or would be overkill. It integrates the Motion UI library, so you can animate the disappearing act just about any way you like.

Media object

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
• Accordions
• Basic global styles
• Breadcrumb navigation
• Buttons
• Callouts
• Color mixins
• Dropdown menus
• Equalizer – column alignment
• Flex Video
• Forms
• Interchange responsive content
• Label
• Magellan – no longer sticky by default
• Media queries (it should be noted that the break points have changed)
• Off-canvas
• Pagination
• Progress bars
• Reveal
• Sliders
• Switches
• Tables
• Tabs
• The Grid
• Thumbnails
• Tooltip
• 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

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.