Foundation 6 Is Here!

wrote this on in . 1407 reactions

Foundation 6 Illustration

The yeti has landed. Foundation 6 is finally here! It's been a long but incredibly rewarding journey, and we're absolutely thrilled to share with you the best version of Foundation yet. Faster, lighter, more versatile, more flexible and more powerful than ever before to get your projects from Prototype to Production.

What's new

Code Reduction Illustration

50% Code Reduction - Half the Size of Foundation 5
Total filesize of every component and class now weighs in at 60KB CSS & 84KB JS, with plenty of room to make them even smaller when selectively removing unused components.

Accessibility Illustration

A11y Friendly - The Base for Fully Accessible Sites
All code snippets come with ARIA attributes and roles along with instructions on how to properly use these components. This helps ensure that every website built on Foundation 6 can be used anywhere, on any device, by anyone.

Fewer Style Overrides Illustration

Fewer Style Overrides - The Styles You Need. None That You Don't
The base styles act as a coded wireframe rather than a final design. Simpler CSS styles allow you to more easily modify them to fit your brand.

Customizable Sass Grids Illustration

Customizable Sass Grid - Any Combination of Columns You Need
The Sass grid mixins have been made smartly to give you even more flexibility to customize the grids with any number of columns.

ZURB Development Stack Image

ZURB Development Stack - Prototype With the Tools ZURB Uses
Use the same template that ZURB uses on all our client projects. This starter template is a souped up stack complete with a custom static site generator to help flatten files into single HTML documents. It gives you 'Handlebars' templating, UglifyJS, UnCSS, and image compression and Sass as well.

Motion UI Illustration

Motion UI - Easily Create Animations and Transitions
This Sass library includes more than two dozen built-in transition and animation classes.

  • Flexible Navigation patterns - Customizable and Modular Navigation
    There's a new menu system that is completely customizable and modular.

  • Modular JavaScript Utilities - Create Your Own JS Plugins
    The utility libraries are publicly accessible so users can make their own amazing plugins.

  • Quick Project Starts - Spin Up Projects Faster Than Ever Before
    The new command line tool (CLI) lets users set up blank Foundation for Sites, Apps, or Emails projects with fewer dependencies than before. Users can also install through NPM, Bower, Meteor, or Composer.

  • Tons of new Building Blocks and Templates - A Growing Library of Resources
    Pop these pre-made components into your projects and save time and resources.

  • Optional Flexbox Grid - A Slick New Grid
    For users who can embrace the newest of technology, Foundation comes with an optional Flexbox based grid. It's the same grid you know on love, but with even better source ordering and alignment option.

Host and share your responsive prototypes

It's always a pain to have to leave your code, and take screenshots or create mockups when you want feedback on your project. We think there should be a way to stay in your code, upload and host your project, and get feedback on your live site quickly and easily. To solve this problem, we've added a new app to our design platform, Notable. Using Notable Code you can easily collaborate on responsive design prototypes. Stakeholders and collaborators can annotate and review your live code on any device. Just zip and upload your project and Notable takes care of the rest.

One more thing...

Yeti Launch Illustration

Wouldn't it be great if there was some magic button that started up a Foundation project for you? We think so too, so we created a brand new desktop companion app that spins up a Foundation site, app or email with one mouse click. Meet Yeti Launch. And when you're done with your prototype, you can even export directly to Notable, share it with your team, and start collecting that sweet contextual feedback. Pretty sweet, right? This is just the beginning for this awesome new tool and we've got some awesome plans for where we'll go next. This is just the beginning!

So what are you waiting for, go download Foundation 6!

Download Foundation 6
Building blocks graphic
Foundation Building Blocks: Over 100 Components to Jump Start Your Projects
Screen shot 2017 05 16 at 2.54.30 pm
The New Foundation Docs: Learn Your Way
How Design Insights Transformed Foundation Building Blocks