Monthly Archives: August 2012

CSS Frameworks: Foundation

CSS Frameworks: Foundation 3 by Zurb

A couple of weeks ago I wrote this post about css frameworks pros and cons. After reading Dan Cederholm’s critical opinion about ready-to-use frameworks, I decided to check them out myself. This is the first of several blog entries on the topic of CSS frameworks planned for the next while. It describes my experiences with Foundation from Zurb.

General Information

Foundation is a CSS framework developed by Zurb, a product design agency with long years of experience on the web. It is described as

the fastest way to prototype responsively, and to take that code and go right to production.

It features responsive 12-column grid that allows for creating websites for all sorts of devices. Columns don’t have fixed width and scale depending on the resolution and viewport size. The grid allows for nesting down so it can be used to create quite complex layouts.

Foundation also contains styles for buttons, navigations, tabs, forms and even sliders. This means that very little extra css code is ever needed to complete a website. The framework is relatively complex and should be sufficient for any type of website. For more detailed information on available features, check the documentation page.

You can use one of three versions of the framework:

  1. Default CSS – minified CSS file used to build on top of it
  2. Customized CSS – you can customize the CSS you are going to download to change some colors and remove the elements you know you are not going to use
  3. SCSS – you can download and edit Foundation using Sass and Compass

You will also be lead by the hand through the installation (or downloading) process.

My Experience with the Framework

I used Foundation to build a relatively small portfolio website for a creative writer and project manager.

The first impression one get when starting with Foundation is that it is very easy to learn. Great documentation offered by Zurb explains step-by-step how the grid is built, how to use it, and how are the different elements styled. That is definitely a perk, especially for those who reach out to a framework to build quick prototypes.

This impression is further helped by clean, understandable and well-commented CSS code.

The layout was not designed based on any particular grid (which is always a bit of a disadvantage) but Foundation’s flexibility dealt with that issue with little problem.

Due to the variety of styles for different elements that Foundation offers the CSS code is pretty long:

  • lines of CSS code to begin with (including comments and breaks , formated as by Zurb and coming from the customized version): 908
  • lines of css deleted: 377
  • lines of CSS added (including styling for Jquery plugins): 139

Advantages

  • Easy to use and learn
  • Great documentation
  • Exhaustive styling
  • Valid, good quality code
  • Responsive
  • Designed with both speed and user experience in mind

Disadvantages

  • Not useful for small pages due to too much overhead code
  • Lack of comments in the html part of the framework
  • You can build very complex layouts and very different style than the one offered by Foundation with Foundation. But then it is probably easier to start from scratch then with the framework.

Who is it for?

I think that Foundation is great for putting together quick prototypes. It is also a good tool to learn how to build responsive websites that scale gracefully depending on the device. It is also very useful for large but “boring” or template-happy designs like company sites or webshops.

I would however not recommend it for small websites because of the complexity and robustness of the code. Also more alternative websites with unconventional layouts will probably profit from being built from scratch rather then being based on Foundation.

Summary

In short, Foundation is a great and robust tool for building responsive, user-friendly websites. However, it is not for everybody. It is my first CSS framework I worked with so I cannot draw any comparisons but based on my own, personal experience I would probably give it 4 out of 5 stars.