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!
- 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.
<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>
<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
import Foundation from 'foundation-sites';
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.
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.
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.
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>
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>