Jedidiah Lachmann

It seems like responsive web design/development is the biggest catchphrase in the web world these days. And for good reason, slightly outdated research shows that 7% of all web traffic comes from mobile devices and that number is growing every day.

I’ve been implementing responsive layouts for about 6 months now. When I first started looking around for a responsive CSS framework, I was immediately struck by the simplicity and awesomeness of the Foundation Responsive Framework by Zurb. I first saw this framework used on Eric Paul Snowden’s Site.

Foundation is a “Rapid prototyping and building library from ZURB.” The parts I have found most useful are the included CSS reset, the global styles, and especially the fluid grid. The grid is twelve columns and infinitely nestable. Here’s a little code example:

Which outputs this:

So what are we looking at here? Well, the grid is built around three key elements: containers, rows, and columns. Containers create base padding for the page; rows create a max-width and contain the columns; and columns create the final structure. Everything on your page that you don’t give a specific structural style to should be within a container, row and column. If you resize the page, you can see what happens to these columns on small screens.

Foundation makes it extremely easy to mock up websites either from a .psd or even from scratch. Using .psd’s seems a bit outdated to me as these days we are not building static websites. (i.e. the design varies so much from device to device that you would need several .psd’s to cover all devices.) With foundation you’re able to design layouts for desktops, tablets, and phones simultaneously.

This site as well as many of the sites I’ve worked on during the past few months have made heavy use of foundation. To get started you can download foundation and read the documentation here.