CSS Framework

It is very interesting to read this Frameworks for Designers article from A List Apart by Jeff Croft. I found the following "How should a CSS framework be built?" part is very useful one for those who are really looking for a CSS Framework.

How should a CSS framework be built?

There are several possible ways to go about building a framework, but the most common and arguably the most useful is to abstract your common CSS into individual stylesheets that each cover a particular part of the whole. For example, you may have a stylesheet that sets up the typography and another that handles the mass reset. The beauty of the approach is the ability to selectively include only the styles that you need. You may end up with six or seven different stylesheets in your framework, but if a particular project doesn’t need one or two of them, they don’t have to be included. The framework we created in our office has five stylesheets:

• reset.css—handles the mass reset.


• type.css—handles the typography.


• grid.css—handles the layout grid.


• widgets.css—handles widgets like tabs, drop-down menus, and “read more” buttons.


• base.css—includes all the other stylesheets, so that we only need to call base.css from our (X)HTML documents to use the entire framework.

We then store the framework in a single location and have every site pull it in from there. Then, of course, there are also site-specific stylesheets for each site which overwrite and add to the framework’s default as necessary.