I have a confession to make. After eight years since we first met, I still don’t quite get CSS.
Sure, I can do typography, sprite backgrounds and understand the basics of the box model. I even know about browser-specific CSS extensions for CSS3 effects. But when it comes to clearing floats, vertically-aligning form elements or figuring out inline parents with block children, I go to a very dark place and start cursing.
I freely admit my CSS layout and positioning skills are lacking, and I probably shouldn’t even be blogging about it. But when I discovered CSS grid frameworks, I was naturally interested — anything that helps me get up and running quicker in a foreign language is a win.
Grid frameworks: CSS for dummies
For those that don’t know, grid frameworks like 960gs, YUI grids and Blueprint CSS provide a simple 12, 16 or 24 column grid that abstracts away complicated CSS layout and positioning rules.
For example, using the Blueprint CSS framework, this markup produces the following layout, neatly centered in the middle of the browser window:
<html>
<head>
<link rel="stylesheet" type="text/css" href="blueprint/screen.css" />
</head>
<body>
<div class="container">
<div class="push-4 span-15">header</div>
<div class="push-4 span-4">menu</div>
<div class="span-7">main</div>
<div class="span-4">ad space?</div>
<div class="push-4 span-15">footer</div>
</div>
</body>
</html>
How easy was that? As a CSS newbie, not having to worry about floats, clears, negative margings and other positioning tricks is a very attractive proposition.
So CSS grids are very powerful for quickly laying out elements. But there is a trade off you should consider — HTML marked up with grids is not at all semantic. Peppering your HTML with classes like .span-12 or .yui-t3 for layout is no better than specifying table widths and heights everywhere.
Wouldn’t it be great if you could keep using these grid classes, but somehow mask them behind semantic class names?
LESS: CSS preprocessor
About the same time I discovered grids, I stumbled upon LESS: a ‘leaner’ CSS command-line preprocessor that extends CSS with its own syntax and features. The .NET port, .Less, has a smaller feature set than the rails version, but it lets you do stuff like this:
.rounded_corners {
@radius: 8px; /* variables */
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded_corners; /* mix-ins */
img.logo { /* nested styles */
margin: (@radius * 2) + 1px; /* expressions */
}
}
#footer {
.rounded_corners;
}
I have .Less is setup as an HttpModule in my web.config. It intercepts any requests to *.less files, translates them to real CSS, and optionally minifies (compresses) them. So you can you can simply reference the .less file directly in your markup, with no extra compilation step required:
<head>
<link rel="stylesheet" type="text/css" href="site.less" />
</head>
Grid CSS frameworks + LESS = semantic grids
I’ve been using LESS for a few weeks now, and to be honest, I never want to go back to writing ‘raw’ CSS again. So what happens when you combine the CSS grid framework with LESS? Here’s the new stylesheet:
@import blueprint/screen.css;
div.container {
div.header {
.push-4;
.span-15;
}
div.menu {
.push-4;
.span-4;
}
div.main {
.span-7;
}
div.ads {
.push-4;
}
div.footer {
.push-4;
.span-15;
}
}
All that’s left is semantic class names using grids styles as mix-ins. Now the markup is looking acceptable again:
<html>
<head>
<link rel="stylesheet" type="text/css" href="site.less" />
</head>
<body>
<div class="container">
<div class="header">header</div>
<div class="menu">menu</div>
<div class="main">main</div>
<div class="ads">ad space?</div>
<div class="footer">footer</div>
</div>
</body>
</html>
Using grid classes as mix-ins gives us the best of both worlds — you get the power of the grid CSS framework, but without introducing layout concerns to your markup.
December 28th, 2009 | 3 Comments
