ZURB Foundation

The world's most advanced responsive front-end framework.
Learn what's new in Foundation 6.4
Wed, July 26th, 2017
doostinharrell
foundation front-end theming prototyping
ZURB Foundation

I've been geeked out about ZURB Foundation for a while now.  The tool stack is just super solid, the framework incredibly flexible, and it is really streamlined our front-end dev workflow.  So far we've developed a dozen or so websites using Foundation 5 and 6 but with the latest release of Foundation the ZURB team has really stepped it up a notch and they deserve some serious credit.  Let's discuss some of the major changes.

New in Foundation 6.4

  • XY Grid Framework - Grid's on the Y axis? Get outta here!
  • Module Based Javascript Architecture - ES2016 powered by WebPack.
  • Prototyping Utilities - Spinning up quick prototypes is faster than ever with these new tools.

The New XY Grid Framework

ZURB has completely overhauled their grid system and created a true 2 dimensional grid framework.  Historically grid frameworks were primarily focused on horizontal layout (X-Axis) built using block elements and css float's.  With the introduction of the flexbox display mode in CSS3 spec the rules were changed. Unfortunately flexbox wasn't supported early on and browser support has been too poor to use on production websites, ughhh we want more control.  With modern browser's finally supporting flexbox we can finally ditch block elements and css float's in favor of flexbox confidently (https://caniuse.com/#search=flexbox), woot woot!

The new XY grid framework is built on flexbox and takes many queues from the newly announced css grid. The most impressive feature is the ability to work with vertical layouts (Y-Axis).  Unfortunately XY grid didn't exist when we built our website. If it were the home page would have been much easier to develop. 

XGrid Example

<div class="grid-container grid-container-padded">
<div class="grid-x grid-margin-x grid-margin-y grid-padding-x grid-padding-y">
<div class="cell small-6">
<img src="http://placehold.it/600x300" alt="">
</div>
<div class="cell small-6">
<span>Cell</span>
</div>
<div class="cell small-6">
<span>Cell</span>
</div>
<div class="cell small-6">
<span>Cell</span>
</div>
</div>
</div>

YGrid Example

<div class="grid-container grid-container-padded">
<div class="grid-y" style="height: 350px;">
<div class="cell small-3">
<span>Cell</span>
</div>
<div class="cell small-4">
<span>Cell</span>
</div>
<div class="cell small-5">
<span>Cell</span>
</div>
</div>
</div>

ES2016 powered by WebPack

One of the biggest changes from a development perspective, in my opinion, is that the new JavaScript configuration uses a module based architecture.  Includes for js in previous versions of Foundation were defined in config.yml.  Gulp would then combine and minified the files on builds.  Now js libraries are included in your projects primary js file using Webpack's import syntax and bundled.

Developers can also confidently write ES2016 compatible js as files are also passed through Babel's JavaScript compiler for optimal browser support.  Take advantage of modern js standards now your js code will look much cleaner and easier to read. Learn more about ES2015 on Babel's website.

Import Example

import Foundation from 'foundation-sites';

Prototyping Utilities

Backstory

A little backstory, Last year (2016) we were contracted to work on a series of large university websites and it became apparent early on that these projects were going to be incredibly complicated and require a ton of front-end work.  I had been contemplating the idea of rapidly prototyping entire layout's and site designs outside of Drupal for a while now and decided to take this approach.

Learn more about Rapid Prototyping

As an avid Drupal themer and Foundation enthusiast I of course used Foundation CLI and ZURB Template (as well as their entire suite of tools) to prototype and I have to say this really simplified my workflow.  I had the entire site design completed in 2 weeks and was ready to start migrating my code to Drupal.  Because of my success with this "Prototype" first approach I am stoaked about all these new prototyping features so lets dive in.

What's New?

These new prototyping utilities are essentially a collection of mixins and classes that can be used to expedite the prototyping process.  From changing font styles, adding shadows, border radius, creating css shapes, aligning text, adjusting typescale, etc etc etc...  This offers a lot of power to in front-end developers that need to go through a process of layout approval requiring a fully functioning clickable prototype.  

Below are a few of the most useful prototyping features.

Responsive Breakpoints

Preface nearly any of the prototyping classes with your breakpoint name and apply overrides quickly at each breakpoint.

<p class="medium-text-uppercase">This text will be uppercase for medium and up.</p>
<p class="large-text-lowercase">This text will be lowercase for large breakpoint.</p>

Typescale

Using the prototyping typescale classes it is easy to apply existing Foundation header sizes to other elements.

<p class="h1">I have h1 styles.</p>
<p class="h2">I have h2 styles.</p>

Margin and Padding Helpers

Using the prototyping margin and padding helper classes you can quickly add margin or padding to an element without having to write a lick of css.

<div class="margin-left-1">1rem of margin on the left side</div>
<div class="margin-vertical-2">2rem of margin on both the top and bottom sides</div>
<div class="padding-1">1rem of padding to all sides</div>
<div class="padding-horizontal-0">0rem of padding on both the left and right sides</div>

Learn more about ZURB's prototyping utilities

Resource Links: