BluprintCSS Framework

The newest version and newest tools make this CSS framework very useful for many page layouts.

If you are involved in web site development in any capacity then you probably know that table-based design layouts have been, for the most part, completely abandoned in favor of CSS controlled layouts. Not only are CSS-based layouts just tons more capable, they also have more of a separation between the code that provides content and structure of a page layout and the code that defines how the page looks. It is SO nice these days to not have to look at page source that is crowded by a bunch of font tags that only define the size and color of text on the page. Server bandwidth has definitely benefited from this switch and CSS-based pages download faster. It has been so long since I have coded with tables and font tags that when I have to do layouts with tables and fonts (this is still the safest way for HTML emails) I find myself checking references to remind me of some of the attributes for these HTML tags.

Some History
CSS has definitely been a blessing for us web developers, but it hasn't come without its challenges. Table-less CSS layouts have never been a complete cakewalk. It used to take all kinds of CSS hacks and trickery to get a cross-browser layout. There have been a dozen different ways to code the common 3-column layout - all claiming to be the best. As browsers have matured over the last few years so have the ways in which we code CSS layouts. We now avoid using CSS hacks to deal with different browsers. The newest browsers are displaying things in a more common fashion and the methods are fitting into more of a "coding standard." Yet even with these advancements, there is always that unusual design that throws in a monkey wrench and you need to strip off all the parts and build it up again. I found myself duplicating a large part of my CSS from past projects (especially that which formats text) but also writing a lot of it from scratch. This was part of the fun for me, but it also took so much time. I also usually had separate CSS files for layout and typography to kind of categorize the code. There was talk around the Internet about having base CSS files for every project and maybe, perhaps, even a CSS code framework. Code frameworks are sweeping through the web development world. There are now a bunch of very cool JavaScript frameworks, several PHP frameworks, Ruby on Rails, and Python's Django. Frameworks have been in the Java-based web world for years. Why not CSS? The controversy was over applying a Framework to a coding language that was supposed to be very specific to layout. Many asked how it could ever be possible to create an adaptable CSS framework without a gluttony of unused code.

Along Comes Some Clever Code
Back in August a young tech student from Norway, named Olav Bjorkoy, meekly posted his coding project on GoogleCode. The project that he created, with the help of several others, was a CSS framework called BlueprintCSS. The BlueprintCSS Framework, quoting the project page, "aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing." It is a clever system of CSS files that resets all element spacing, sets a typographic baseline and line-height, sets a print style sheet, provides cross-browser support, and (here is the cool part) sets up a grid system for layouts. It also sets up, with examples, a plugin system that allows you to extend the framework.

The Controversy
When BlueprintCSS was presented to the public it was both embraced and criticized. Reading the comments in the tutorial section of the Wiki gives you a hint of the controversy over a CSS framework. The main criticism is that in order to use the layout grid system of BlueprintCSS (really the best part) you have to put class names within the HTML that defines display attributes. To some developers, this completely "breaks the rules" or goes against some of the goals of CSS. This could prevent the layout from being changed by just changing the CSS that is styling it - which is the big argument for keeping display or non-semantic code out of the HTML. This ability allows developers to easily switch layouts based on what device is viewing the page, whether it be a web browser on a PDA, phone, or computer. This is a strong and valid argument against a system like BlueprintCSS, and I think just like any other programming technology a developer needs to weigh the site's requirements against the advantages and disadvantages of that given technology. Also to completely discount a new technology you need to investigate it and use it. With some of the new tools out there for BlueprintCSS, especially the Blueprint Grid Generator, I am not so sure that doing a layout switch based on a viewing device is completely impossible.

The other argument against BlueprintCSS is that it doesn't take into consideration the source order of content, thus reducing the Search Engine optimization by not keeping the "real" content of the page up high in the source code. Some developers have posted CSS solutions to this. I am not an SEO expert and cannot verify whether this is really a valid concern. Do Search Engines like Google really stop at 50 or 100 lines of source code when they are indexing a page? I would really like to know the answer to that question. Looking at the source code of many e-commerce sites that consistently rank high, I have my doubts about this argument.

Some developers also don't like CSS frameworks because they are worried about new developers using them as a crutch and relying on the framework to do all the work. They worry that new developers won't take the time to really learn such an important language like CSS. Perhaps, those inclined to take shortcuts always will. In my experience with Blueprint I have found that it doesn't do everything for you. Using it still requires a good knowledge of coding CSS and a thorough understanding of CSS concepts like the box model, inheritance, and the difference between id's and classnames.

The Coolness
Still with these semantic issues aside, I don't think anyone can deny that it is a clever collection of stylesheets. The first time I tried it, I was able to code the base structure for a custom 3-column layout with header and footer in about 15-20 minutes - and it had support for printing and IE 6. To me, this is a really, really cool thing! Excited, I then used it for a custom Wordpress blog theme and I was quickly able to move from creating the HTML templates to styling every little element within the blog to match this new theme. I can say it cut the time to do this by at least a third. Hooray for Blueprint!

Nothing's perfect
It definitely speeds up coding HTML templates with BlueprintCSS if the designs were done on the same grid that the CSS framework is built on. Designs not on the grid do take a bit of extra code and tweaking. Steven here at Moto has done a couple of web page designs based on the standard BlueprintCSS grid and he said that he really didn't find it all that restrictive. A really unusual site design may completely negate the advantage of using Blueprint. Nothing works perfectly for everything. On the other hand, with new tools like the Blueprint Grid Generator the grid dimensions might be very easily changed to fit the design.

The other small "gotcha" with Blueprint is that if you have the need to really stray away from the base typography style sheet - especially the spacing - you need to be sure and thoroughly override the style selectors for common HTML elements like headings, paragraphs, list elements, etc. Override? Yes, I leave all the files of BlueprintCSS alone and add a link tag or import statement for a separate CSS file that holds all the styles for the design that I am creating templates for. I call it something like "theme" or "layout" and I +make sure that the reference to this style sheet is after the references to the Blueprint CSS files. Using this method allows the Blueprint files to be updated and overwritten without affecting the customized styles. I think this is the intended use and I think the way most developers are using the framework - if they choose to use it.

If you haven't noticed, I like this new tool
The BlueprintCSS framework is a very clever and useful tool for web developers, but it is not a magic-do-everything tool in the toolbox. There are probably going to be cases in my job where using BlueprintCSS doesn't make good sense. For many of the designs that I code templates for it is going to come in very handy and cut down on coding hours. I can see it being especially useful for web applications like web administration tools or content management systems. The new Blueprint Grid Generator especially made the framework more useful. I look forward to new versions of BlueprintCSS. Hopefully it will continue to grow and mature.