X Close

Digital Presence Blog



Taking a look at CSS frameworks

By Nick Dawe, on 10 September 2008

I’ve really been quite ignorant of the use of CSS frameworks, and felt that I needed to investigate how they worked, and whether they could be used to speed up website development. The idea of a CSS framework (just like frameworks for other programming languages) is that developers can take advantage of core CSS items that are abstracted and therefore able to be used again and again through different sites.

For instance, when developing a site, I often find myself using the following CSS declarations:



… ad nauseum. I’ll also always use Eric Meyer’s reset.css code, and so in effect I’ve already constructed a very basic framework of commonly used items.

At the moment, there are now dozens of detailed frameworks available, that will contain reusable items like grid layouts, clean typography, possible ‘widgets’ (e.g. drop-down menus etc). The ultimate aim of course, is that developers can take one of these frameworks, and in a short time create a standards based CSS layout that looks good and theoretically works well on all systems.

Screenshot of Blueprint CSS framework being implemented

Above: Screenshot of Blueprint CSS framework being implemented

This sounds fantastic, and after looking at some frameworks available, I’ll certainly be trying to create a framework of common items that I tend to use repeatedly, which will (hopefully) speed development time up.

However, the downsides are interesting. Including the framework in your site will probably mean that you’re also loading many unused items (this is especially true for some of the more comprehensive frameworks available). If you’re relying on frameworks for layouts, I’d also imagine you’d find yourself frustrated when trying to make small layout changes that haven’t been covered by these frameworks. One further point, and possibly most important of all, is the semantic effect of using this kind of framework.

Many frameworks that are used for constructing layouts rely on generic classes such as ‘span-1’, ‘span-20’, ‘prepend-1’, etc. For the developer these are descriptive of the CSS properties inside each class (e.g. span-1 might refer to a width of 10px, and span-20 might refer to a width of 200px). But this bears¬† absolutely no relation to the content within the various divs that might use these items. With all the talk of the semantic web, surely it’s worth ensuring ids and classes are more descriptive; that sidebars, news feeds, footers, etc. can actually be identified as such. Of course, it’s always possible for developers to add and edit CSS and HTML to make up for these problems, but that’s surely beginning to defeat the time-saving point of the framework.

Personally, I’m at least inspired to create more formal frameworks for my own development work, but currently won’t be using these methods for more detailed work, such as layout. Having said that, this is the web, and so I’m sure it won’t take long for these issues to be dealt with and for some more ‘mature’ frameworks to be made available.

See also: