Usage

Using Design is extremely simple:

• Drag the Design link below to your bookmark bar (or add it to your bookmarks by right clicking the link and selecting 'Add to bookmarks/favourites'):
  
• Load any web-page you want
• Click Design in your bookmark bar
• Load the design component you wish to use by clicking on it in the Design control panel.

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.

Once Design has loaded, you can load each individual component by simply clicking on the icon representing that component in the Design control panel. You can then disable that component by clicking the icon again. Any combination of the Design components can by loaded on a page, and they will all work effectively together. Indeed, Design is often at it's most useful when using several of it's components at the same time.

Each component can be loaded as a 'standalone bookmarklet' through the instructions of each of their individual pages. Further information about each of the Design components can be found on their respective pages by following the links above.

Support

As with all software, Design and its components are in a constant state of development. This release of Design marks the first stable release of all four components, although there may be minor bugs which you encounter on various sites. If you do find any, please report them to me. Also remember that one of the wonderful things about the JavaScript bookmarklet is that you always get the most up-to-date version every time you load it.

Future work

One of the main issues I want to address with future versions is the speed of some of the components. Grid and Rule in-particular could use some further optimisation, beyond what has already been done, to make their interface more snappy. Future features include a mechanism to measure the distance between guides directly in Rule and constrain to angles in Unit.

It would be really great to hear from you if you use Design, so please get in touch!

Supported browsers

The following browsers are supported in Design:

• Internet Explorer 7
• Firefox 2+
• Safari 2.0.4+
• Opera 9.2+
• Chrome 1+

No IE6 support? Nope. Design and it's components are designed and developed for you as web-developers and designers, not your clients (who of course still required IE6 support), so I see no need to support it in this case (feel free to disagree!). If we at the front of the field don't move on, how can we expect the larger community to do so?