In the last 12 months, ZURB has been busy at work on the latest and greatest iteration of its remarkable Foundation Framework. Foundation 6 is the recipient of not just a code restructuring or an update for the sake of increasing the version number—it’s actually a major overhaul of the entire Foundation Framework based on feedback ZURB has gathered from Foundation users.
As a result of this intense listening, ZURB has implemented a new philosophy that’s more holistic than any Foundation version of the past, according to a company blog post. It’s based on seamlessly going from prototyping to production.
In Foundation 6, prototyping ought to let designers:
- easily get started with few dependencies and the tools they need for modern website building;
- quickly come up with a proof of concept in code that features reader-friendly presentational classes;
- receive access to a base style that’s low-key;
- get a typical range of plugins that’s easily configurable without having to rely on JavaScript.
In Foundation 6, production ought to let designers:
- efficiently streamline code by utilizing Sass mixins for semantic classes;
- pare down file sizes by being able to just important the components they used;
- match their custom designs without having to override any code or alter lots of variables;
- write custom JS plugins that build off of breakpoints as well as events;
- write sites that are thoroughly accessible;
- learn best practices during the process.
Simplifications and improvements
Foundation 6 simplifies the setup process for ZURB’s Sass version, so users can now obtain the CLI established with fewer dependencies than in the past. As a result, errors are dealt with more smartly; this allows users who run into problems to find the solution more efficiently.
In addition to Foundation’s normal Sass version, this new release features a much-improved stack that has a static site generator, a live reload server, and numerous approaches to better optimize designers’ code with UglifyJS and UNCSS.
Lighter theme and file sizes
ZURB discovered that many users had worries about pages being possibly too heavy to load. For context, consider this: According to a case study, 90% of the CSS goes unused in a single page of a sample project created with either Foundation or Bootstrap. That’s quite a cause for concern.
ZURB agreed with the feedback of concern that it received over this issue and was determined to do better. As such, the company approached this problem in two ways:
- styling the already minimalist framework even less from the get go;
- providing designers with simpler tools so they can strip the files on their own.
ZURB’s philosophy in this regard has always been to be conservative with any added styles to the framework. Its objective has been for the base styles to act like wireframes instead of the final designs. For Foundation 6, ZURB has only intensified its efforts in this aim, pulling an additional quantity of styles from components, thereby letting designers more easily style them with their production work. Designers can use variables in the Sass to update the already available styles.
Foundation 6’s file size has been pared down, too. Plans call for a code decrease of up to 50%; the company’s confident it can reach that by being more selective on what receives a variable and what gets a presentational class. In the end, the latest version is a framework that won’t have stylistic class margins and paddings.
Because of this all-around lightness, it’s that much easier for designers to move from prototype code to production-ready code.
Production
Foundation 6 emphasizes the smooth transition from prototyping to production. ZURB improved its grid mixins to let designers create custom rows with any quantity of columns. Designers will also be able to utilize mixins for virtually every component, as well as to rename classes to their own.
In practical terms, developers now have the power to convert presentational classes from just prototypes to semantic markups while not being required to import said classes into their final code. While this feature has always been a welcome part of Foundation, ZURB is making this more potent this time around.
The new version’s JS components are going to cover all of your bases for production-ready code though the custom components designers will write should also take advantage of Foundation’s strengths. As a result, much is being done to give them access to ZURB’s Foundation initialization methods, new toggle triggers, and breakpoints.
User-friendliness is the endgame
ZURB’s goal is to make Foundation 6 as user-friendly as can be. That’s why the company’s pushing these changes to help designers move from prototyping all the way to production seamlessly. In the end, its philosophy is that the Internet is for everyone, and its newest Foundation version is trying to live up to that.
