csnover / Grid-Bookmarklet

Overlays an adjustable grid onto the current page, perfect for checking typographic vertical rhythm.

Home Page:http://sfcgeorge.github.com/Grid-Bookmarklet/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Grid Overlay Bookmarklet

About

This bookmarklet, once activated, overlays a customisable grid onto the current page. This can be very useful for web designers trying to line up content, or typographers trying to create vertical rhythm. It also has the option of gutters, for more complex grid layouts.

Installation

Visit the project page, then drag the bookmarklet into your bookmarks toolbar. Once you have done this, the main bookmarklet code is pulled down from GitHub each time you use it, so it's kept up to date automatically.

Usage

Click the bookmarklet and wait a few seconds for it to load. The HUD can be dragged around the page into a convenient location. To change a parameter, type the new value into the text box, then click/tab to another text box to update the grid. Click on the section heading to expand/contract that section of the bookmarklet. Expand the settings section and click the 'Set default for page' button to make your current settings the default every time you use the bookmarklet on that page. Each page gets its own default. Defaults are stored with HTML5 localStorage and can be cleared with the 'Clear default for page' button.

About

Overlays an adjustable grid onto the current page, perfect for checking typographic vertical rhythm.

http://sfcgeorge.github.com/Grid-Bookmarklet/