Getting Started with Zurb Foundation 4

by Joel Hooks on Jun 27, 2013.

Zurb Foundation is a responsive "mobile-first" front-end framework. This means that it supplies quite a bit of initial structure for your web applications and eliminates considerable pain related to CSS and layout. If you've ever been intimidated by CSS layouts, Foundation is a cool balm to help alleviate some of the pain.

Why use Foundation?

There are several front-end frameworks to choose from. Twitter's Bootstrap is the closest relative to Foundation. Bootstrap is a great framework, and it is worth your time investment to explore it as well. I've got a couple of reasons why I prefer Foundation.

  • SASS - I love Compass/SASS. Bootstrap uses LESS, which is also fantastic, just not my preference.
  • Grammar - We will dig into this in more detail below, but I love the semantics of the CSS when using Foundation.
  • Aesthetics - Both frameworks look generic out of the box, but I like the Foundation version of generic better.

Installing Foundation

When you land on the Foundation download page you are presented with a host of options. The first is to download the entire precompiled framework as a single zip file. This option is a great way to get started and provides an initial structure and example index.html to get you started.

The second option is to download a customized precompiled version. This allows you to select only the components you need. This option is excellent once you've gotten started with Foundation and know you only want specific pieces. When you send your app to production, you don't want 50 components of Foundation when you are only using 3. It also allows you to customize the base colors, which is a nice option. You can do this easily later, but saves the hassle later if you already know what you need. Frankly the default blue is not my taste, so I'm always changing it immediately anyway. That in itself might be a good reason to get the custom build!

The third way is to install the SASS (Simple Awesome Style Sheets) version of Foundation. This approach is my preferred way to get going, but it is definitely the most technical. It involves installing Ruby Gems and using Compass directly to compile Foundation for your application. They provide more options for using Foundation without Compass, but Compass is awesome and if you don't have a specific reason not to use it, use it. It provides the most flexibility and is structured for easy customization.

The Foundation Grid

Foundation does many things right, but if there is a foundation to Foundation it is definitely the grid. For most web pages and applications, using a grid for layout makes a lot of sense. It provides a level of consistency that improves aesthetics and usability. There are many options when it comes to CSS grid systems, of which Foundation is only one. Bootstrap,,,, and many others will provide similar functionality in slightly different ways. Foundation's grid is very easy to use, and the grammar that it provides for implementing grid layouts provides semantics that are easy to remember.

The Foundation grid has 12 grid columns by default. You can customize the number of columns, but for general use 12 is a good standard and should suffice. With the mobile-first approach that Foundation employs, content gets stacked by default. You actually have two grids; a large and a small grid. As the names imply, the small grid is for smaller screens and kicks in at pixel widths under 768px.

<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>

The above snippet defines a row that contains 3 columns. There are small and large classes available, so in the above HTML on large devices you'd have 3 individual columns that evenly divide the width of the row. On smaller devices, the above would display 3 columns of varied widths. "But I thought Foundation used 12 columns?" Glad you asked. Foundation uses a 12 column grid system, which means that your page has spaced columns to utilize. In the above, we are defining 3 columns to contain content. The small-# classes are using 2, 4, and 6 of the 12 available columns to display the divs. This means you will have a skinny, normal, and wide column visible at resolutions under 768px. The large-4 classes will produce visible columns that are all the same sized, evenly spaced across the 12 grid columns.

In addition to the small-# and large-# classes, Foundation provides some very handy helper classes to control your layouts. The large-offset-# and small-offset-# classes allow you to "skip" grid columns to provide additional spacing. The `large-centered` and `small-centered` classes provide an easy way to center your columns on the page. You can also use `push-#` and `pull-#` to effectively swap around columns based on the current width of the window.

When you have layouts that will remain the same for small and large windows, it is recommended that you simply use the small-# classes. It would probably be OK if you used the large-# classes, but I'm sure they recommend the small-# as a default for a good reason. Mobile-first?

What's next?

The most fundamental aspect of Foundation is definitely the grid. It is very flexible, and allows for rapid prototyping of layouts. You can easily move things around and restructure your content. Beyond the grid, Foundation has responsive navigation elements, consistent typography, and a good number of typical components you will need when building an application. It is awesome for prototyping, but for many applications it will see you all the way through to the end as you iterate on your project.

With any framework like Foundation or Bootstrap, the biggest issue is the risk of looking too generic. You've probably landed on a page and thought "meh... bootstrap" because the page used what is obviously the stock theme. Don't be generic! As you progress, start considering how you can modify the (many) variables to develop your own look and feel. Foundation is highly customizable, and customizing SASS can even be fun!

Hopefully you are enticed to give Foundation a deeper look. I can't wait to see what you build.

Joel Hooks (@jhooks) is a web application developer with a fondness for open source technology… in a "full-on neck beard" sort of way.

Learn and Earn!

Sign up for great tutorials, guides, rants, raves and opportunities to earn more money!