It may seem a bit late to the game doing a review of the new Foundation, but we’ve been so busy actually using and enjoying the framework to find time to summarise just why we like it! 

It has been a little under 3 months since Zurb launched Foundation 6, and since it’s release it's had an incredible reception from the general public;

  • NPM installs - 3000+ per week 
  • CSS downloads - 6000+ per week
  • Meteor - 50 per week
  • Ruby Gem - 500+ per week

This is an exceptional amount, especially with Bootstrap’s Alpha 4 release back in September, claiming to have had 100 people push over 900 commits, and closed over 400 issues and pull requests. 

See Also: Responsive Web Design Frameworks You Should Consider

In my honest opinion, and from having used both frameworks, Bootstrap is still far behind in its efforts to be a frontrunner in the top framework category. (Have you ever noticed how every bootstrap site just looks the same?)

What’s new in F6? 

Foundation 6

Zurb

Zurb has pretty much completely overhauled their framework, going back to the drawing board and using feedback from their community and advances in the latest tech to develop a faster, lighter and more stable product that has everyone talking. 

According to the guys at Zurb, this latest release boasts the following:

  • 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.
  • Fewer Style Overrides - 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.
  • Customisable Sass Grid - Any Combination of Columns You Need
    The Sass grid mixins have been made smartly to give you even more flexibility to customise the grids with any number of columns.
  • 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 gives you 'Handlebars' templating, UglifyJS, UnCSS, and image compression and Sass as well.
  • Motion UI - Easily Create Animations and Transitions
    This Sass library includes more than two dozen built-in transition and animation classes.

Straight away, using F6 you can see just how reduced the code is, although it does take a little time to get used to the new file structures and large folder names. These could cause some Windows users issues when committing their work to Git, resulting in an error of ‘Filename too long’. To overcome this, just chuck this in your CLI: git config --system core.longpaths true)

The reduction in file size is due to several large changes that Zurb have discussed in their build-up to its release, including:

  • Redefining several larger components into smaller modular components (such as the navigation menu).
  • Reducing specificity. Instead of having deeply nested selectors and styles, the framework will now lightly handle the styling (letting you more easily customise your site).
  • Simplifying Sass variables and mixins to create fewer options.
  • Redefining their JavaScript so that instead of each component using its own functionality, they all share universal utilities (to cut down on wastage and keep things modular).

Yeti Launch

Foundation 6

Zurb

The first thing to note using F6 is that the Yeti Launch app available is a godsend. In the click of a button, you can have a fresh F6 site, along with web apps or email templates using Foundation’s sister frameworks all set up and ready to work with.

On a sidenote. Emails 2 from Zurb is close to it’s public release which we are anxiously waiting for. Nobody likes to code up an email template, right?. Using tables for a layout just seems so… wrong. 

Another great feature of Yeti is that it offers you the choice of using either a standard Sass-powered Foundation setup or their own development framework when creating your new project. 

Zurb’s development stack comes with a few new additions:

  • UnCSS (to remove unused CSS styles)
  • UglifyJs (for JavaScript compression)
  • Image compression
  • Static site generator (based on templates)
  • Handlebar templates (for building dynamic templates)

Unfortunately Yeti isn’t yet available on Windows, but knowing how fast the guys at Zurb work, it won’t be long until the community has a stable release to try. 

Notable Code

Another new service that Zurb is offering is the ability to push your dev site to an online repo called Notable Code, which allows members of your team to access it to provide feedback. 

You can also invite people to view your project online. Each team member will get a secure URL to your site and will also be notified when you update the project.

A big part of Notable’s appeal is that users will be able to access your prototype on any device they choose and then be able to provide annotations on your design.

Orbit Updates

In F5, the Orbit Slider was a complex component that let users create a responsive, interactive slider for their projects. Due to the continuous updates to the slider over the years, it was bloated with dozens of configuration options leading to a extra work maintaining something that should have been so simple. 

In F6, Zurb announced that they were discontinuing Orbit, but to the delight of many Foundation users, they reworked Orbit into a lightweight slider that still offers great customisation. 

New Breakpoints!

No more are we using the much loved:

@media #{$medium-only}

Instead, Zurb have created a newly worded mixin (which takes some time getting used to after years of @media!):

@include breakpoint(medium only) {

Foundation 6 also lets you define your own custom breakpoints inside of _settings.scss:

$breakpoints: (
  small: 0,
  smallmed: 420px, // custom breakpoint
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
);

Even though you have defined your sizes here, they won’t output any CSS until you also add them to the $breakpoint-classes() variable defined just below in the settings file.

$breakpoint-classes: (small  smallmed medium large);

Flex Grid

The flex grid, in my opinion, is one of the best new features of Foundation. The flex grid works very similarly to the standard float grid, but includes a number of useful features only possible with flexbox; like horizontal and vertical alignment, automatic sizing, and easier source ordering.

See Also: Reaching Your Vertical Limit with Centre Aligning

To use, you first have to comment out the original foundation grid and allow flex grid to take its place. 

// @include foundation-grid;
@include foundation-flex-grid;


To use flex grid, you would create your rows and columns as usual, but instead of defining how many columns in each row, you could simply do the following

<div class="row">
  <div class="small-4 columns">4 columns</div>
  <div class="columns">Whatever's left!</div>
</div>


The empty ‘columns’ just expands to whatever is left in the row. Pretty sweet! There are so many other options available with flex grid which you can read here!

Note: The flex grid is only supported in Chrome, Firefox, Safari 6+, IE10+, iOS 7+, and Android 4+. Flexbox is supported in Android 2, but not reliably enough for use with this grid. (View flexbox browser support.) We recommend only using the flex grid on projects that can live with purely cutting-edge browser support.

Working with Wordpress

Foundation 6

Zurb

If like me, you are asked to build a Wordpress site now & then and refuse to use anything other than Foundation for your framework, the guys over at jointswp.com have already updated their much loved blank Wordpress theme to Foundation 6, allowing you to use all the new F6 updates and benefits within the WP environment. It’s super easy to get started and the file structure isn’t that much different.

So much more 

There is tons to write about with F6, some I’m still discovering myself. It’s a slight learning curve getting used to the new ways that F6 works, but it’s such an exciting release that the learning curve is worth the time. As of yet, there’s no official documentation for upgrading from Foundation 5 to 6, but they’ve promised making this a priority in Q1 of 2016.

Zurb are also extremely active on Twitter, talking in a down to earth, human way which makes you feel like a valued part of their vast community. So get involved! 


Enjoy this article? Let us know on Twitter or Facebook

21