Zurb Foundaiton is a great front-end framework, but it’s also a massive framework with a lot of features. Instead of going through the whole thing, I’m going to write about the top 5 things you should know about Foundation to start using it in your next project and decrease development time, improve code quality, and reduce debugging time.

5 Reasons For Why You Should Use  Foundation

1. Faster development time

With Foundation, you don’t have to write any boilerplate code like grids, buttons, typography, etc. This means you spend less time in development!

2. Responsive Out Of The box

Most of the time you spend adapting a responsive site is spent writing proper CSS for layouts. With grids, you don’t even have to think about wether your code will work in a responsive layout. It’s responsive out of the box. Any changes in the responsive layout are only a couple of class name changes away.

3. Less Debugging Time

Since most of your boilerplate code (like grids) is already written, tested for different browsers, and is already responsive you spend less time debugging your site in different browsers. They’ll be bugs, but those will probably go away as you learn the framework.

4. Helps in Making Your Frontend Code DRY

By providing variables and default styles out of the box, you end up repeating yourself a lot less. Rather than trying to write styles for every single element, you end up trying to write sensible defaults that will work for the whole site. In this way, you are creating a framework by which other people can extend your site.

5. Foundation Forces You To Work With Modern Technologies

If you use Foundation’s CLI (Command Line Interface), your project comes with a grunt, bower and sass already integrated into your project. You only have to used one command to use foundation, sass, grunt and bower in your project, making it that much more faster to get your project up and running.

Bonus: 6. None Of The Code Is in  UPPERCASE

The technical advantages of lowercase and capitalized comments are obvious and well-documented, so I don’t need to go too much into this.

5 Most Useful Features In Foundation

1. Installation

Installing foundation is very simply and surprisingly useful. Installing Foundation through foundation’s CLI will install grunt and bower, and will create the necessary scss, css, and javascript files. It will even add a default .gitignore.

If you have never installed Foundation on your computer, just run the following commands:

[sudo] npm install -g bower grunt-cli

gem install foundation

This will install all the necessary requirements to run Foundation. Now you can create a project by typing:

foundation new project_name --libsass

If you don’t want Foundation to create a a project, you can just import foundation into your Compass project, by adding it to your config.rb:

require "zurb-foundation"

http_path = '/'
css_dir = 'css'
sass_dir = 'scss'
images_dir = 'images'
javascripts_dir = 'js'
relative_assets = true
line_comments = true
output_style = :expanded


Now Codekit, bundler, and or grunt, will automatically import any Foundation dependencies (since your gem is already installed).

2. Modules

Like Bootstrap, Foundation is very modular. If you only want to use a specific part of Foundation, you can do so by only importing some of the requirements you need.

Foundation requires only two modules (‘settings’ and ‘foundation’). All other modules come commented out in the default installation and can be included or excluded at will.

@import "settings";
@import "foundation";

// Or selectively include components
// @import
// "foundation/components/accordion",
// "foundation/components/alert-boxes",
// "foundation/components/block-grid",
// "foundation/components/breadcrumbs",
// "foundation/components/button-groups",
// "foundation/components/buttons",
// "foundation/components/clearing",
// "foundation/components/dropdown",
// "foundation/components/dropdown-buttons",
// "foundation/components/flex-video",
// "foundation/components/forms",
// "foundation/components/grid",
// "foundation/components/inline-lists",
// "foundation/components/joyride",
// "foundation/components/keystrokes",
// "foundation/components/labels",
// "foundation/components/magellan",
// "foundation/components/orbit",
// "foundation/components/pagination",
// "foundation/components/panels",
// "foundation/components/pricing-tables",
// "foundation/components/progress-bars",
// "foundation/components/reveal",
// "foundation/components/side-nav",
// "foundation/components/split-buttons",
// "foundation/components/sub-nav",
// "foundation/components/switch",
// "foundation/components/tables",
// "foundation/components/tabs",
// "foundation/components/thumbs",
// "foundation/components/tooltips",
// "foundation/components/top-bar",
// "foundation/components/type",
// "foundation/components/offcanvas",
// "foundation/components/visibility";

As you can see, this is a lot of modules! Rarely will you need all of these, so delete at will!

In my recent portfolio site redesign, I included only a couple of modules:

Theme Name: thejsj9
Theme URI: http://thejsj.com
Author: Jorge Silva-Jetter
Author URI: http://thejsj.com
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html


@import "compass/reset";
@import "compass/css3";

@import "modules/icons";
@import "settings";

@import "foundation/components/global";
@import "foundation/components/visibility";
@import "foundation/components/grid";
@import "foundation/components/buttons";
@import "foundation/components/type";
@import "foundation/components/inline-lists";

@import "modules/mixins";
@import "modules/global";

@import "modules/header";
@import "modules/footer";
@import "modules/front-page";
@import "modules/content";
@import "modules/blog";
@import "modules/forms";


As you can see, I’m importing this modules along with a couple of compass modules and I’m also including them along with my own custom site modules, just to have all SCSS dependencies in the same places. My sass compiler will include them as if they were regular sass files.

3. Overwriting Globals

As with any framework,  Foundation comes with a lot of defaults. These defaults are often quite sensible, but rules are meant to be broken. Often times you want to overwrite those defaults and that’s totally fine. There are two main ways of doing this: 1. changing sass variables 2. including mixins and 3. writing you own custom sass. For simple customizations, you often only need to change default variables (base font-family, primary color, etc). For elements, such as buttons, you would use mixins, and for more complex behavior you’ll probably just need to write custom sass (which is would you would do anyways).

For example, default buttons look something like this:

Screen Shot 2014-03-03 at 12.03.56 AM


If I just want to change the color of the blue buttons I only need to change one variables in my Foundation/global settings:

// We use these as default colors throughout
$primary-color: #FE00E4; // Magenta
// $secondary-color: #e7e7e7;
// $alert-color: #f04124;
// $success-color: #43AC6A;
// $warning-color: #f08a24;
// $info-color: #a0d3e8;

Now that I change my primary color to magenta, my buttons look like this:

Screen Shot 2014-03-06 at 12.34.10 AM


Since the variable $primary-color is also used elsewhere, the colors in my page change quite dramatically.

Screen Shot 2014-03-06 at 12.34.22 AM


This changes the default color, but it still doesn’t change the default behavior of all buttons.

.button {
    @include button(
        1rem, // padding
        rgba(50,50,255,0.7), // background-color
        0.1rem, // radius
        false, // full-width
        false, // disabled
        true // is-input

Now, our buttons looks something like this (throughout the whole site):

Screen Shot 2014-03-06 at 12.43.09 AM


Sometimes, though, you will need to write specific behavior into your elements that are not part of the Foundation framework… and that’s totally fine! Say, for example, you want to make your background a gradient and add some text shadow to your button text. You can just write some sass for that:

.button {
     @include button(1rem, rgba(50,50,255,0.7), 5rem, false, false, true);
     box-shadow: 0px 0px 3px rgba(0, 0, 0, 1);
     text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.79);
     background: radial-gradient(#00009C, rgb(10,10,200));
     letter-spacing: 0.3em;
     text-transform: uppercase;
     font-size: 0.4em;

Which end up looking something like this:

Screen Shot 2014-03-06 at 12.53.45 AM

4. Grids

My All Time, Hands Down, Million Dollar feature is definitely grids. Grids make it easy to give your website a responsive layout. This is done through css classes, added to the HTML of you code. This might seem a bit weird, since you’re not doing everything in your css/sass, but the effect is that it makes your frontend development that much faster! Having your layout in your html, means it’s much easier to experiment and make changes, since you don’t have to go through your CSS to find where those changes need to be made.

Grids in Foundation are very similar to grids in bootstrap (although not exactly the same) and are based on the same system of ‘rows’ and ‘columns’.

So some html like this:

<div class="row">
    <div class="large-12 columns">
        <h1>Welcome to Foundation</h1>

<div class="row">
    <div class="large-6 columns">
        <h2>I really Like Grid</h2>
        <p>Lorem ip... ac leo mollis, sed volutpat libero rhoncus. Nullam adipiscing convallis nisi id faucibus.</p>
    <div class="large-6 columns">
        <h2>I Really Like Buttons</h2>
        <p>Lorem...d faucibus.</p>

Will look something like this:

Screen Shot 2014-03-03 at 12.57.32 AM

and in smaller screen, it would look something like this:

Screen Shot 2014-03-03 at 12.57.40 AM

These grids can be as complex or as simple as you want to make them. Grids can be nested inside of each other ad-infinitum.

5. Top Bar Responsive Menus

I’m tired. I’m going to sleep. You can google this one!