The debugging styles are a lot more informative. There's basically two working modes which all work through contextual hovers. Not hovering anything will leave the page layout intact.

Hovering over the body will illustrate all the grid containers with a red tint, background columns and column rulers. It will blend in with the page design so you can see how everything lines up with the grid in a way that's not too distracting.

The second mode is triggered when hovering over a grid container. It will show all the grid elements (faint shade), prefix/suffix padding (purple shade), push/pull (generated label above the element) and alpha/omega items (faint purple dot on their respective edges). In this second mode, the container ruler from the first mode disappears but they will show for each element with a grid class applied but only on hover.

A few more notes about this second "container" mode:
- It will warn when a push and pull class is applied to a single element.
- Grids nested within grids nested within grids are a bad idea. Two levels deep of embeded grids will show a 2 pixel grey dotted outline. Starting from the third level It will progressively show a thicker red outline to give you a warning.
- The background and foreground colors are set to a neutral tone so your page design doesn't get in the way of showing you all of this useful information.
- Background images are stripped. This couldn't be helped since they cannot be faded without an opacity change of the container but that leads to bigger consequences.

It's very clean in its presentation and I've tested on a lot of pages. I've spotted a lot of mistakes too out in the wild which I think shows how useful these debugging styles can be. If you want to test it out for yourself you can try these bookmarklets. That link also contains a demo/test. I made two versions. One for the Drupal specific implementation and the other works with the source 960.gs. Only differences is the hyphen- vs underscore_.

And forget about IE. Very basic support for that crummy browser. The latest shipping versions of Firefox, Chrome, Safari and Opera work nicely though. Uses a lot of CSS3 selectors and properties.

Comments

dvessel’s picture

StatusFileSize
new65.13 KB

Patch for 7.

dvessel’s picture

Version: 7.x-1.x-dev » 6.x-1.x-dev
Status: Active » Fixed
StatusFileSize
new65.13 KB

6.x

dvessel’s picture

StatusFileSize
new1.85 KB
new1.85 KB

Adds a missing !important declaration preventing the warning outlines from showing when embedding grids within grids. Also fixes an issue from zeroing out the line-height on clearfix for the generated container rulers.

dvessel’s picture

StatusFileSize
new14 KB
new15.75 KB

Cleaning up and a small bug fixes that caused the push/pull label to interfere with the admin toolbar in 7. Also accounted for the embed tag (flash) to fade to show the background columns and a few instances of the suffix padding showing at the wrong time. Lastly, when focusing on a container, the rest of the page fades out. This one's a hack using huge outlines and some browsers might choke when there are numerous containers but it really helps focus in on what you're looking at.

dvessel’s picture

StatusFileSize
new35.27 KB
new35.72 KB

Removed all support for IE. It wasn't worth it. I might create a separate one if enough people have a need for it.

You can check the updated functionality on live sites with the bookmarklets on this test/demo page.

dvessel’s picture

StatusFileSize
new63.4 KB
new63.48 KB

Err… Wrong file.

amitaibu’s picture

Craziest css I've ever seen! ;)

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.