Alex Kehayias's Blog

Find of the week: Foundation CSS

Foundation is an awesome responsive css framework from Zurb. I usually use 960gs, but after playing with Foundation for 5 minutes I decided to use it for my current project. 

Here’s an example of it: http://nudgelystaging-qu6we2kn.dotcloud.com/

Why is it cool?

It will automatically resize your layout based on the screen size or device. For example, once the browser width reaches a certain size it will switch to a single column layout. You can customize your layout based on the device that is viewing the site too. That makes it exceptionally awesome for building a website that looks great on all platforms without having to build your own mobile site by hand. Click my link above and shrink your browser window to see what I mean.

Switching from 960gs to Foundation

The switch from 960gs to Foundation was pretty easy. All that really changes is the inclusion of a script and syntax changes for specifying your layout. Instead of “grid_12” you would put “twelve columns.” Additionally you have to specify a “row” with <div class=”row”> which I thought was cumbersome at first but is actually easier. You won’t have to clear your floats with a <div class=”clear”> like you would with 960gs. Even better, Foundation makes nesting infinitely easier than 960gs because you don’t have to fumble with the alpha, omega classes for nested grids. <3

What about the other UI stuff?

I tend to write most of my own UI stuff, but there are some useful things in Foundation for prototypes such as tabs, buttons, and modal dialogs. There is a nice jquery content slider which is pretty cool, but I don’t have much use for it. I did test it out and it was easy to get up and running. They have some good defaults for making quick prototypes, but for the most part you’ll be styling your own. 

Compass and Foundation

Lucky for us compass users, there is a plugin for compass that get’s you set up with Foundation. You can find it here.