The Yeti’s back! Foundation 6 was released today, and we’re all dead excited about the new design ethics, features and powerful tools this incarnation of ZURB’s popular framework brings us! There’s even a special “something” extra with this release, so dive into this article to get the complete lowdown.



Main Goals

Foundation 6 isn’t just a visual iteration, code restructure, or a simple change in version number. The team at ZURB sat down for this one to completely rethink the framework and to see what needed to happen to make it more awesome. Foundation 6 is about the whole process; from prototype to production.

Going from prototype to production is now a breeze!



Some of the main goals the development team had were:

Prototyping



To get you easily up and running with minimal dependencies, but give you the tools that modern websites need.

To enable you to rapidly produce a proof of concept in code, with easily readable presentational classes.

To give you a base style that makes your products as clean as the wireframes they’ll be based on.

And to give you a common range of plugins which you can easily configure without writing JavaScript.

Production

To allow you to easily streamline code by using Sass mixins to create semantic classes.

To let you quickly pare down the (already streamlined) file size by selectively importing only the components you need.

To help you style your project to match your custom designs, without the need to override code or change tons of variables.

To let you write custom JavaScript plugins which build off the Foundation JavaScript utilities, like breakpoints and events.

And to let you code a website that’s fully accessible, whilst teaching you the best practices as to how you should use it.



"For Foundation 6, we’ve cut the file size of the complete CSS file by half, by aggressively optimizing our use of Sass, and making components simpler in structure and style."

- Geoff Kimball Product Designer, ZURB

Features

So how did these goals affect our favorite framework for building awesome websites? Let’s find out! We’ll first go over some of the main features of Foundation 6 and then dive into the CSS/Sass and the JavaScript in more detail.



Easier Setup, Fewer Dependencies

The setup process of the Sass version of Foundation 6 has been improved, so you can get your projects off the ground faster. There are far fewer dependencies, and errors are handled much more intelligently so you’ll have less trouble figuring out the error in question.

Another nice extra is that ZURB is offering a souped-up stack complete with their own static site generator, live-reload server and tons of ways to better optimize your code with UNCSS and UglifyJS. It’s the same stack the guys at ZURB use for their own projects (more on this later on!).

“Foundation for Sites 6 the Movie” coming 2018. Possibly.

Lighter Theme, Smaller File Size and Better Looking



There’s been much concern about code used by frameworks (such as Bootstrap and Foundation) going unused in a project. Even as much as 90% of the CSS code goes unused, which is truly unnecessary, and a problem for performance. With this in mind, Foundation 6 has a whopping 50% code reduction to start with!

The Yeti worked out and it payed off!



ZURB approached this problem two fold with Foundation 6, by applying fewer styles from the start, and giving you the tools to strip the files as well. Now you can more easily add your own styles for the production version of your project. The styles Foundation 6 does offer can easily be updated with variables via Sass.



Also, a lot of the presentational classes have been removed so that the generated CSS stays clean. This version of Foundation doesn’t have stylistic classes like margins, paddings and round and radius. Through the familiar _settings.scss file it has now been made even easier to selectively import your modules. By selectively commenting out the components you don’t use you’ll easily remove a lot of unused CSS code.



So, with a lighter file from the get go, fewer stylistic classes, and more control over what to include and what not, you’re now ready to move your prototype into production-ready and lightweight code.

Documentation Search

The updated documentation which comes with Foundation 6, together with an AJAX powered search form, makes it easy for you to quickly find something:

The search form gives you suggestions as you type.



Just type the component or topic you’re looking for and the search form gets you the relevant topics. It’s a nice little extra that makes diving into the documentation a pleasant experience.



Top Bar Modules

The Top Bar itself has seen a big update as well. In previous versions it was great at what it was meant for, but it was a little inflexible. Not anymore! Foundation 6 introduces components for the Top Bar to make it more flexible and easy for you to add and remove certain elements for different devices such as:

Menu Bar: a stock menu component with orientation, spacing, and alignment options.

Menu Bar plugins: Dropdown menu Drilldown menu Accordion menu

A responsive menu bar plugin that allows a menu to convert from one of the above patterns to another, depending on screen size.

Top Bar: a simple wrapper to combine menus with logos, text fields, buttons, and so on.

Custom Row Layouts With Sass Mixins

In Foundation 6 ZURB have created a more flexible mixin grid which allows you to control the column count on a row. You might do something like this:



Or something like this:



Make your own column count for a specific element, or make a five column row without changing the column count for the whole project. This new feature will give you more granular control over the grid so you can make your layout fit your content better.

Orbit Slider is Back and More Robust



Foundation 6 has brought back the Orbit slider, but with a different approach this time around: it’s designed to be a wireframing tool. This version comprises only a little HTML and a little JavaScript. The code to customize it will be done inside the page markup and is much easier to carry out.

Glad to have you back old friend!



When looking for a slider in your production phase, the team at ZURB recommend using a slider such as Owl slider for example. As mentioned, the Orbit slider is purely meant as a wireframe tool.



Panini

In working with their own clients, ZURB have built a custom template to deliver projects. Including Handlebars and built on Libsass, this is the souped-up stack we touched on earlier. It’s here for you to use and to optimize your own workflow, and it goes by the name Panini:



A pre-made blueprint, ready for you to use on your next project

This Gulp-powered build system does a lot:

It compiles Sass to CSS

It combines the JavaScript into one file

It compiles HTML templates, pages, and partials into flat files

The template can also create production-ready code, adding in these extra steps:

Compressing CSS

Using UnCSS to remove unused classes from your CSS

Compressing JavaScript

Compressing images

Handlebars templates and helpers make writing dynamic code for static pages a breeze!



Flexbox Grid

New in Foundation 6 is a Flexbox powered Grid, which you can use instead of the traditional float grid. It works similarly to the standard float grid, but includes a number of useful features only possible with Flexbox, like horizontal and vertical alignment, automatic sizing and easier source ordering. We know the Flexbox Grid from Foundation for Apps and it’s awesome to see that we can now use it in Foundation for Sites too!



Motion UI

Motion UI is an animation library and was originally built and used in Foundation for Apps. Now, happily, you can use it for creating custom CSS transitions and animations in Foundation for Sites as well!



Add all different kinds of transitions and animations to your Foundation projects!



This updated version includes more robust transition options, an animation queuing system and flexible CSS patterns that can work with any Javascript animation library.

Adjusting the different transitions and animations is a matter of tampering with the Sass mixins that come with this version of Motion UI. Motion UI also includes a large number of pre-made CSS classes to get your prototypes up quickly.

<div id="panel" data-animate="slideInRight" class="slow bounceIn"></div>

The library was designed for use with the Foundation frameworks, but can be adapted to work with any framework’s animation library, such as Angular or React.



The CSS/Sass

As mentioned, the big goal with Foundation 6 was to make it easier to use and easier for you to overwrite the framework with your own production-ready code. Let’s take a look at some of the cool features Foundation 6 brings us regarding the CSS and Sass.

Create your own style guides more easily in the newest Foundation



Freedom from Breakpoints

In Foundation 5, you could change the breakpoints, but it wasn’t entirely obvious where to find them and how to go about it. Not anymore. Foundation 6 offers you one overview (a breakpoint map) in which you can easily adjust, add and remove breakpoints from the project.

Tip: do try to stay with the default breakpoints as much as possible; file size increases with additional breakpoints.

Example of the breakpoints map using the new Sass Maps feature



Breakpoint Mixins

With Foundation 5 you had to perform string interpolation to use media queries in your Sass files. Because this wasn’t really clear all of the time, and people would often have to visit the documentation to copy and paste the right code, the team at ZURB figured this could be done more easily. So now, instead of the string interpolation, you can use different @includes to include different breakpoints. Using medium for example, is for breakpoints medium and up, medium only for, well, medium only, and medium down for medium, small etc. You can even include your own pixel, em of rem breakpoints and use retina, landscape and portrait.



"We wanted to learn how people actually used Foundation, so we traveled around the world and hopped on 100’s of calls to actually watch how the community used the Framework and discussed what they needed from it. It was amazing!"

- Brandon Arnold Foundation Lead, ZURB

The JavaScript

The JavaScript has had a big overhaul as well. One way to reduce the amount of code in the JavaScript plugins of Foundation 6 was to separate them out into smaller utilities that handle events on larger plugins. And by making these utilities publicly accessible, you can now use them to build your very own plugins! So, what plugins can we find in Foundation 6? Let’s find out:

Plug and play with Foundations new helper plugins.



Universal Toggler API

Foundation 6 includes a new toggler API so people can quickly and easily make their sites more dynamic and show states. Toggler makes toggling elements and adding classes a breeze. It’s great for building fast, and requires no JavaScript knowledge.

Toggle classes with a data-attribute. For example:

ImNotTouchingYou

This is a public function for determining collisions with the edge of a container. This edge detection will keep tooltips, dropdowns and more in the viewport or container of your choice.

GetYoDigits

A random number generator. You can use this for adding A11Y “aria” attributes that require IDs, for example.

IFeelYou

This is a function to add an event listener to window if applied, firing a non-bubbling event to individual plugin elements with the [data-yeti-box='idOfElement'] to close. If another element of the same plugin type opens, i.e. if Tooltip B opens and Tooltip A is currently open, close Tooltip A before opening B.

ISeeYou

Here we’re given a public function to add an onscroll event listener to window . The markup is as follows: [data-scroll='idOfElement']

IHearYou

A function to add a resize event listener to window .

Build Your Own!

I made this!



Almost all of the JavaScript has been built with separate utilities that handle common functions like the examples above. This allows the plugins to be smaller, and with them you can now easily create your own!

Bonus!

As a little extra, ZURB has also released a brand new Desktop Companion App! With it you can spin up projects with just a single mouse click. Get up and running faster than ever before with: Yeti Launch. Nice!



Spin up projects with a single mouse click!



Conclusion

Foundation for Sites 6 has seen a really big overhaul, reflecting the way ZURB build their own accessible websites. Sharing their knowledge and experience makes it easy for other developers and designers to prototype, and get to production quickly.



The fastest yeti yet

To sum up, what do we get with Foundation 6?

50% code reduction



Easier to overwrite

JS plugins and freedom to build your own



Flexbox grid

Motion UI

Orbit Slider



IE9+ support and Edge in the future



Accessibility from the ground up

Faster prototyping to production

And plenty more..



Handy Resources

Foundation on Envato Market

Over 125 themes on Envato Market are compatible with Foundation 5–will you be first to sell something built on Foundation 6?!

Related Tutorials, Articles and Courses on Foundation

