CSS Frameworks and When to Use Them

You may have heard or read comments similar to the following about CSS frameworks:

"They are not flexible enough."
"It's too much useless code."
"I like to keep my CSS clean."
"Why do I need a framework if I know what I'm doing?"
"The site is not going to change, so we don't need a CSS framework."

A CSS framework cannot be expected to be the final solution to all your problems, but it can be a useful tool for structuring and theming your site more efficiently. Read on to learn more about what CSS frameworks are, pros and cons of using them, existing framework options, and related themes.

What exactly is a CSS framework?

Every time you start a new project there are several basic lines of code that you add to your CSS; you may want to remove the default margins added by the browsers, set the font size to 12px as the browser standard, create a popular layout, etc.

This is exactly what a CSS framework does, it gives you a nice set of code that takes care of these basic tasks for you.

"So, are CSS frameworks just a set of css files that I can add to my project?"

Not exactly. Some of them are, but others go even further to create a layout that allows you to work with more programatically created code. As you may know, you can't do arithmetic operations in CSS like "1em - .5em" or "1em + 2px", use inheritance as you would with objects, or use conditionals or loop clauses.

To explain how these more complicated frameworks work goes beyond the scope of this post, but if you are interested, take a look at Scaffold and Compass.

Pros and Cons of using a CSS framework

Before starting any coding, be sure to have a strategy; this is the paper and pen phase that we've all heard about and almost none of us does. It is very easy to look at a framework as inflexible, so before jumping to this conclusion, ask yourself:

• Have you chosen the right framework?
• Was your design created with the notion that had to fit an existing CSS grid?
• Are you aware of how a framework offers more than just a tool for layouts?

In my experience, the layout becomes more challenging when we try to use a framework, but the benefits to your CSS lie in decreasing the amount of code needed for your layout overall. Another thing that any good CSS framework takes care of is the well known list of IE CSS bugs. You will also find solutions for a standard CSS template for HTML elements, which is really helpful since every browser renders the HTML elements a little bit different. This template will also help you with cross-browser proofing your fonts and line heights, making it a little bit easier to work with em's for your font sizes instead of px.

Existing Framework Options

The list of CSS frameworks available has grown to over 20 last time I checked; a Google search can give you an idea of the variety that is out there. I have worked extensively with YAML, Blueprint, and 960, but I also have had the chance to do some experimentation with: YUI Grids, Scaffold, and Compass.

One of the nicest things with YAML is their YAML Builder tool, which will help you to easily build layouts, however YAML is not a real grid system (as far as I understand a grid should be) and you may find the layout possibilities to be a little bit limited.

With Blueprint, I have a bit of a dilemma. I especially like what a good job they did with the HTML elements and fonts, so much so that sometimes I only take this part from the framework and build the rest of the CSS code separately. However, I don't like their standard grid dimensions (if I'm using a grid I prefer to go with the standard size to avoid future compatibility problems with other CSS code) but you can easily enough change the column's width and gathers to create your own grid.

So far 960 it has been the most useful for me. Again this is not the final solution, and although in this case I really like the grid system, I tend to fall in favor of Blueprint for the HTML elements and fonts CSS job.

And What About Themes?

If you are a Drupal themer you may now be saying to yourself "Ok, frameworks are cool but we are talking about themes over here, which theme should I use?" Themes are more than just CSS code, and when it comes to themes, I prefer those ones that:

• assist me with the hook theme system
• give me enough containers so I don't have to spend time creating templates
• leave the CSS code fairly blank

To be more specific, I would tell you the Zen theme is still my top choice, and the CSS code will depend on the individual project.

Just Try It!

Needless to say, before you launch yourself into the next project with the idea that you are going to use a CSS framework, you should practice with them a little bit first. Try to build a full page with two different frameworks, don't stop at the layout, but move on to applying the existing code to your content and see how well the framework manage IE bugs.

I hope that helps explain some of the pros and cons of using CSS frameworks. If you have any questions or comments, please leave them below.