Ultimate Guide To Foundation 6 For Web Development

This page may include links to our sponsors or affiliate links. Learn more.

The new Zurb Foundation library holds a treasure trove of features for web developers. The recent Foundation 6 runs smoother than v5 while adding more features and greater support for accessibility and CLI installation.

I’d like to cover the requirements for getting started with Zurb’s Foundation For Sites, along with some of the newest features. This is a perfectly suitable framework for all types of web projects, offering vast documentation and a growing online community.

Whether you’re brand new to Foundation or just want to catch up with the newest features in F6, this guide is a fantastic place to start.

foundation yeti illustration

Features & Improvements in Foundation 6

Some blogs have covered the improvements of Foundation 6 explaining how this new version is surprisingly versatile in nature.

Regular users will notice a major 40%-50% code reduction in this newer version. Since most frameworks come packaged with unused code, Foundation 6 allows developers to limit what they include in a website.

foundation 6 rocketship illustration

Zurb covered this in a recent blog post explaining how developers can modularize their sites with specific components, Sass variables, and responsive breakpoints. By selectively including components Foundation can be reduced in size and page load times.

Foundation’s JS library allows custom JavaScript to build on top of core functions. ES2015 is also fully supported with new inheritance and declarative methods.

A big part of Foundation’s new JS library is about granting access to Foundation initialization methods, new toggle triggers, and custom breakpoints. Foundation 6 will help you build on top of global plugins which can be included at your discretion.

Here’s a brief rundown of new features you’ll find in Foundation 6:

  • Size reduction with manageable components
  • Sass variables and mixins
  • Improved Foundation CLI
  • Base theme style improvements
  • New external Motion UI library
  • Brand new components like mega-menus and sticky elements
  • A custom Meteor package for Foundation devs made by the Zurb team

But one of the greatest new additions is the capacity to build raw prototypes in the browser which can be upscaled to fully-styled webpages.

Production and Prototyping

Foundation 6 can support every project from basic prototyping all the way to full production styles for live websites, all built on the same code library.

Prototyping can be done in the browser with Foundation’s grid system, responsive breakpoints, and pre-styled HTML elements. Developers can prototype entire websites that are both styled and useable in much less time than ever before.

Since Foundation also includes new components like sliders, switches, and dynamic JS elements, prototypes can be fully-functional right from the start.

foundation 6.2 release image

The default stylesheet offers more than enough for a basic prototype design in any browser. From that point developers can improve upon the theme to build a more custom-designed website.

Most developers are familiar with this process, but the biggest change is learning to incorporate all the new features. Thankfully there’s a bunch of great content regarding new features like Foundation menus and custom animations right in the Zurb blog.

Yeti Launch & Automation

Developers just want to get work done quickly and efficiently. Automation has solved this problem with only a small handful of tools.

First is the acclaimed Yeti Launch program. Currently only available for OS X, this lets developers quickly build new Foundation projects without accessing the website or unzipping separate components.

yeti launch osx screenshot

Alternatively there’s the CLI installation method which runs in any terminal on any machine(Windows, Mac and Linux). The new CLI is similar to Foundation 5 but with more command options.

Foundation’s CLI runs on Node so you can get it going with a simple npm call like this:

npm install --global foundation-cli

You only need to run this once per machine to get Foundation in your command line. From there you can navigate to any directory and call this to install a new copy of Foundation:

foundation new

This new CLI interface blends perfectly with related workflow tools like Sass and Gulp/Grunt automation.

All major Sass variables are contained in the _settings.scss file which makes updating a breeze. If you need to change a font, color, width or padding size, everything can be managed from that single file.

Similarly another file app.scss controls imported styles for various component resources. This is how developers can reduce file size by including CSS only for the components needed on any given project.

Automation and greater control are the cornerstones of Foundation 6. And if you haven’t already learned that the CLI is essential to development then now would be the best time to start learning.

It’s also possible to install Foundation without the command line or Yeti Launch tools. But with so many other dev resources like Gulp, Sass, and Composer requiring the command line, it’s quickly becoming a non-negotiable part of the workflow.

Basics of Foundation 6 Layouts

CSS classes and element relationships define Foundation grids just like other frontend frameworks such as Bootstrap. Learning these classes and the overarching grid system requires practice—but it’s a lot simpler than you might think.

foundation 6 grid system

Foundation 6 actually comes packaged with starter kits that can run basic templates or more advanced Zurb templates. These are great for new developers who don’t have a layout in mind but still want to tinker with Foundation.

However there’s plenty of reason to use the core of Foundation and instead build a layout yourself. A general grid system has always been available with accompanying responsive breakpoints. But Foundation 6 now includes a flexible grid system with mixins and variables maintained in CSS.

This Codepen example offers a glimpse into the existing grid system.

If you’re facing a rendering problem or need to find the appropriate code for your project visit Foundation’s documentation online. It covers everything you need with impeccable detail.

zurb foundation kitchen sink design

And to see every design component offered in F6 visit the kitchen sink example. This is undeniably the best place for new developers to comprehend just how many features are included in the Foundation library.

CSS & JS Setup

Everything in Zurb’s framework has always been setup to work right out of the box with options for customization as needed. The globals page offers information about all the Sass variables which can be used for customizing CSS.

The restructuring of Foundation 6 brings all these variables into the settings file. Here’s a brief look at the 20+ custom CSS variables open to editing:

  • $foundation-palette – colors used for buttons, callouts, links, etc.
  • $body-font-color – color for the main body text
  • $body-font-family – font stack for the main body text
  • $global-lineheight – reusable line-height value for page text
  • $global-margin – margin used on all major components

There’s also a lot to say about Zurb’s new JavaScript specs. The developers have included Babel support with ES2015 for ECMAScript compilation.

Generally speaking this creates a need for compiling JavaScript to ES5. Zurb recommends Babel.js however there are alternatives like Traceur.

The main foundation.js file includes all the necessities, separate from the foundation.core.js file that offers every possible component.

But for the sake of efficiency developers can include JS components separately as well. For example foundation.accordion.js would only support the accordion component and nothing more.

Dynamic Components

Let’s take a quick look over some of F6’s newest components and how they play together. Keep in mind there is no right or wrong combination of these components. They’re just a pool of resources that can be dipped into at varying depths depending on the project.

First are two form input components for the on/off switch and the slider. These rely on custom classes which can be targeted through JavaScript methods.

There are a bunch of options for each component to accommodate different interface patterns. For example the slider can be horizontal or vertical, can include two handles or even be controlled by the <input type=”range”> element.

Another cool feature is the dropdown panel. While this can be used for nav menus, it can also be used for tooltips or appended for inputs based on context.

foundation dropdown items

The position, style, and location can all be manipulated through HTML5 data attributes. This goes for every major component you’ll encounter in Foundation 6.

Another honorable mention is the new sticky feature. Page elements can be forced to stick in place while the user scrolls, and stop at a predetermined location. This again takes data attributes for properties related to movement and displacement on the page.

Foundation’s orbit is the name of their new image carousel component. This uses custom animations for transitioning between slides on the page.

irbit image slider foundation

There’s a great clearing guide for how to structure orbit galleries for variable-height content.

Other noteworthy Foundation components include off-canvas menus for sliding content, page tabs for hidden content, and modal windows for revealed content.

All of these features merely scratch the surface of Foundation 6. A full write up would turn into a compendium dozens(if not hundreds) of pages long. But I hope this guide offers more than enough to help developers on their path to understanding Foundation 6 for web projects.

Further Learning Resources

The #1 best way to learn more about Foundation is to build projects. Try things out, see what you can make and be willing to ask questions along the way.

Each of these resources should be perfect for developers getting into the Foundation community. But if you know any others please feel free to share in the comments below.

Similar Posts