Everything designers need to know about Foundation 6

Default avatar.
November 17, 2015
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
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.

Read Next

3 Essential Design Trends, December 2023

While we love the holidays, too much of a seasonal theme can get overwhelming. Thankfully, these design trends strike a…

10 Easy Ways to Make Money as a Web Designer

When you’re a web designer, the logical way to make money is designing websites; you can apply for a job at an agency,…

The 10 Most Hated Fonts of All Time

Remember when Comic Sans wasn’t the butt of the jokes? Long for the days when we actually enjoyed using the Impact…

15 Best New Fonts, November 2023

2023 is almost over, and the new fonts are still coming thick and fast. This month, we’ve found some awesome variable…

Old School Web Techniques Best Forgotten

When the web first entered the public consciousness back in the 90s, it was primarily text-based with minimal design…

20 Best New Websites, November 2023

As the nights draw in for the Northern hemisphere, what better way to brighten your day than by soaking up some design…

30 Amazing Chrome Extensions for Designers and Developers

Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…

Exciting New Tools for Designers, November 2023

We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…

The Dangers of Doomscrolling for Designers and How to Break Free

As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…

From Image Adjustments to AI: Photoshop Through the Years

Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…

3 Essential Design Trends, November 2023

In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…

30 Obsolete Technologies that will Perplex Post-2000s Kids

Remember the screech of dial-up internet? Hold fond memories of arcade machines? In this list, we’re condensing down 30…