Showing the grid while developing using the CSS property opacity

While developing magazines (but not just), is essential for me to have a grid super imposed upon the layout, so when things decide to go wild, I catch them on the flight.

As my gran ma was used to say…

“I want it quick and I want it easy”

So I did a really little bit of coding, to use in my framework. It is just a CSS file which has to be loaded occasionally, plus an additional line of PHP in the header. This line is normally not executed, and eventually removed at final stage.

In all my templates I have a folder, named styles, where I keep the basic CSS files which confers to the theme the basic formatting. I then override the basic style through the style.css file. Just for acknowledgement, such a folder contains the followings:

• ie6_fix.css
• ie7_fix.css
• my960.css
• plus.css
• reset.css
• typography.css
• grids (this is indeed a folder, not a file)

Eventually I will write more about those. The folder grids is key here, since it contains images like the background for the 960gs layout. Just to keep stuffs each in its place.

To those above, I have added recently a new CSS file:

• development.css

Into the latter I wrote a bunch of lines:

/* Typo and grid development setting
-----------------------------------------------------*/

html {
     background: transparent url(grids/960_grid_12_col.gif) repeat-y center top!important;
     opacity: 1!important;
}

html body {
     opacity:0.6!important;
}

What does happen with the above is pretty straight forward. I set a background directly for the html element, the 960 grid, and for the body and all its descendants I set an opacity of 60%. In practice, everything after html will be semi transparent.

How to use it?

Since when I need it I have already my hands in the dirt (very likely I’m coding, right?), I am already manipulating files among the theme. The best place where to put the line is in the header.php, just before the closing tag </head>, where I would insert a line as below:

<?php print '<link rel="stylesheet" href="' . get_bloginfo("stylesheet_directory") . '/styles/development.css" type="text/css" media="screen" />'; ?>

Set up like that, the development.css is loaded and executed, showing the grid under all the other elements, which have been made semi-transparent.

To come back at the normal setting, it will be sufficient to quote the php line, this way:

<?php // print '<link rel="stylesheet"  href="' . get_bloginfo("stylesheet_directory") .  '/styles/development.css" type="text/css" media="screen" />';  ?>

And, voilà, everything came back to be as normal (as the client would prefer to look at it, indeed).

What I appreciate about this method, is that it is so simple for me to just add and remove a couple of slash //, and having all the set up activated or de-activated.

Do you have a better practice? Would you like to share?