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.
Recommended Reading: 50 Useful Responsive Web Design Tools For Designers
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 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.
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.
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
The decision behind this switch as ZURB explains it is to lighten the code base and make things a bit faster.
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.