The grid can be held into place, and toggled between, displaying it in the foreground or background.
#grid comes set up with a 980px-wide container that includes 20px gutters, and assumes one lead of 20px.
A second 660px-wide container is included to show you how to set up multiple grids.
Here are some key features of "#grid":
General Features:
· Adaptable for all layout widths and alignments.
· Adaptable for any vertical rhythm value.
· Set keyboard shortcuts to show and hide the grid, hold it in place, toggle it to the foreground and background, and jump between multiple grids.
· Uses a single JavaScript file, a little CSS, and an image (for the vertical lines).
Keyboard Shortcuts:
· G - Show the grid until you release.
· G + H - Show and hold the grid (G will remove it again).
· G + F - Toggle the grid to the foreground and back. Pressing F while the grid is held also works.
· G + J - Jump to the next grid. Pressing J while the grid is held also works.
Requirements:
· JavaScript enabled on client side
· jQuery
Limitations:
· IE 6: The grid is always in the foreground.
· Opera 9/10: Using CTRL or ALT as a modifier key will not work due to different key handling by the browser.
What's New in This Release: [ read full changelog ]
· Holding down the #grid keys will no longer make browsers cry.
· Fixes to cookie handling.
· Optimizations.