Foundation 6 – 10 Amazing New Features

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.

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.

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.

1. Streamlined Workflow

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.

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.

2. Simplified Setup Process for the Sass Version

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.

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.

3. A New, Souped Up Setup Stack for Maximalists

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

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.

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

4. Decreased Page Load Time

The Foundation team had to face some constructive criticism that claimed that in most Foundation projects, about 90% of the CSS code goes unused. 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.

It’s interesting to note that they try to distinguish 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).

5. Base Styles Acting as Wireframes

The other part of the performance improvement endeavor 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.

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.

6. Facilitated Selective Import

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

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 further performance improvement.

7. Leaner and Cleaner Sass

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 codebase in their mind, they have rationalized their Sass structure too.

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 fewer component mixins, and the remaining ones will have fewer parameters, which will lead to a simpler, and more logical code

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.

8. Improved Grid Mixins

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

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

9. Seamless Integration of Custom JavaScript Plugins

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.

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.

10. Full Accessibility

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.

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.