A Quick Look at the Best New Foundation 6 Features

Foundation 6 is launching and this signifies the next big leap for one of our favorite frameworks here at Scotch.

We’ve gone over the great features of Foundation and use it in many of our own personal projects. With version 6, the team over at ZURB (with the help of the open source community) has put together an amazing framework that is chock full of great new features.

00-foundation-main

The Foundation CLI is more powerful than ever and get you up and running with:

05-zurb-foundation-sites-emails-apps

We’ll dive into the CLI and each specific project more in follow-up articles, but for now let’s look at the great features of Foundation 6.

Main Goals

03-space-yeti

In the article, Foundation 6, Prototype to Production, the ZURB team detailed their main goals for the new version.

Prototyping in Foundation 6 should…

  • get me easily up and running with minimal dependencies, but giving me the tools that modern websites need.
  • be able to rapidly produce a proof of concept in code with easily readable presentational classes.
  • have a base style that is as un-opinionated as the wireframes we’re replacing them with.
  • Should give me a common range of plugins that can be easily configured without writing Javascript.

Production in Foundation 6 should…

  • be able to easily streamline code by using Sass mixins to create semantic classes.
  • let me quickly pair down the already streamlined file size by selectively importing only the components I used.
  • be styled to match my custom designs without the need to overide code or change tons of variables.
  • let me write custom JS plugins that build off the Foundation JS utilities like breakpoints and events.
  • let me write a website that’s fully accessible and also teach me best practices as I use it.

Cleaner and Leaner Sass

There has been a lot of rethinking the Sass parts of Foundation in order to make it easier to extend and use in the long run. For example, there is less specificity when declaring nested CSS rules.

01-cleaner-leaner-sass

Component mixins and simple things like Sass loops have been looked at to see if they can be streamlined.

02-cleaner-leaner-sass-2

For more info, read: Foundation 6: Leaner, Meaner and Cleaner Sass

Prototype to Production

Prototype to Production is a really big theme here and it can be seen in every part of Foundation 6, from starting your project and how modular you can be, to using Sass and the lighter file sizes. Everything is built to get you up and running with your projects as quickly as possible.

With the ZURB team not only building Foundation, but using Foundation for all the client sites that they do, they have been able to narrow down the changes they want to see as well as the feedback that’s been provided to them by the community.

Let’s get to the main features:

1. Streamlined and Half the File Size

The total size of every component and every class in Foundation 6 now weighs in at 60KB for CSS and 84KB for JS. Add in the fact that it’s incredibly easy to remove components that you won’t need in your project and we’re looking at a very lean Foundation.

2. A11y Friendly

04-a11y-friendly-foundation-6

A11y is the basis for fully accessible sites. Accessibility is sometimes one of the last things developers think about when crafting their websites and working with Foundation 6 ensures that you won’t forget them.

Per the A11y Project website: Blind and visually impaired make up 285,000,000 people according to the World Health Organization (June 2012) with 39,000,000 categorized as legally blind and the remaining 246,000,000 visually impaired. Deaf and hearing impaired make up 275,000,000 (2004) in the moderate-to-profound hearing impairment category.

Accessibility is an important necessity for websites. All code snippets come with attributes and roles along with instructions on how/why these things need to be used.

This helps ensure that every website built on Foundation 6 will be used anywhere, on any device, by anyone.

3. Styled for Simplicity

Only bring in the styles you need, none that you don’t. A big goal was for the base styles to act as a coded wireframe more than a final design. Sometimes a designer/developer can feel they are fighting a framework by having to undo styles here and there to get their site to look how they want.

05-styled-for-simplicity-css

The ZURB team simplified the CSS of components so users can more easily style them to fit their brand.

4. More Flexible Sass

Create the grid you need for your content. Sass mixins have become more customizable and any sort of grid you can come up with is creatable.

Want to use a four column grid inside a five column grid inside a twelve column grid inside a four column… alright you get the picture. It’s gridception.

5. ZURB Starter Templates

Get off the ground quickly with your projects using the starter templates provided by ZURB. Use the Foundation CLI to spin up your projects from the command line.

You’ll instantly get access to the same starter template that ZURB uses on their own client projects. The starter template is a souped up stack complete with a custom static site generator named Panini to help flatten files into single HTML documents. It also gives you handlebar templating, UglifyJS to minify JS, UnCSS to remove unused CSS rules, image compression, and more.

6. Malleable Navigation Patterns

The new menu system in Foundation 6 is very customizable and modular. In Foundation 5, there were eight types of navigation.

  • Off-canvas
  • Top Bar
  • Icon Bar
  • Side Nav
  • Magellan Sticky Nav
  • Sub Nav
  • Breadcrumbs
  • Pagination

The new Menu component is a huge leap forward because ZURB was able to combine several components, save many lines of code, and make a modular navigation system that can be used on virtually every project.

This helps with using the framework since it equates to less components to remember and faster developing.

7. Base Theme Refresh

In addition to reducing the file size by over half and simplifying components, the base theme for Foundation 6 has gotten a refresh.

08-zurb-style-guide

Foundation 6 puts an emphasis on letting you design your own site and not adhere to the framework look. Styles are easily overridden so that your project/site can take on an identity of its own with minimal effort.

8. Easy to Get Started

Foundation for Sites 6 is easy to get started with by using Yeti Launch. It makes it dead simple to spin up Sass projects. Command line power user? The new CLI also lets you install Foundation for Sites, Foundation for Apps and Foundation for Emails with fewer dependencies than before.

You can also install through npm, Bower, Meteor, and Composer.

Conclusion

This is just the tip of the iceberg. With the release of Foundation 6, we will be taking a deep dive into its features, designs, templates, components, and more with many code samples and examples to dig your teeth into.

Until then, be sure to check out Foundation 6 for yourself as the team at ZURB has put together a great release with many features that you could find useful in your next project.

Chris Sevilleja

Co-founder of Scotch.io. Slapping the keyboard until something good happens.