Foundation 6: Prototype to Production

The team at ZURB traveled the globe, literally, before beginning development on Foundation 6 to find out what designers and developers needed and wanted in a framework. From New York to Hong Kong to Ontario and Sydney people spoke about their love of rapidly prototyping with Foundation and their interest in how ZURB used it for production sites.

ZURB followed up with hundreds of phone calls, conversations at meetups, and emails to dig even deeper. The result? A new mantra that guided all development decisions, Prototype To Production. Simply put, Foundation 6 had to be both quick and easy to create a working prototype, but also powerful and flexible enough for production level code.

foundation-screenshot

One of the most striking differences between Foundation 6 and the previous version is filesize. Foundation 6’s CSS is half the size of v5. Yes, you read that right, a full 50% reduction in code. This was mainly accomplished through managing the output of CSS from Sass.

It’s also been designed with a11y (accessibility) in mind. Every component has been recoded to adhere to accessibility standards and 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 can be used anywhere, on any device, by absolutely anyone.

Many designers complain about “fighting with their frameworks” when it comes to styling. While Foundation has always been very careful about the styles that are added to the framework, the team doubled down on that effort and pulled more and more styles from components. The base styles act as a wireframe rather than a final design so designers and developers can more easily style them to fit the brand of their production work.

Foundation 6 offers not only the CSS versions and the regular Sass versions of Foundation, but a souped up stack complete with a custom static site generator named Panini to help flatten files into single HTML documents. Devs can spin up a browser sync server and there are tons of ways to better optimise code with UNCSS and UglifyJS. This is the same stack ZURB uses to build for their client work and are making it available for the first time to the Foundation community.

Lastly, many Foundation users focused on the amount of dependencies and requested faster ways to spin up a project. Foundation 6 comes with a brand new desktop companion app, Yeti Launch, that can get Sites, Apps, or Email projects spun up in one click.

A few of Foundation 6’s key innovations:

  • 50% Code Reduction – Half the size of Foundation 5.
    Total filesize of every component and class now weighs in at 60KB CSS & 84KB JS, with plenty of room to make them even smaller when selectively removing unused components.
  • A11y Friendly – The Base for Fully Accessible Sites.
    All code snippets come with ARIA attributes and roles along with instructions on how to properly use these components. This helps ensure that every website built on Foundation 6 can be used anywhere, on any device, by anyone.
  • Fewer Style Overrides – The Styles You Need. None That You Don’t.
    The base styles act as a coded wireframe rather than a final design. Simpler CSS styles allow you to more easily modify them to fit your brand.
  • Customizable Sass Grid – Any combination of columns you need.
    The Sass grid mixins have been made smartly to give you even more flexibility to customize the grids with any number of columns.
  • ZURB Development Stack – Prototype with the tools ZURB uses.
    Use the same template that ZURB uses on all our client projects. This starter template is a souped up stack complete with a custom static site generator to help flatten files into single HTML documents. It gives you “Handlebars” templating, UglifyJS, UnCSS, and image compression and Sass as well.
  • Motion UI – Easily create animations and transitions.
    This Sass library includes more than two dozen built-in transition and animation classes.
  • New Desktop Companion App – Spin up projects with a single mouse click.
    Foundation for Sites 6 comes with a new companion app, Yeti Launch that makes it dead simple to spin up Sass projects, compile them and upload them to Notable code where you can get feedback directly on the site.
  • Collaborate on responsive design prototypes – Upload your responsive design web pages to get contextual feedback on any breakpoint.
    Stakeholders and collaborators can annotate and review coded web pages on any device. Take your Foundation projects from prototype to production with Notable.
  • Flexible Navigation patterns – Customizable and Modular Navigation
    There’s a new menu system that is completely customizable and modular.
  • Modular JavaScript Utilities – Create your own JS plugins.
    The utility libraries are publicly accessible so users can make their own amazing plugins.
  • Quick Project Starts – Spin up projects faster than ever before.
    The new command line tool (CLI) lets users set up blank Foundation for Sites, Apps, or Emails projects with fewer dependencies than before. Users can also install through NPM, Bower, Meteor, or Composer.
  • Tons of new Building Blocks and Templates – A Growing Library of Resources.
    Pop these pre-made components into your projects and save time and resources.

Foundation 6 was built on the feedback of designers and developers of all skill levels around the world and it really shows. The result is a powerful and flexible framework that moves projects forward, from prototype to production.

Check Out Foundation 6 Today →

(2 Posts)

Daniel Codella

Daniel is a member of ZURB's connections team, manages the popular ZURB blog, and is a champion of Progressive Design! In addition to a passion for design and writing, Daniel is an avid traveller and musician. You can connect with Daniel on Twitter!

Comments