What is it, how to start and what’s new?

Zurb’s Foundation 6 is a set of responsive front-end frameworks that enables you to create easily and swiftly beautiful websites, apps or HTML emails.

Now, as much as many of these frameworks are popular, I for myself don’t like to work with a lot of them. Frameworks in general, especially when they are very high level and specific in their goals, tend to confine you in a limited scope and ruin the element of creativity.

Zurb’s Foundation 6 is one of those (CSS front-end) frameworks that lets you control nearly every part of the design and development, while making your life easier by providing a solid basis that you can implement in your projects to take care of the basics, including resets, media elements, grid layouts, etc.).

Foundation 6, a set of frameworks

A new feature of Foundation 6 is it being actually a set of 3 different frameworks:

How to setup and get up and running?

For those of us, who have never used a Sass enabled framework, setting up Foundation 6 can be a pain. Zurb’s actual revamp of the framework and the ease of customization that the framework provides, come with a price: setting up a simple new project can be a daunting adventure to those who are not familiar with SASS, npm and bower.

To prevent newbies from being scared off or even to accommodate the needs of some fast projects or testings, Zurb has added a few new options that help you to swiftly set up a project without any previous knowledge about CLI’s. There are 3 main options:

CSS: This is the simplest way to start creating websites with Foundation. This way, you get a complete (or basic if you want) package of foundation 6 CSS and JavaScript that is 180 KB at most. This is due to a complete overhaul of the foundation code that lead to a nearly 50 percent reduction in its size(more modular code etc.). You can also choose the components you like to use and customize the Grid and Gutter before downloading. Please note that a basic Foundation configuration can be even less than 50 KB. Yeti Launch: Yeti Launch is Zurb’s rescue operation for those who like the benefits of SASS and fancy build tools but prefer a GUI over traditional CLI’s. Yeti Launch is an all in one solution that lets you build site, email or app projects swiftly and manage and update them if need be. Unfortunately, it takes still a few months before Yeti Launch is released for Windows users (like poor me). Sass: This is the traditional way for professionals and those who like to have the highest level of control over their projects. Setting it up with a package manager for mac or Linux is explained here. But if you are a Windows user, you could run into problems with Node.js etc., unless you follow the detailed instructions of James Stone on Youtube.

Foundation 6 templates and building blocks

Zurb showcases a complete set of free code examples that can be downloaded from their website. You can download and use either full website Templates or put your website together by using Building Blocks.

I must admit that these elements have been present in older versions of Foundation (like Foundation 5), but they are being updated gradually to reflect version 6’s smaller size and more modular architecture.

Templates

Templates are just a quick way to play with Foundation or set up a quick project. You can either use a template completely and tweak it to your needs, or take interesting blocks out of it and put your website together.

New/Magazin and Real Estate/Travel are 2 interesting website templates that I’ll definitely consider for future projects. Both of them are fully responsive and feature the latest components.

It should be noted that Foundation also offers Templates for Foundation for Emails and Templates for Foundation for Apps.

Building Block

Building Blocks are pre-made components that utilize Foundation’s capabilities to some extent and show case their uses. The code is easily available and you can copy and use them in your projects.

There aren’t still many Building Blocks for version 6, but you can check out Circle Pagination and Top Bar With Off-Canvas built on Foundation 6.

New Features

Now that we are somewhat familiar with Foundation and its version 6 in general, let’s have a quick rundown of its new features.

Native RTL support:

With Foundation 5 you had to make some tweaks here and there to get it RTL ready, but in version 6, right to left support is guaranteed.

The HTML

To get your JavaScript components working nice and smooth with you HTML, you need to add a dir attribute with a value of rtl to your <html> tag. You also need to specify the lang attribute.

<html class="no-js" lang="ar" dir="rtl"> 1 <html class = "no-js" lang = "ar" dir = "rtl" >

CSS for downloading

If you are using the pre-made CSS for downloading, you need to set the Text Direction to Right-to-left instead of Left-to-right before downloading.

Sass Configuration

If you are using the Sass version and are using Yeti Launch or have set up your project with CLI, you have to change the settings file (settings.scss) as follows to convert the framework’s components to rtl:

$global-text-direction: rtl; 1 $global-text-direction : rtl ;

Flex Grid

Flex Grid is (as you would probably guess) the Grid component of Foundation only with flexbox. It has a number of useful features like horizontal and vertical alignment and automatic sizing. Be aware that some still widely used browsers like IE9 don’t support flexboxes.

Setup

If you are using the custom CSS version of Foundation, you need to select Flex Grid under Grid before downloading.

If you are using the Sass version of Foundation, remove the @include for foundation-grid and add an @include for foundation-flex-grid.

@import 'foundation'; //@include foundation-grid; @include foundation-flex-grid; 1 2 3 @import 'foundation'; //@include foundation-grid ; @include foundation-flex-grid;

Here are some of the sizing features of flex grid:

If no sizing class is added, the div without sizing will fill the leftover space.

<div class="row"> <div class="small-4 columns">4 columns</div> <div class="columns">Leftover space!</div> </div> 1 2 3 4 <div class = "row" > <div class = "small-4 columns" > 4 columns </div> <div class = "columns" > Leftover space! </div> </div>

If there are multiple columns without sizing classes combined with one or more columns with sizing classes, they will share the leftover space equally between them.

<div class="row"> <div class="small-4 columns">4 columns</div> <div class="columns">Leftover space!</div> <div class="columns">Leftover space!</div> </div> 1 2 3 4 5 <div class = "row" > <div class = "small-4 columns" > 4 columns </div> <div class = "columns" > Leftover space! </div> <div class = "columns" > Leftover space! </div> </div>

By adding the .shrink class, a column will only take the necessary horizontal space for its content.

<div class="row"> <div class="columns">Expand!</div> <div class="shrink columns">Shrink!</div> </div> 1 2 3 4 <div class = "row" > <div class = "columns" > Expand! </div> <div class = "shrink columns" > Shrink! </div> </div>

For further details and examples of the new flex grid system please check the original documention at Zurb.

Navigation

The navigation system has been fully rewritten in version 6 and all the navigation components have been merged into one big flexible component. Now, all of them are compatible with each other and you can combine them easily to create your customized navigation system. Hopefully, I’ll write a complete article about the new navigation system, but if you are interested, you can check the original navigation docs here.

Badge

Badges are those tiny numbers or icons that appear when, for example, you have unread messages in Facebook.

To create a badge, you need to add .badge class to an element. You can add the .badge class to any element.

<spanclass="badge">1</span> 1 <spanclass="badge"> 1 </span>

A badge typically describes the status of an element. So to associate a badge with another element, you need to give the badge element a unique ID and point to that ID in an aria-describedby attribute on the main element.

<h1 aria-describedby="notificationCound">Notifications</h1> <span class="badge" id="notificationCound">1<span> 1 2 <h1 aria-describedby = "notificationCound" > Notifications </h1> <span class = "badge" id = "notificationCound" > 1 <span>

Some of the other new features of Foundation 6 are the Sticky plugin, the Toggler, the Media Object and Motion UI.

The bottom line?

Whether you are a veteran Foundation 5 user and intend to start a new Foundation project or you have no previous knowledge about Foundation at all but plan to start a new project with it, I strongly recommend to jump on Foundation 6’s ship and learn its new features and ways of doing things. But, unless you have no other option, I would avoid migrating old Foundation 5 projects to version 6, as there are many differences and issues.

New! Foundationize

We are proud to present Foundationize: a free developer resource combining PHP frameworks like Yii2 with Foundation 6 and a WordPress & Foundation 6 starter theme.