Since Paul wrote some posts on JavaScript frameworks before (part 1, part 2), I thought I’d mention something about CSS frameworks. I’ve begun using them on several projects and have found them to be a huge help. I find that laying out the page is easier, the most common styles are already set and browser bugs are few and far between.
What the heck is a CSS framework?
It’s pretty much a library of pre-built styles that help with designing a Web site. The goal of using a CSS framework is the same as other programming frameworks — to speed up development and ease collaboration between developers. A List Apart wrote a good article on the subject.
Usually, when beginning to style an XHTML page, I’d start with a few basic styles to override some of the browser’s defaults. Then I’d throw in a few other styles for hidden “skip-to” links and basic typography style. This would save me a load of time and without realizing it, I was using a CSS framework!
Other designers used similar methods and one of the first to become widely adopted was Eric Meyer’s “reset styles.” It was a set of styles that would override a browser’s default styles and give the designer a blank canvas eliminating a lot of browser testing.
CSS frameworks have taken this one step further and have included styles for typography, forms, browser bugs and layout grid systems. The methods in which styles are applied have structure so one designer doesn’t have to decipher another’s naming conventions.
This sounds awesome. What’s the catch?
The problems with using a CSS framework have to do with excess code and non semantic mark-up. In order to make the code modular and flexible, it starts to get redundant and you end up having to apply multiple classes to the same element. Frameworks also have a lot of styles that you may not end up using. Fortunately, you can simply remove those.
So, what are my options?
Here’s a small list of CSS frameworks out there: (Check Wikipedia for a more complete list.)
- 960 Grid System
- Blueprint
- BlueTrip (based on Blueprint)
- Boilerplate (based on Blueprint)
- Elements
- YUI Grids CSS
What CSS framework should I use?
This pretty much depends on what kind of project you’re working on. A small site may only need basic typography styles while a large, multi-column site may require a complex grid system. You’ll have to browse the different frameworks available and see which one has the features you need.
Do all of your sites use the same typography or have the same layout? Because CSS frameworks are pretty modular, you might want to consider rolling your own. Once you get comfortable with using then, you can mix and match parts from one framework with another and add your own styles to the mix. Just remember not to repeat styles.
So, which one do you use?
I have to admit, I was skeptical about CSS frameworks. I wanted my code as streamlined and as clean as possible. The extra bloat and un-semantic mark-up some frameworks added made me turn my nose up in disgust. Eventually, curiosity got the better of me and I gave it a try. Now I’m hooked.
After playing with a few, I’ve almost settled on one set-up. I found that Blueprint was the most robust framework. It takes care of pretty much all the basic styles I use and the layout system works in all modern browsers thanks to the included Internet Explorer style sheet that keeps almost all of IE6’s problems from ever showing up. Any other styles I don’t need, I can easily remove.
I’d settle with just Blueprint but the grid layout, with 10px gutters, doesn’t suit my designs well. I prefer the 20px gutters of 960 Grid System, so I think I’ll roll my own framework using Blueprint, the grid structure of 960 and a few of my own styles.
Give it a try
The next time you design a site, give a CSS framework a try. You might have to try a few to find the right fit, but once you get one down you’ll be building out your designs faster and dealing with fewer browser bugs.
I created BlueTripCSS and just wanted to say thanks for the mention. Best of luck developing your own framework. I’d love to see how it turns out.