This is a little tool we created for our Analog holding page. It inserts a layout grid in web pages, allows you to hold it in place, and toggle between displaying it in the foreground or background.

  • 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 and a little CSS to control the grid lines, columns and gutters

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


Similar Posts