960gs was great!  When the majority of the visitors to your site used desktops with monitors at least as wide as 1024 pixels, 960gs made it dead simple to design a site in code.  However, with the advent of device proliferation and media query prevalence, fixed width sites are decidedly less effective than responsive layouts.

In this document I will describe how to take your fixed width 960gs site and move it to ZURB's Foundation framework. Without digressing too much, I want to be fair to 960gs and mention adapt.js, that framework's response to responsive web design.  Now, this article will cover the basics of the Foundation grid, how it compares to 960gs' grid and some extra options with Foundation's Sass.  For this tutorial, I'm assuming you are already familiar with 960gs and looking at Foundation as a way to achieve a responsive design.

The Grid

To get started, you'll need to understand the basic concepts of rows and columns in Foundation. 960gs' convention was to use one mega container and rely on each combination of DIVs to make a row. Like so:

<div class="container_12"> 
    <div class="grid_6"></div> 
    <div class="grid_6"></div> 
    <div class="grid_6"></div> 
    <div class="grid_6"></div> 
</div>

You might have a <div class="clear"></div> thrown in between grid DIVs that add up to 12, but that's optional. This layout, would in effect, produce two rows with two columns that equally divided the available width. If you add alpha and omega classes, it will respectively strip the extra margin-left and margin-right.

In Foundation's predefined HTML classes, this same layout would be accomplished by the following snippet:

<div class="row"> 
    <div class="medium-6 columns"></div> 
    <div class="medium-6 columns"></div> 
</div> 
<div class="row"> 
    <div class="medium-6 columns"></div>
    <div class="medium-6 columns"></div> 
</div>

There is no mega container for Foundation, instead there are rows and rows contain columns, and columns must total 12.  Each column is defined by adding the columns class accompanied by at least one class to dictate the width of that column.

To go on a short tangent, for what it's worth, Foundation's grid is similar to Twitter Bootstrap's rows and spans, except Foundation gives you the power to define column widths at multiple breakpoints.

You'll notice the notation medium-6. That means at the medium breakpoint (however that's defined, the default is 641px), you'll see six columns worth of width, or half of the available width. Another class may be added to indicate how many columns worth of width the div should take up at other breakpoints, including small and large. Here's how that would look:

<div class="row"> 
    <div class="medium-6 small-6 columns"></div> 
    <div class="medium-6 small-6 columns"></div> 
</div> 
<div class="row"> 
    <div class="medium-6 small-3 columns"></div> 
    <div class="medium-6 small-9 columns"></div> 
</div>

Foundation is mobile-first. Code for small screens first, and larger devices will inherit those styles. Customize for larger screens as necessary. source

By default, Foundation is designed in a mobile first concept. What this means for grids is that the small class can be used alone to define the width of a column at the small breakpoint and all breakpoints above will inherit from that as long as a medium or large class is not present. On the flip side, if you just use a medium class, then the default small breakpoint layout will transform the DIVs into stacked single-column rows (equivalent to small-12) which is the default applied to columns in the small breakpoint.

960 Grid "Equivalents"

With all that in mind, the basics of changing your markup is as follows: First, the div with the container class can be deleted. Next, around your grid_# DIVs that make up "rows", you'll need to create a div with the class row. The individual DIVs containing grid classes can be changed to medium-#.

This will give you something that looks an awful lot like your old 960gs layout for viewports above 640 pixels and below that width, you'll just have full-width stacks of rows, meaning that each column div will change to 100% width.

Here are some other 960gs concepts translated into Foundation parlance:

Nesting

In 960gs, nesting could be accomplished by adding alpha to the first column in your row and omega to your last, effectively removing horizontal margins.  When using this approach, your nested rows had to be a sum of the column's width that the nested columns lived within.

In Foundation, nesting is done for you, you just have to insert one row inside of a column.  No extra classes required.  The other main difference is that every nest row assumes a fresh 12 columns within the available nest space.  So a row inside a medium-6 will allow you to divide those six columns into 12.

Creating Gaps

960gs' prefix and suffix classes were excellent utility classes for creating empty space in your layout and provided a means for centering.  Foundation has the same capabilities, with Offsets.

Source Ordering

This is actually pretty much the same in both frameworks.  Source ordering allows you to create your columns in any order you want in your actual HTML, but have it appear in a different left-to-right order.  For this, you can use push and pull classes.

Read More

Foundation covers all of 960gs' capabilities and much more. See the docs to learn about everything else it can do.

Foundation Breakpoints

Well, this is the main reason you move into something like Foundation: the responsiveness.  You know about large,  medium and small breakpoints, but there are also xlarge and xxlarge. Here's what these breakpoint classes relate to:

Note that only the small, medium and large breakpoints can be used in your HTML. If you need to use xlarge or xxlarge, or you'd like to customize these breakpoints, you can use work with Sass to tailor Foundation to fit your needs.

Sass Options

Foundation is built to work with Compass and Sass. If Sass is something your comfortable with, it can make development easier, read more about getting started with Sass and Foundation.

The key pro for using Sass is that instead of adding Foundation-specific classes to your HTML, you can just extend Foundation attributes based on existing markup. For example, that existing div with the class news can be made to mimic a grid-6 columns div.

Here's a full example of how this might look, let's say you have this HTML:

<div class="main"> 
    <div class="news"></div> 
    <div class="events"></div> 
</div>

To achieve a 50/50 split of .news and .events, your Sass would look like this:

.main { 
    @include grid-row; 

    .news { 
        @include grid-column(6); 
    } 

    .events { 
        @include grid-colmn(6); 
    } 
}

This is the equivalent of changing the markup to this:

<div class="row">
	<div class="small-6 columns"></div>
	<div class="small-6 columns"></div>
</div>

Including Additional Breakpoints

If you wanted to include other breakpoints in your SCSS, you would just use this technique:

.main {
	@include grid-row;
	
	.news {
		@include grid-column(8);
		@media #{$large-up} {
			grid-column(6)
		}
	}
	.events {
		@include grid-colmn(4);
		@media #{$large-up} {
			grid-column(6)
		}
	}
}

Which is the same as:

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

The SCSS technique is nice because it keeps your classes uncluttered in your HTML, and allows you to be more semantic.

Avoid Duplicated Styles

There's one more important thing to understand about this method. If you are compiling your CSS to a separate, additional stylesheet, but you want to make use of the Foundation mixins, you'll need to import what you need, but prevent duplicating Foundation styles. To avoid redundant styles being added to your output CSS, you need to specify the $include-html-classes variable as false, here's what it looks like:

@import "foundation/settings";
$include-html-classes: false;
@import "foundation";

Note that the paths may differ based on your own setup. This will allow you to use all the mixins, functions and settings in Foundation, without having to duplicate all the CSS. This is handy if you are already including the Foundation CSS on the page you are working on. This method could, for example, be used as a place to store all of your overrides for a special page or subset of pages.

In Conclusion

This is just the tip of the iceberg: Foundation and Sass both have much more to offer and both have large followings of developers that continue to make them both more advanced, and well, better.