#grid

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.

Features:

• 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.

What is new in this release:

• Improved example usage to avoid conflicts.

What is new in version 8:

• Holding down the #grid keys will no longer make browsers cry.
• Fixes to cookie handling.
• Optimizations.

What is new in version v7:

• Updated license references.

What is new in version v4:

• Fixes for multiple grid support under WebKit (Safari and Chrome).

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.