WebAppers

/ best free open source web resources /

Shopify

Design – A Suite of Web Design Assistive Tools

Posted · Category: License Free, Tools

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. Click on the bookmarklet to run it and then you can load each individual component by simply clicking on the icon representing that component 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.

design.png

Requirements: IE 7, Firefox 2+, Safari 2.0.4+, Opera 9.2+
Demo: http://www.sprymedia.co.uk/article/Design
License: License Free

7 Comments
  • Rok

    This is beautiful! How many times did I need exactly this kind of functionality.

  • weldo

    Nice! Thanks!

  • http://www.reedium.com/ Ryan Reed

    I have been using something similar for determining element information and such. It’s called XRay. Works great but this is also a great addition.

    XRay – http://www.westciv.com/xray/

  • captainweb

    if you are using Firefox..do yourself a favor…add these neat add-ons.
    As pointed earlier..^ Firebug Rocks..
    Download Here

    And here’s another called ‘Web Developer 1.1.4
    Download Here

  • http://www.juraj.nl Juraj

    The perfect combination with firebug! oeyeah!

  • http://www.vdomainhosting.com/blog Guy Cook

    Great! Using it now.

  • Peter Hitchmough

    I can’t thank you enough. This is going to make life easier.

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons