Advanced open-source framework takes your projects from prototype to production-level code.
Product design company ZURB has this morning released the latest iteration of its advanced front-end framework, Foundation 6.
Powerful and flexible enough to get your projects from prototype to production level code, ZURB claims Foundation 6 is the most advanced front-end framework in the world.
"Foundation was the first open-source framework to be responsive, the first to be mobile first, and the first to include Sass partials, "says ZYRB's Daniel Codella.
Foundation 6 launches today
"With our latest version, we set out for another first: the first open-source framework that is Powerful and flexible enough to get your projects from prototype to production level code."
You'll find an in-depth tutorial on Foundation 6 inside net magazine issue 276, on sale 29 December. Subscribe to net now to guarantee your copy and save up to 43 per cent.
Here are a few of the new features in Foundation 6...
01. 50% code reduction
Foundation 6 is 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.
Get top Black Friday deals sent straight to your inbox: Sign up now!
We curate the best offers on creative kit and give our expert recommendations to save you time this Black Friday. Upgrade your setup for less with Creative Bloq.
02. A11y friendly
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 is full accessible and can be used anywhere, on any device, by anyone.
03. Fewer style overrides
The base styles act as a coded wireframe rather than a final design. Simpler CSS styles enable you to more easily modify them to fit your brand. You get the styles you need; none that you don't .
04. Customisable Sass grid
The Sass grid mixins have been made smartly to give you even more flexibility to customise the grids with any number of columns.
05. ZURB development stack
Use the same template that we use at ZURB 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.
06. Easily create animations and transitions
This Sass library includes more than two dozen built-in transition and animation classes. New desktop companion app Foundation for Sites 6 comes with a new desktop 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.
07. Collaborate on responsive design prototypes
Stakeholders and collaborators can annotate and review coded web pages on any device, so you can upload your responsive design web pages to get contextual feedback on any breakpoint. Take your Foundation projects from prototype to production with Notable.
08. Flexible Navigation patterns
There's a new menu system that's completely customisable and modular.
09. Create your own JS plugins
Modular JavaScript Utilities: the utility libraries are publicly accessible so users can make their own amazing JS plugins.
10. 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.
11. A growing library of resources
There are tonnes of new building blocks and templates. Pop these pre-made components into your projects and save time and resources.
Foundation 6 is aimed at designers and developers of all skill levels
Why you need Foundation 6
Open source responsive frameworks – sets of CSS/HTML/JS and design patterns that you can build on – have exploded in popularity over the last few years, and it's easy to see why.
They save immense amounts of time, ensure your best practices are being used and make it easy to create stunning responsive websites. But those benefits have also come with two big caveats: bloated code and overly styled components that are hard to make your own.
ZURB developed the Foundation front-end framework to speed up its client work, and give its designers a powerful collection of resources to build from.
Foundation 6 gives designers and developers of all skill levels a powerful set of tools and resources to move their projects forward, from prototype to production. Head over to the ZURB website to find out more.
