Tech News: Zurb Release Foundation 6 Framework

Over the last year, product design company Zurb reached out to millions of developers and designers worldwide for input and feedback regarding their much loved HTML5 framework Foundation.

Zurb undertook the ‘Zurb World Tour’ and traveled to London, Hong Kong, Sydney, Toronto and across the United States to connect with the people using the framework and find out what they needed and wanted in the next version – Introducing Foundation 6.

Along with fellow favourite Bootstrap, we develop our responsive websites in Foundation due to its flexibility, support, cross-browser comparability and its performance.

What’s new in Foundation 6

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.

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 – 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 – 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 – Easily Create Animations and Transitions
This Sass library includes more than two dozen built-in transition and animation classes.

Flexible Navigation patterns – Customisable and Modular Navigation
There’s a new menu system that is completely customisable 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.

We have started implementing Foundation 6 into our most recent websites and we can wait to see what Foundation do next!