I recently sat in on a CSS framework “Battle Royale” at the 2010 South by South West conference in Austin Texas. CSS frameworks really speed up the web design and development process. We have designed sites with both the 960 grid system and blueprint before. There are a lot of differences between the five main css frameworks, which I will discuss below. Blueprint:
- Started in 2007
- Rendered well in IE6
- One of the first frameworks for css that was created.
- Nice reset’s built in.
- Cons: framework is based on only 940px.
960 grid system:
- 12 and 16 column versions
- 960 pixels wide, hence the name 960 grid system
- Uses push and pull classes
- Cons:
Object Oriented CSS
- Uses grids – 13 lines
- Template – 14 lines
- Rounded corner boxes – 29 lines
Sass
- Enhanced stylesheet syntax
- Generates CSS
- Has variables, mixins, nested selectors and calculations already computed.
Compass
- Built on Sass
- Ports of comon CSS frameworks
- Innovative frameworks and extensions
- Advanced helpers with an open source ethos for web design. This means that designers can exchange stylesheets from each other.
When someone is starting out and learning CSS, the panelists suggest that using a framework can help you learn hands on. I learned CSS through Lynda.com while I built the first Ad 2 San Diego site in late 2006. The organization of CSS has changed a lot since then, but the priciples are still the same.
Factors that go into the decision for picking the right CSS framework include how familiar you are with CSS and what the job details. 960gs can be a very good framework to whip up a quick layout. It gives you plenty of spacing and keeps the format very clean. If you need a more elaborate structure, Blueprint has more functionality.
In summary, if your web design can use a framework, then go for it. There are very good principles from each framework that can be used to really speed up the job.
