Scott Phillips is a web developer working at Drake University in Des Moines, Iowa.
Do you get a feeling of déjà vu every time you begin a new web project? Do you smack your forehead trying to remember the best way to get something to render correctly in IE6? …again? Do you refer back to old sites when choosing font-families and sizes?
There is a better way.
Learning how to wield the mighty powers of CSS is important, but you don’t have start coding from scratch every time. CSS frameworks can save a lot of time and even make your site look better in the end.
What’s a framework?
CSS frameworks are like Legos. Combine their simple building blocks in thousands of different combinations to create a clean and usable layout for your site. Once these basic elements are in place, go wild adding your own custom headers, footers, backgrounds, bullets– whatever you’d like. All of the frameworks discussed in this article include support for multi-column layouts and readable typography. Some go further with classes for design elements like navigation menus, pull-quotes, lists, forms, and more.
How do I use them?
Generally speaking, all you need to do is add the framework’s classes to certain XHTML tags and include the needed CSS files in the header of your document. In a matter of minutes you’ll have an attractive (yet basic) layout. Of course, each framework has it’s own documentation, examples, and tutorials.
- Save time. This is the biggest advantage of using frameworks. They give you a huge head-start on your CSS. All of the tedious/boring stuff is done, freeing you to spend time on more creative things.
- Best practices. Many talented developers contribute to frameworks. Take advantage of their expertise. For example, the hot topics of Grid-based layouts and vertical rhythm are concepts borrowed from the print world. Even if you aren’t totally sure how they apply to the web, CSS frameworks can help you take advantage of them.
- Cross browser support. Convincing different browsers to render a design consistently has always been a pain. Frameworks have built-in fixes for the worst offenders.
- Not always semantically meaningful. A basic tenant of good web design is to separate presentation from content to produce readable and maintainable code. CSS frameworks require compromises that may get the purists among us a little upset.
- Bloated code. Do you really need support for 24 columns when you only use three? Probably not. In reality, however, the file sizes of all of these frameworks are reasonable. You could always strip out unused portions is file size is a really big concern.
- Don’t use it as a crutch. It’s important to understand what is happening under the hood of a framework. Each one has a learning curve. You’ll need to spend time understanding how they are built, their strengths and weaknesses, and how to customize them.
Blueprint CSS is my first choice in CSS frameworks. It is lightweight, easy to understand, and produces very attractive grid-based layouts with minimal effort. In addition, its typography choices (everything from headers to lists and addresses) are readable and attractive. It’s not perfect, however. Although Blueprint wasn’t the first one available, it has generated a lot of buzz and developed an active community since it’s release in August 2007. There is currently no built-in support for flexible-width layouts. I’ve found at least one online Blueprint CSS editor, but it’s not nearly as nice as the YAML’s (see below).
YUI Grids CSS
Yet Another Multicolumn Layout (YAML) is yet another framework worthy of serious consideration. In fact, it may become my go-to framework in the very near future. YAML hasn’t received the amount of attention that some other frameworks have due to the fact that it was originally written and documented in German. It should not be overlooked. A few of its many strengths include a focus on fluid layouts, exceptional documentation, and the truly impressive drag-and-drop YAML Builder.
960 Grid System is a newcomer to the scene. It is very similar to Blueprint but has different design considerations like wider margins. 960 also lacks a number of features that the author considers unnecessary (like a baseline font size). 960 includes printable grid paper and template files for Fireworks, Photoshop, OmniGraffle and Vision. Even if you don’t use the framework, these will make a handy edition to your web design arsenal.