Foundation for Sites 6 has been designed to get your project from prototype to production more efficiently than ever before! It includes a wide range of modular and flexible components that are easily styled. These versatile and lightweight building blocks make it easy to bring your ideas to life.
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.
Share Responsive Prototypes
Design the Code
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 using Notable Code.
Flexible Navigation Patterns
Customizable and Modular Navigation
We’ve created a menu system that is completely customizable and modular. The new Menu component is a huge leap forward because it combines several components, saves many lines of code, and makes a modular navigation you can use on most every project.
Modular JavaScript Utilities
Create Your Own JS Plugins
We reduced the amount of code in our JS plugins significantly by making each plugin smaller and creating more shared utility libraries. The utility libraries are publicly accessible so you can make your own amazing plugins.
Fewer Base Styles
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.
Motion UI
Easily Create Custom Animations and Transitions
Motion UI is our Sass based animation library that will help you add meaningful motion to your websites. This Sass library includes more than two dozen built-in transition and animation classes. It's very customizable and super easy to create your own with the Sass mixins.
Building Blocks & New Templates
A Growing Library of Resources.
We made some shiny new templates to kick off your next site or get some layout ideas. Pop these pre-made Building Blocks into your projects and save yourself time and resources.
Quick Project Starts
Spin Up Projects Faster Than Ever Before
Our new command line tool (CLI) lets you set up blank Foundation for Sites, Apps, or Emails projects with fewer dependencies than before. You can also install through NPM, Bower, Meteor, or Composer.
Optional Flexbox Grid
A Slick New Grid
For users who can embrace the newest of technology, Foundation comes with an optional Flexbox based grid. It’s the same grid you know and love, but with even better source ordering and alignment options.
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. Four column grid inside a five column grid inside a twelve? Go for it!
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 compiles your Sass, gives you Handlebars templating, UglifyJS, UnCSS, and image compression.
Responsive Through & Through
We were the very first responsive framework and have been a friend to designers and developers around the world.
Semantic
Foundation can be used with completely semantic markup. Write clean code without sacrificing any utility or convenience.
Responsive
Foundation was the first responsive framework, and it permeates every aspect of the framework. Build for every device with ease.
Customizable
Foundation was built to be easily restyled. You can even customize the framework on download.
Faster
From the underlying code, to plugins, to everything around Foundation, we’ve built it to be faster than ever before.
Rails friendly
You can use Foundation with any back end, but it’s especially well-tuned for Rails implementations.
Readable
Foundation is written with humans in mind, and is easy to read even if you don’t know much code.
Mobile First
Foundation is built with small devices as a priority, and goes up from there.
Accessible
Foundation 6 is 508 compliant and more accessible than any previous version.
Sass
The premier CSS preprocessor is at the heart of Foundation.
Rapid prototyping
Foundation allows you to swiftly prototype your ideas so you can start testing sooner than later.
RTL Feature
Foundation supports right-to-left languages to help designers around the world design great products faster