A Look Under the Hood of Foundation 6

The Foundation for Sites 6 private release is in full swing, and we're already getting tons of great feedback from the community. We're focused on building a framework that will get you from prototype to production faster and more efficiently than ever before. You may have heard about a few of our improvements, including a 50% reduction in code and leaner and meaner Sass, but there are loads of other improvements that are going help you build better and faster. Here are a few of our favorites:

Taking the frustration out of navigation

The foundation of all great websites is quality navigation. While the mapping of links and the hierarchy are up to your designs, we believe that a framework should help you create some of the most common navigation structures. Foundation 5 has Top Bar for this. The Foundation 5 Top Bar does it's intended job well - A useful dropdown menu with left and right sections which magically folds into a mobile drill-down menu on smaller devices. The downside is that its configuration is rigid and challenging to customize.

In Foundation 6, we created a menu system that could be very customizable and modular. The new Menu component is a huge leap forward because we were able to combine several components, save many lines of code, and make a modular navigation you can use on most every project. The new Menu consolidates multiple Foundation 5 components, making it easier to use while slimming down the codebase:

• Inline list
• Side nav
• Icon bar
• Sub nav

You can add some simple class modifiers to change the Menu:

• Make it vertical - then add dropdowns (flyouts).
• You can make the links aligned right, left, or spread evenly.
• Add dropdowns, drilldowns, or accordion menus.

If you wrap Menu with the NEW .top-bar class, you can:

• Create a Top Bar menu with a background.
• Add forms / buttons

There is now also a Responsive Menu plugin that you can use with the Menu that allows you to choose the menu behavior on each screen size. Say for instance you wanted dropdowns on medium and larger screens, but a drill-down on small screens. The markup would look like:

<ul class="vertical menu-bar" data-menu-bar="drilldown medium-dropdown">

The new navigation in Foundation will help you build one of the most important parts of your site faster than ever before. The resulting navigation uses a lot less code too so your pages will load faster and your navigation will be easier to build the way you want.

Power tools to build your own plugins.

One way we were able to reduce the amount of code in our JS plugins was to separate out smaller utilities that handle events on larger plugins. By making these utilities publicly accessible, you can use them to build your own plugins.

Universal Toggler API: Toggle classes with a data-attribute. Example:

<ul class="menu" id="menuBar" data-toggler=".expanded">
 <li><a href="#">One</a></li>
 <li><a href="#">Two</a></li>
 <li><a href="#">Three</a></li>
 <li><a href="#">Four</a></li>
</ul>


<p><a data-toggle="menuBar">Expand!</a></p>

Public utilities you can use in custom plugins:

ImNotTouchingYou: A public function for determining collisions with the edge of a container. This edge detection will keep tooltips, dropdowns and more in the viewport or container of your choice.

GetYoDigits: A random number generator. We use this a lot for adding A11Y 'aria' attributes that require IDs.

IFeelYou: A function to add an event listener to 'window' if applied, fires a non-bubbling event to individual plugin elements with the '[data-yeti-box='idOfElement']' to close. If another element of the same plugin type opens, i.e. if Tooltip B opens and Tooltip A is currently open, close Tooltip A before opening B.

ISeeYou: A public function to add a 'onscroll' event listener to 'window'. The markup is simple - [data-scroll='idOfElement']

IHearYou: A function to add a 'resize' event listener to 'window'

We'd love to list all of them here but we'll go in-depth on these and the rest of the utilities in another post. We made these publicly accessible so that you can use any of these to make your own plugins. Separating these utilities makes our plugins smaller in file size.

Change and create breakpoints like magic

During this private release we learned there is no real consensus on what the optimal breakpoints for responsive design should be. One is for sure though, people will want to change them eventually and we were challenged to find ways to make this easier. Luckily we were able to take advantage of a newer feature of Sass - Sass Maps. This makes it faster and easier to create and change breakpoints along with classes for them. Here's what it looks like:

Change names and values of breakpoints:

$breakpoints: (
 small: 0px,
 medium: 512px,
 large: 1024px,
 xlarge: 1200px,
 xxlarge: 1440px,
);

Select which classes you want CSS classes for:

$breakpoint-classes: (small medium large);

This new, improved breakpoint mixin allows you to use built-in media queries or your own custom ones easy:

.sidebar {
 @include grid-column;
 
 @include breakpoint(medium) {
 @include grid-column-size(6)
 }
 
 @include breakpoint(1200px) {
 @include grid-column-size(4);
 }
}

Advanced Sass grid mixins for the layout you need

In the next version we created a more flexible mixin that allows you to control the column count on a row. You can do something like this:

.container {
 // we'll define this class to use 16 columns
 @include grid-row(16) {
 
 .sidebar {
 // 5/16 = 31.25%
 @include grid-column(5);
 }
 .main-content {
 // 11/16 = 68.75%
 @include grid-column(11);
 }
 }
}

Or make your own column count for a specific element or make a five column row without changing the column count for the whole project.

.sidebar {
 // this will make .sidebar take
 up 2 columns of a 5 column grid
 
 @include grid-column(2 of 5);
}
.main-content {
 // this will make .main-content take
 up 3 columns of a 5 column grid
 
 @include: grid-column(3 of 5);
}

This new feature will give more granular control over the grid so you can make your layout fit your content better.

Also, typing out fewer div's is always good: If you are defining a 12 column row, you can now type:

<div class="row columns">
 content here
</div>

Panini makes a tasty sandwich and a slick production package

As a Studio, ZURB uses Foundation to build tons of sites and apps for clients every year. We use a custom template to deliver our projects that includes handlebars and is built on Libsass. For Foundation 6, we've built an optional souped up stack to help you optimize your code and workflow. We called it Panini.

This Gulp-powered build system does a lot:

• Compiles Sass to CSS
• Combines JavaScript into one file
• Compiles HTML templates, pages, and partials into flat files

The template can also create production-ready code, adding in these extra steps:

• Compressing CSS
• Using UnCSS to remove unused classes from your CSS
• Compressing JavaScript
• Compressing images

Handlebars templates and helpers make writing dynamic code for static pages easy.

Examples:

Add an active class to the current page:

<ul class="menu">
 <li><a href="index.html" class="{{#ifpage 'index'}}current{{/ifpage}}">Home</a></li>
 <li><a href="about.html" class="{{#ifpage 'about'}}current{{/ifpage}}">About</a></li>
 <li><a href="contact.html" class="{{#ifpage 'contact'}}current{{/ifpage}}">Contact</a></li>
</ul>

Use partials to separate large chunks of HTML:

<head><title>My Site</title></head>
 <body>
 {{> header}}
 {{> navigation}}
 {{> body}}
 {{> footer}}
 </body>
</html>

Repeat a chunk of HTML several times to fill out a prototype:

<ul>
 {{#repeat 5}}
 <li>List item</li>
 {{/repeat}}
</ul>

We're excited to offer the same tools we use for our work to help you build more efficiently.

The Foundation team is truly excited about the giant leap forward version 6 will be. A huge shoutout to the amazing Private Release team who've been helping with code and feedback. We'll be pushing out a Release Candidate soon so you can get your hands on Foundation for Sites 6 before it's released.