Foundation 6 – 10 Amazing New Features

The Sass setup process has been a bit intimidating for many users though, so the new major release will get a simplified setup process for the Sass version. This means that the Sass setup will require far fewer dependencies than before. Of course, if you prefer the vanilla CSS version, you can still opt for that.

The goal of the new Foundation 6 is to provide a flexible, and easily customizable framework that makes it possible to write clean and semantic code from the very beginning. The current version, Foundation 5 also allows quick prototyping, but we can expect further workflow optimization in the coming release.

The Coming Foundation 6

So basically we will be enabled to work in the same development environment that ZURB internally uses.

1. Streamlined Workflow

ZURB, the creator of Foundation will open their own development stack for the public, including their own static site generator, live-reload server and loads of inner optimization techniques including the integration of UnCSS for removing unused styles, and UglifyJS for JavaScript compression.

Prototype To Production

Zurb promises that we will be able to easily build as complicated grid system as we want, including more sophisticated custom rows and nested grids, and the ability of converting the default classes to semantic markup. The improved grid mixins will make the current grid creation even more intuitive, flexible and faster.

2. Simplified Setup Process for the Sass Version

Besides the regular Sass version, Foundation 6 will come with a souped up Sass version that will provide developers with powerful customization options.

Sass version of Foundation

The Foundation team had to face some constructive criticism that claimed that in most Foundation projects, about the 90% of the CSS code goes unusued. This wasn’t only true for Foundation, but also for other major CSS frameworks such as Bootstrap and TopCoat. As part of their reply, Zurb decided to significantly cut the file size of the outputted CSS by implementing a roughly 40-50% code reduction.

3. A New, Souped Up Setup Stack for Maximalists

In the future, we will be able to access the built-in initialization methods, toggle triggers and breakpoints, and make use of all the other features of Foundation’s global JavaScript.

Based on their users’ experiences, the Foundation team developed a new slogan, namely “Prototype to Production”, for Foundation 6. This means a new, streamlined workflow that will allow designers and developers to go straight from prototype to production.

Zurb Internal Development

In the redesign process the Foundation team rethought every aspect of the framework, so they also changed the way how they’ve used the Sass stylesheet language. They found that in some cases they’ve overused Sass that lead to the unnecessary overcomplication of the CSS output. With the goal of a leaner and cleaner code base in their mind, they have rationalized their Sass structure too.

4. Decreased Page Load Time

Foundation 5 allows developers to only choose the components they want to use. Foundation 6 will take this endeavour to the next level by moving the selective import feature into the _settings.scss Sass file.

Decreased Page Load Time

IMAGE: Freepik.com

This way _settings.scss will be a truly universal configuration file, as we won’t only be able to customize features such as row width or default fonts with its help, but also easily opting out of the components we don’t need. If we do so, we can achieve a further performance improvement.

5. Base Styles Acting as Wireframes

So if we want to provide our client with a fully accessible website, we don’t need to do anything else than building our design with Foundation 6. Please note that we will still need to add the appropriate ARIA rules to our HTML pages on our own, although Zurb’s coming a11y user guide will surely facilitate the learning process.

Base Styles as Wireframes

IMAGE: Freepik.com

The other part of the performance improvement endeavour is to create a base style that acts as a wireframe instead of a final design. This primarily leads to a lighter theme, but also has another big advantage. As more style rules will be moved into individual components, developers will have the chance to more easily style their design.

6. Facilitated Selective Import

One of the most awesome things about the Foundation framework is that it’s built with the Sass stylesheet language, thus it’s possible to quickly customize the default style rules to our actual needs.

Facilitated Selective Import

IMAGE: Zurb.com

It’s interesting to note that they try to distinct themselves from Bootstrap by stating "Foundation isn’t a framework that will have stylistic classes margin and padding or round and radius". (For reference see Bootstrap 4’s new Utility Classes in our previous post).

7. Leaner and Cleaner Sass

Foundation 5 currently has many JavaScript components such as cool modal dialogs, tooltips, sticky navigation bar, lightboxes, and many others that a modern website needs, but the coming major release will enable us to write our custom JavaScript plugins taking advantage of the Foundation core. It’s a huge step forward in both user-friendliness and performance.

Component Mixins

IMAGE: Zurb.com

It is still under development, but the plans are very promising. The coming features focus on 3 main areas: performance, customizability, and accessibility. Let’s take a look at 10 of these features now.

Hopefully this means that sites based on Foundation will have less of a similar, standardized look, and designers will have more space to experiment with beautiful and unique solutions that will refute recent worries about a boring-looking web.

8. Improved Grid Mixins

After returning to their desks, they aggregated the needs and wishes of their users, and embarked on planning the new major release of the framework: Foundation 6.

Improved Grid Mixins

IMAGE: Foundation.zurb.com

If you love mixins, don’t worry, every component will still have them, it’s just that they will be redesigned to be more efficient and useful than they currently are.

9. Seamless Integration of Custom JavaScript Plugins

In Foundation 6 we can expect decreased nesting and specificity, streamlined media queries (they merged repetitive code), and scaled back component mixins. The latter means that there will be less component mixins, and the remaining ones will have fewer parameters, which will lead to a simpler, and more logical code

Foundation's Clearing Plugin

IMAGE: Foundation.zurb.com

While cutting back component mixins, Foundation 6 will come with enhanced grid mixins that will allow us to create a more customized grid.

10. Full Accessibility

Developers of the Foundation front-end framework haven’t just sat on their laurels while the Bootstrap team have been working on their impressive new major release. Last year they went on an awesome World Tour to share their knowledge with their users and ask them about how they were using Foundation in their real-life work.

Full Accessibility

IMAGE: US Dept of Labor

Probably the most amazing feature of the new Foundation 6 is that it will be fully accessible. Every component and code snippet will come with the appropriate WAI-ARIA attributes and landmark roles. Moreover developers will even be provided with a user guide about how to use the a11y web standards.


Leave a Reply