A look into: Foundation 4 Responsive Framework

ZURB has recently released a new version of their popular responsive framework, Foundation. In this version, they’ve made some drastic changes, eliminated a few components, and added new features. So, here are a few things that I think is worth noting in this release.

Let’s check them out.

The Variables

The most noticeable change when you open the _settings.scss, where Foundation sets variables for colors, length and other stuff, is the Variables names. For instance, these are the variables that were used to store website color scheme in Foundation 3:

 $mainColor: #000;
 $secondaryColor: #fff;
 $alertColor: #f3f3f3;
 $successColor: #ccc;

In version 4, these variables turn:

 $primary-color: #000;
 $secondary-color: #fff;
 $alert-color: #f3f3f3;
 $success-color: #ccc;

If you previously built with Foundation 3, these changes will certainly affect your website more or less. And it is likely that you have to do some significant adjustments to your SCSS stylesheet to reflect the change.

In addition, Foundation also added more variables to give more flexibility over the website component styles. For instance, Foundation now provides variables to define the body background color, and global rounded corner, which is unavailable in previous versions.

 $body-bg: #fff;
 $global-radius: 3px;
 $global-rounded: 1000px;

So, you probably also need to examine whether you should replace your current style definitions with the variables provided.

The Grid

The basic concept of consructing the grid hasn’t changed from the previous version, but in this release, Foundation made an enhancement for mobile grid. Foundation has two types of grid size small and large, and there are now 12 columns for the small grid.

Given the following markup

 <div class="row">
 <div class="small-2 large-4 columns">...</div>
 <div class="small-4 large-4 columns">...</div>
 <div class="small-6 large-4 columns">...</div>
 </div>
 

We will see that the columns width are split equally in large screen size.

In small viewport, the columns are adjusted in accordance to their specified small grid number.

emCalc Function

em is a relative unit mesaurement, thus it is not certain how much exactly is 1.879em — depending on the specified base font size, the return might slightly be different.

In this latest version, Foundation makes it easy to use em unit with emCalc() function. Simply add the pixel value, like so.

 width: emCalc(10px);
 

It will return in em unit when we compile it into CSS. The calculation is based on the value specified in $em-base variable provided in _settings.scss.

Related: Understanding em Units in CSS

Switching to Zepto.js

Foundation 4 uses Zepto.js over jQuery as the default JavaScript library to run the plugins. Zepto.js is a lightweight JS library that has compatible APIs to jQuery. So, technically speaking, the Foundation jQuery plugins from the previous version should work just fine.

The decision behind this switch as ZURB explains it is to lighten the code base and make things a bit faster.

Related: How to Use Foundation 4’s Faster, Better and Stronger JavaScript

Final Thought

Foundation is a great framework to build your resposnive website. But, if you have built one using the previous version, and decided to upgrade, it seems that you have some work to do.