Blueprint CSS - Easier Cross-browser Web Design

One of the most tedious parts of web design and front-end development involves all of the browser CSS rendering inconsistencies. Internet Explorer 6 is notoriously difficult, and many web designers have done significant damage to their desks banging their heads because of problems with IE.

Luckily, in the past few years many designers have collaborated on projects and libraries that take some of the initial pain out of basic CSS wireframing and browser compatibility. These "CSS Frameworks" make otherwise tedious tasks and routines simple, allowing for faster development and more consistent results. By using sensible defaults for typography and grid structures, designers and developers can focus on the meat of design.

Neoteric has always hand-coded style sheets, something that allows for great deal of control and customization. As such, we have been wary of these CSS frameworks, despite their growing popularity. After all, it is hard to relinquish even the most mundane of tasks to expertise of others when you are convinced that you do things very well yourself.

Nevertheless, our own recent site redesign gave us the opportunity to try one of the most popular and well-regarded CSS Framework: Blueprint. Seeing our site redesign as a chance to learn something new, we cracked our knuckles and went to town on Blueprint.

At first, I was a little worried that Blueprint's grid would be limiting. After all, 24 columns in a 950px wide container seems too static for the look and feel we were after. However, Blueprint's grid structure turned out to be appropriate for our design needs. Also, in those times where things needed to be just slightly out of the grid for aesthetic reasons, Blueprint's defaults were easy to override. Because it uses all classes for its components, they are easily overridden with ID-specific styles. Note: You can actually change blueprint's default grid width, columns, etc using the utilities they provide. There is also a cool web utility that helps you with the math of rolling your own blueprint grid.

Another great feature of Blueprint's system is that it actually provides easy baseline grids, letting paragraphs in different columns align to the same baseline. This is accomplished using a 18px line-height for most elements, and 36px for larger elements.

Like any framework, blueprint could easily be abused. I would really only recommend it if you already have a solid understanding of CSS. Besides, any customization has to be done through your own stylesheets. Nevertheless, Blueprint CSS provides a good foundation and allows for more rapid prototyping.