A scruffy script and bookmarklet to draw the vertical component of a grid over a webpage.
Define a javascript object in your page net.brehaut.grid
. It must have the following keys:
columns
: The number of grid columns to rendercontainerID
: The ID of an element that contains the content of the page. This element will be used to position the grid and determine its width.
Optionally (but recommended) also specify:
nominalWidth
: The number of pixels to use as the basis for calculating column widths. Defaults to 960.nominalGutter
: The number of pixesl for a column gutter in proportion to thenominalWidth
. Each grid column has its own gutters on each side. For example, with a nominal gutter of 2, the space between columns would be 4. Defaults to 5.script
: The location of the script to use. Defaults to an early version of this Gist. Highly recommended you specify your own version.
Once a site has a grid configuration set up, copy the bookmarklet (below) into a bookmark. Visit the site, click the bookmark.