: : :

Foundation for Sites 6

Get from Prototype to Production


Download Foundation 6 View Download Options

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, 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