Chris Mallinson

I’ve hated almost every CSS framework I have come across. I’ve always viewed CSS as something very unique to every site. Since every single view of your content involves parsing a CSS file, I feel it really needs to be as optimized as possible. CSS frameworks have always added a bunch of code that would never be used.

Let me step back a bit for a minute on that thought. I’ve become a bit of a handyman lately. I’ve got a really old house, and I’m always fixing or building something. I’ve got lots of tools, and I’m always misplacing them. A while back, I found a cheap tool-bag at a hardware store. It’s a small bag that I can carry anywhere, so I went through all my tools, and everything that I’ve used in the past year, I put into the bag – all nicely organized. When I’m working around the house, the bag comes with me, and even though there are a few things in the bottom of the bag that I don’t use too often, having them at my fingertips saves me a trip to the basement, and prevents me from stripping a bolt by using vice-grips instead of the proper crescent wrench.

I’m coming around to the idea that 12k of CSS isn’t going to hurt anyone. That’s the size of my compressed version of Blueprint CSS, including basic reset, and base typography directives, and the grid. The grid is the key to Blueprint CSS. The reset and typography stuff is nicely done, and tremendously useful, but the grid holds the power. Now I’m pretty comfortable laying out even a complex site using floats, clears, and block level elements, but in programming, whenever you find yourself repeating similar tasks over and over again, it’s time re-use some code.

Blueprint’s grid framework allows you to assign each of your div elements a column span value, which corresponds to a 24 column (by default) grid, 950 pixels wide. Your divs are assigned a width using classes, and can be nested in any way you like. It is also possible to apply padding and adjustment to divs using the same grid. I’ve used Blueprint CSS for only a couple of sites now. One was adapted from an existing design, and one was built from scratch. In both cases I was able to save a lot of time by starting with a base grid.

If you don’t like the default width, or the amount of columns, there is a handy tool that will adjust the grid.css file to match your needs. (Blueprint Grid CSS Generator)

Blueprint CSS Home Page

For now, I’m sold on this framework, and I plan on using it for a few upcoming projects. I’m okay with the size of the files for now, but If I were to use it for a very high traffic site, I might think about stripping out any unused classes.

eqzx8us3ta

Tags: Blueprint, Frameworks

This entry was posted on Monday, June 22nd, 2009 at 10:05 am and is filed under CSS, Programming, Uncategorized, Web Standards. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.