Page Layout with Body IDs
- February 3, 2009 2:23 PM
- User Interface Design
- Comments (1)
A while back I read about a technique to maximize the power of CSS: placing a unique ID on the <body> tag of your markup. Make each page have a unique body ID, and you can use CSS to override anything on that particular page if you want. I've played around with this a bit, and found it to be quite powerful technique.
I decided to test how much could be altered from a default state by first coming up with a default site design that worked for an example blog-like site (<body id="design-one">), but did not take advantage of the body ID in the CSS design. I then set about to create three other alternate designs using the same CSS sheet and identical markup, but distinguishing the designs by their body IDs (<body id="design-two">, <body id="design-three">, <body id="design-four">). I found that even with identical mark up, you can acheive some radical display changes. You can see the designes I built with this technique here, and you can download them from the link at the bottom.
While this techinque isn't exactly best used in these examples, they do show the range of changes that can be wrought without needing new mark up or a new style sheet. The best use of this technique is probably to customize elements on particular pages. For example, say that you had a page layout that had three main columns dedicated to your favorite bands.
<body id="main">
<div id="weezer">
<h1>Weezer</h1>
<p>... something about Weezer...</p>
</div>
<div id="kings-of-leon">
<h1>Kings of Leon</h1>
<p>... something about Kings of Leon...</p>
</div>
<div id="crash-test-dummies">
<h1>Crash Test Dummies</h1>
<p>... something about Crash Test Dummies...</p>
</div>
</body>
...
And you have come css like:
div.section {
background: silver;
border: 1px solid gray;
width: 33%;
float: left;
}
By default, all your columns are equal, but you also want to set up a landing page for fans of these three bands that emphasizes their band over the other two. So you made three new pages, and give them the same mark up but with diffrent body ids (<body id="main-weezer">, <body id="main-kings-of-leon">, and <body id="main-crash-test-dummies">). Then add the following to your CSS:
#main-kings-of-leon div.section,
#main-crash-test-dummies div.section {
width: 24%;
}
#main-weezer #weezer {
width: 50%;
background: lightblue;
border: 1px solid blue;
}
#main-kings-of-leon #kings-of-leon {
width: 50%;
background: lightblue;
border: 1px solid blue;
}
#main-crash-test-dummies #crash-test-dummies {
width: 50%;
background: lightblue;
border: 1px solid blue;
}
And suddenly your landing pages emphasize each of their bands.
Is this the best way to customize these pages? I don't know; they could be marked up with an "active" class on the targeted band, and that would actually save CSS in these examples. The concept holds though, and it doesn't hurt your pages to have the extra ID. You never know when you will need to quickly patch the layout of a single page without touching the rest of the code.
Comments
This gives you the same benefit, but with another, too. When you make an ajax call and there is an error, it very simple to replace the contents of body with the error message. With scriptaculous:
$('body').innerHTML = t.responseText;