I found this cool and very useful tool from Allan Jardine.
Design is a suite of web-design and development assistive tools which can be utilised on any web-page. Encompassing utilities for grid layout, measurement and alignment, Design is a uniquely powerful JavaScript bookmarklet.
Design features the following components:
* Grid - overlays a highly configurable layout grid over a web-page. Grid can be set to match any set of dimensions, allowing easy development of CSS layouts in the web-browser.
* Rule - displays rulers on a page, with all the expected features of the rulers found in a desktop design application, including guides which snap to block display elements and origin location control.
* Unit - allows measurements to be made between any two points on a web-page, giving basic information about each of the points clicked on, and drawing a line on the page for the measurement.
* Crosshair - draws a crosshair cursor on the page to assist in layout alignment. Cursor information is also presented in a tooltip.
I found it extremely useful when working on web development projects.
