Over the past few years, CSS frameworks have become popular web development options. And there’s no shortage of opinions on their usefulness.
For those who don’t know, CSS frameworks are collection of CSS templates that set up such things as basic typography, form styling, grids and simple layouts, and resets.
Why would you use a framework? Well, there are lots of reasons. In addition to saving you time, they can help you standardize the structure of your sites, avoid dumb little mistakes, and ensure browser compatibility. And if you’re building out a few sites that will be related, it helps to start with an underlying structure that can be duplicated as needed.
Sounds pretty compelling, right? But there are reasons not to use them as well. A framework might be too much for the site you are designing; it may be unnecessary. Frameworks also tend to use cryptic class names, which are not always clear.
Take for example, this possible stack of classes one could build using the BluePrint framework:
<br />
<div class="prepend-20 span-1 append-1 last"><br />
<p>This is my Content</p><br />
</div><br />
Not too clear what that class does, is it?
Here are a few of the most popular frameworks:
BluePrint
BluePrint is a CSS framework that aims to cut down on your development time. It gives you a solid foundation on which to build your project, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.
960 Grid
The 960 Grid system is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
Elastic
A simple CSS framework to help you lay out web-based interfaces, Elastic is based on a four-column printed layout technique, but it’s capable of unlimited column combinations and makes elastic, fixed, and liquid layouts easy. The Elastic CSS framework provides a set of helper classes that enable you to accomplish hard things through pure CSS techniques, such as same-height, full-width, and vertical-center options.
Yahoo! UI Library: Grids CSS
While other frameworks include support for text and reset documents, the foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4 kb file provides over 1,000 page-layout combinations.
Tripoli
Tripoli is a generic CSS standard for HTML rendering. By resetting and rebuilding browser standards, Tripoli forms a stable, cross-browser rendering foundation for your web projects. Tripoli is not technically a framework. It doesn’t tell you how to code your web site. Instead, it forms a solid HTML rendering engine and a base for creating dynamic layouts without interfering with typographic measurements.
Are CSS frameworks right for you? It’s a matter of preference. I personally like hand-coding CSS classes as I need them. For me, it’s faster than poring though a list of style definitions. But some people find them very useful. Do you have a favorite CSS framework that you don’t see on the list here? Let us know.
Comments