Tyler Tate
June 6, 2009

The 1Kb CSS Grid, Part 2

Guest post by Tyler Tate
Tyler builds websites and web apps for Vyre in London.

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.

different grids depending on the template

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.

UPDATE (20 Jun 2009): Read the last part of the 1KB grid series here.


Your comments