Over the last year we've been re-creating, re-coding and re-thinking the Foundation Framework. A new Foundation is fast approaching and it's going to be a whole lot more than just a visual iteration, code restructure or a simple change in version number.
Since ZURB uses Foundation every day for our Studios client work and design tools, we've been using our experience from the now hundreds of websites we've built on Foundation and we're making a lot of decisions about what a framework's place is for a modern web developer/designer. We've had tons of phone calls, conversations at meetups, and even sent ZURBians on the ZURB World Tour to hear how people were using Foundation. From these hundreds of conversations, we have created the driving force behind every decision for this framework update and developed a new mantra we're calling, Prototype To Production.
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.
These ideas have helped us shape both Foundation and our internal process. Here's how they've affected the framework for the better.
Web Stacks on Stacks on Stacks
As a Studio, ZURB uses Foundation to builds tons of sites and apps for clients every year, which means we rely on it for our business day in and day out. Foundation has to function and be flexible because clients are depending on it to deliver. Through this we've found the joys in using the product we've been building for nearly 4 years, but we also watch our designers struggle with real world problems.
With Foundation 6 we're simplifying the setup process for our Sass version to allow users to get our CLI set up with far fewer dependencies than before. We'll be handling errors much more intelligently, so that if users do run in to problems they'll much more easily be guided towards a correct answer. Finally we'll be offering not only the regular Sass version of Foundation, but a souped up stack complete with our own static site generator, live-reload server and tons of ways to better optimise your code with UNCSS and UglifyJS. This is the same stack we build at ZURB and are excited to use our experience to modify your process.
A Lighter Theme and File size
There's a lot of concern that pages might be too heavy to load. Let's put that into perspective as to why pages are weighed down. Addy Osmani showed that in a single page from a sample project built using Bootstrap or Foundation, 90% of their CSS goes unused. That's truly a bummer to hear and to quote our favorite late night tv hosts, 'There's got to be a better way'. We're approaching this problem two fold with Foundation 6 by styling the already minimal framework less from the start and giving users easier tools to strip files themselves.
Foundation has always been very careful about the styles we add to the framework and our goal with the base styles are to act as a wireframe rather than a final design. We're doubling down on that effort and pulling more and more styles from components, so you can more easily style them with your production work. The styles we do offer can be updated with variables in the Sass, but we're standing firm that not every selector with every declaration gets a variable. We hope this means you'll be able to write your own css and not just be hunting down and modifying theme variables for every style.
We've also cut down the outputted file size of Foundation. We're shooting for a 40-50% code reduction and so far are well on our way to hitting that. We're being much more selective on what gets a variable and what gets a presentational class, so we can be sure the outputted CSS stays clean. This means Foundation isn't a framework that will have stylistic classes margin and padding or round and radius.
Foundation 5 makes it pretty easy to selectively import, but we're making it even easier by moving that functionality to the _settings.scss file you use to change all of Foundation's variables. We've found the average project can remove 30-40% of their CSS just by commenting out the components they didn't use, so we hope by adding more emphasis, users will take that opportunity. Lastly, we're adding some optimization options to our Gulp build that have the potential to drastically shrink your file size. UnCSS will be a great tool for static sites to minimize their footprint to only the classes they used and we've ensured that all dynamically created JS classes get included regardless.
With a lighter file from the get go, you're ready to move your prototype code into awesome production ready code.
Taking it to Production
We know the best part of using a framework to prototype your designs is that after your rounds of iteration and content updates you're halfway to production ready code. Using our own experiences with Foundation over the last 3+ years we've added a lot of great ways to optimize this process and have taken those lessons into the Framework so all you amazing people can benefit. Thousands of amazing brands use Foundation in their production stack.
We've added to our already strong grid mixins to allow you to build custom rows with any number of columns you need. If your design needs a four column grid inside a five column grid inside a twelve, then our mixins will make that super quick and easy. You'll still have the ability to use our mixins for most every component and rename our classes to your own. This means developers can convert presentational classes from prototypes to semantic markup and not need to import those classes into their final code. This has always been a great part about Foundation with Sass, but we're taking care to make it even more powerful.
Foundation's JS components will cover tons of your needs for production ready code, but we also want to make sure that the custom components you'll write can take advantage of the Foundation core. A main goal for Foundation 6 Javascript is to give you access to our Foundation initialization methods, our new toggle triggers, and our breakpoints. Foundation 6 will help you build on top of our global js to get plugins working seamlessly together and on any device.
The Web is for Everyone
The Foundation team made a big push for a more a11y friendly framework in Foundation 5.5 and we're continuing that work by recording every component with accessibility in the forefront of our minds. Every Foundation component uses accessibility standards and we've been working with a killer a11y advocate to make sure we're hitting the mark. All code snippets will come with attributes and roles along with instructions on how/why these things need to be used. Let's make sure that every website we push out will be able to be seen anywhere, on any device, by anyone.
The Foundation team is truly excited to push out the next Foundation Framework and can't wait to get feedback, issues and PRs from our amazing community. We'll be pushing out a private release within the month and continuing to make iterations based on what we hear from the community. In the mean time, we'll continue working on Foundation Sites 6, Foundation for Apps and the new Foundation for Email.
