Lately there’s been a lot of talk about CSS frameworks, their advantages and disadvantages, and why you should or should not use them. Myself, I was quite curious about the concept of a CSS framework, but frankly had no idea about what a CSS framework could be. Then I had to refactor an existing style-sheet based on blueprint CSS, and that’s how I learned how blueprint works.
Blueprint is probably the most widespread CSS framework out there; I ignore whether Josh Clayton, blueprint’s dad, was the first to think about CSS frameworks, but for certain blueprint was the first framework to get good coverage in the geek news.
Since I had to deal with it anyway, I said “Why shouldn’t I use this gig as an occasion to learn something new?” And I did indeed. Not sure the last line is graceful to the ear, but let’s roll on.
How I blueprinted at first
The style-sheet I was working on wasn’t exactly tidy. To tidy it up, I had to look into the infamous grid.css and try to understand what those weird “span-n” classes were doing. Luckily, all of blueprint source files [[I know what you're thinking, source files, what now, do I have to use gcc for a css style-sheet? Not quite, but we'll get there.]] are well commented and clear.
The basic concept is that your layout is divided i 24 columns. You can put div whose width is determined by the aforementioned .span-n class. Just remember:
- put all you columns in the
.container class
- to make sure you reach “24″ as a sum
- you include
.last in the last column of each row.
You know the headaches of creating a well-clearing three-columns layout? Here’s how you do that with blueprint:
<div class='container'>
<div class='span-6'>
left column
</div>
<div class='span-12'>
center column
</div>
<div class='span-6 last'>
right column
</div>
</div>
And this is it; but not all of it. You can add .prepend-n classes to prepend empty column, and .append-nto append them. You also have other nifty classes for hr, vertical lines and so on. In addition, and maybe more importantly, blueprint gives good typography [[Ever heard about vertical rhythm?]] and a CSS reset to make sure your website is cross-browser compatible. And it’s free.
So it is good, why shouldn’t I use it?
Ehm, what about semantic mark-up?
Exactly, that is the problem. Just when we managed to get rid of the tables and their meaningless cell classes, here comes a CSS framework which binds you to class names that are just referred to measures, not semantic at all. Also, someone with no awareness of the concept of semantic could (mis)use blueprint as a pseudo-table; .span-n could be seen as a regurgitation of the colspan attribute of td cells. And sure we don’t want that, do we?
Luckily there’s more
Earlier I mentioned the sourcefiles, and I am sure some of you startled and thought that they had to learn c to use blueprint. Luckily that’s not the case, although there’s some ruby behind blueprint’s magic. The stylesheet you are supposed to attach to your html files (screen.css,print.css,ie.css) originally result from the compilation of the source style-sheets (grid.css,typography.css ans so an, all in the src directory) according to certain criteria. You can choose to ignore all of this, or you can decide you want to be a good, semantic coder and become a blueprint superuser. You don’t have much of a choice, do you?
Welcome settings.yml
settings.yml is your best friend. Really, it is. This nice guy allows you to customise any aspect of the blueprint stylesheet. You might want more or less columns, wider ones, or more space between them. josh has a nice page illustrating how you can customise blueprint.
I have a settings.yml file in ~/developing/bluprint/lib, containing all the settings for each single project I am working on.
When I start a new blueprint-based project, I just add a new entry to this file.
What I want to stress is the importance of leaving the span-n class alone (unless occasionally and during wireframing) and use the semantic classes. These classes (or ids) are defined at the end of each project entry. What they do is associating a semantic name to a geometric blueprint class. Look at the entry corresponding to my current project:
personalproject:
path: ~/blahblah/personalproject/
custom_css:
ie.css:
- custom-ie.css
screen.css:
- custom-screen.css
custom_layout:
column_count: 24
column_width: 30
gutter_width: 10
semantic_classes:
"#featured": ".span-15, div.span-15"In the last section, #featured is defined as equivalent to .span-15, div.span-15. In this way my layout will contain this:
<div id='featured'>
blah
</div>
instead of this
<div class='span-15'>
blah
</div>
The difference is obvious.
And there’s more. Think about how easy it is to manage your layout this way. You don’t have to think about paddings and margins, you just think about columns, their number and their width. If I decide that I want to give a column more to my #featured article, I just alter a line in settings.yml: [[Of course you must also contract the following column, the sum must always be the same. ]]
"#featured": ".span-16, div.span-16"
and recompress through this terminal command:
ruby compress.rb -p personalproject
If you decide your whole website is too wide, just narrow the columns and recompile. And so on.
Of course your workflow has to adjust a little, but the advantages in terms of flexibility are enormous.
Blueprint is not a ghetto
Blueprint is perfectly suited for building an entire layout, but if you decide this is not your piece of cake, there’s no problem at all. All you have to do is insert one or more .containers into you css layout. I generally prefer to use blueprint for the main textual area, and leave the header (and sometimes the footer) alone. This way I can use wider divs for the background, and avoid using empty columns at the sides.
<html>
<head>[...]</head>
<body>
<div id='wrapper'>
<!-- This div has a nice background with shadows ad stuff -->
<!-- Here I often put my header -->
<div class='container'>
<!-- Here goes the blueprint stuff -->
</div>
</div>
</body>
</html>
How I blueprint now
Remember that first super-fast layout? Now we can remake it semantically. We just have to play a bit with settings.yml and compress.rb.
Here’s our settings.yml
semanticlayout:
path: ~/blahblah/semanticlayout/
custom_css:
ie.css:
- custom-ie.css
screen.css:
- custom-screen.css
custom_layout:
column_count: 24
column_width: 30
gutter_width: 10
semantic_classes:
"#left-sidebar": ".span-6, div.span-6"
"#content": ".span-12, div.span-12"
"#right-sidebar": ".span-6, div.span-6, .last"
And here’s a clear-as-crystal layout:
<div class='container'>
<div id='left-sidebar'>
left column
</div>
<div id='content'>
center column
</div>
<div class='right-sidebar'>
right column
</div>
</div>
Ain’t it nice? Fast, reliable, typographical and semantic.
