Part I
CSS frameworks have become quite popular over the past couple of years. Some of them try to fit in everything: a grid system, a style reset, basic typography, form styles, you name it. Others focus solely on the grid, but still end up a bit bloated.
With added complexity comes… well, complexity: a steeper learning curve, increased development time, and — cringe — tougher debugging.
Here is a fresh take on the CSS grid (loosely based on Nathan Smith’s 960 Grid System). Its mission is to be lightweight. And, as I’ll show in part 2, it can be used to streamline page templates for content management. All this in just one measly kilobyte (actually, 662 bytes, but who’s counting).
12 Columns, 960 pixels
The basic configuration is a 12 column grid system spread out over 960 pixels. Each column is 60 pixels wide with a 20 pixel gutter in between. While this is what I typically use in my designs, you could easily apply the same technique to other widths and other numbers of columns.
The CSS
Lets jump right in an have a look at the CSS. As you would expect, there is a class that corresponds to each of the possible column widths, units 1 through 12. We mentioned that each column is 60 pixels with a 20 pixel gutter between each column. Thus ‘.grid_2’ is calculated as 60 + 20 + 60 = 140 pixels.
In addition to the column widths, there are only two other classes defined: ‘column’ and ‘row’. The column class has a margin of 10 pixels applied to both the left and right edges, resulting in a cumulative 20 pixel gutter. Also note the ‘overflow: hidden’ attribute applied to both column and row. The real purpose of this technique is to clear floats, circumventing the need for a ‘clear: both’ declaration. Finally, we need to set the ‘display: inline’ property on ‘.column’ to prevent the double-margin bug in IE6.
.grid_1 { width:60px; }
.grid_2 { width:140px; }
.grid_3 { width:220px; }
.grid_4 { width:300px; }
.grid_5 { width:380px; }
.grid_6 { width:460px; }
.grid_7 { width:540px; }
.grid_8 { width:620px; }
.grid_9 { width:700px; }
.grid_10 { width:780px; }
.grid_11 { width:860px; }
.grid_12 { width:940px; }
.column {
float: left;
margin: 0 10px;
overflow: hidden;
display: inline;
}
.row {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
The HTML
The HTML is as minimal as the CSS. Each column contains a class indicating its width. Columns are then contained by a row, which serves to clear the floating columns (and is also instrumental in page templating, to be discussed in part 2). The only thing to remember is that the unit of columns inside a row must always add up to 12 (it is a 12 column grid, after all).
<div class="row"> <div class="column grid_4"> </div> <div class="column grid_4"> </div> <div class="column grid_4"> </div> </div> <div class="row"> <div class="column grid_8"> </div> <div class="column grid_4"> </div> </div> <div class="row"> <div class="column grid_2"> </div> <div class="column grid_4"> </div> <div class="column grid_3"> </div> <div class="column grid_3"> </div> </div>
Take it for a spin
That wasn’t so painful, now was it? Beats going to the dentist, at least. Take a look at what we’ve accomplished so far. Then, download the demo and get cracking!
Tune in for part 2 and discover how to use the grid to streamline your page templates for content management.
Part II
In Part 1 we covered how to setup a lightweight CSS grid. I promised that this same grid could streamline the way page templates are used in content management. Well, here we go!
One is better than two
Every content management system is driven by templates. The beauty of the template is that an entire site can be updated by editing just a single file.
But imagine a website that has two distinct layouts: one layout for the homepage, a second layout for all the other pages of the site. In this situation you would typically require two separate template files. This means that in order to make a site-wide change, you would now have to update two template files instead of just one.
Now, two templates are manageable. But what about a site that requires many different layouts? I recently worked on project that had — no joke — 23 unique page templates, each page with slight differences from the others. Suddenly what should have been a 1 minute change took half an hour!
The solution
Fortunately, the tidy rows of our CSS grid can be used to reduce the number of page templates required.
First, lets add an ID to the body tag to indicate the current page. Most content management systems provide a mechanism for accomplishing this, and it’s a good practice even if you don’t use this grid.
body id="home"
body id="subpage"
Second, lets add an additional class to each row of our grid that describes the columns within. For example, we could add a class of row_6_6 to a row that contains two columns with a width of 6 units each.
<div class="row row_12">
<div class="column grid_12"> </div>
</div>
<div class="row row_6_6">
<div class="column grid_6"> </div>
<div class="column grid_6"> </div>
</div>
<div class="row row_9_3">
<div class="column grid_9"> </div>
<div class="column grid_3"> </div>
</div>
Now for the important bit. Lets create a new CSS file named layout.css. Here we can tell the browser to display certain rows when the body ID is set to home, and other rows when the ID is set to subpage. We can accomplish this by hiding all the rows by default, then showing just the ones we need.
.row {
display: none;
}
.row_12,
body#home .row_6_6,
body#subpage .row_9_3 {
display: block;
}
Fresh out of the oven
We now have all the necessary ingredients to facilitate different layouts on different pages from a single template. See the homepage and sub-page in action, then download the demo.
By creating a single template that defines the layout for all the pages of your website, you can drastically reduce the number of templates in use. Fewer templates mean simpler development and quicker maintenance.
The disclaimer
I should leave you with a few words of caution. First, this font-end technique should only be used after all server-side options for consolidating templates have been fully explored. Second, hiding unused rows should only be done when little or no content is inside those rows. Hiding large amounts of content will raise a whole host of issues and is best avoided.
Tune in next time for...
In the third and final installment we will look at how to implement nested rows (that’s rows within other rows). Until then, adios.
评论