Since I started using CSS, I have been trying to refine my skills and creating a base set of styles that I would apply to every site I created. Basically they would reset the whole page, give me some basic clearing and floating classes and then of course some very generic structure elements for header, footers and sometimes columns. I’ve even gone through the motions of splitting up the sheets into groups of styles that resided each in a predetermined file, which in time I have strayed from because this hurts optimization. Needless to say, I have been itching for a good solid layout structure where in that all the heavy lifting was done for me. In comes Blueprint.
Semantic schmantics
Now I am sure there are many people out there, probably most of the heavy CSS supporters, that are saying Blueprint is in by no means semantic, which is part of the premises behind CSS. This is where I have to agree and disagree to a degree. Yes, the class names for the grid structure of Blueprint are very arbitrary. Take in a code sample below:
1 | .span-3 { width: 110px; } |
Span-3? What does that mean? Well, to Blueprint, that means for the “column” you are defining on the page to span three columns. A three column width can be any set size and a page can be any number of columns fit into a set width. Currently, Blueprint is based on a 24-grid layout in a 950px wide area. The great developers at kematzy have developed an ingenious way to build your own custom grid based off of Blueprint. It can be found at http://kematzy.com/blueprint-generator/. Currently it only does the grid file, you will still need the other files from Blueprint if you choose to use them.
Now I agree that Blueprint can be very arbitrary when it comes to their grid layout, but remember I also disagree when people clamor about it being so. As code artists and designers, we each have our own artistic freedom on how to code the actual xHTML page. I don’t mind putting in an id parameter on a div to help solidify a meaning or even putting in a comment here and there. To me, saving me time on a project is a much better cost to benefit ratio than to worry about semantics. Including the id or comments are just as beneficial as a specific class name.
But wait, there is more!
Speaking of other files, Blueprint does come with a few extras. I only dabble with the grid, reset and typography files myself, but there is also a form set. Of course, I have tailored all these files to suit my needs, but they have definitely saved me time in defining the same styles over and over again. There are also some great Internet Explorer hacks for those of you that have to deal with conforming your design to a browser that is behind in standards. I can’t count how many times I have had to write my own just so it would render in one of the most hated browsers in the design community. Luckily, Blueprint takes care of all that.
Take it as you will
You can take this post with a grain of salt. Either you will see the benefits of using Blueprint or you will shove it to the side and keep making your own base structure. Trust me, once you’ve tried it once, I am sure you won’t want to write your own column structure again.