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.

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:
  1. $mainColor: #000;
  2. $secondaryColor: #fff;
  3. $alertColor: #f3f3f3;
  4. $successColor: #ccc;
In version 4, these variables turn:
  1. $primary-color: #000;
  2. $secondary-color: #fff;
  3. $alert-color: #f3f3f3;
  4. $success-color: #ccc;

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>

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.

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.

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.