Usage

Using Grid is very simple:

• Drag the Grid link below to your bookmark bar
  
• Load any web-page you want
• Click Grid in your bookmark bar
• Configure the grid any way you wish to assist with layout

The impact of a web-site can stand or fall by the underlying structure of the visual layout. All elements of a design are united by the grid, allowing the experienced designer to bring certain elements to prominence in the viewers mind. Despite this core aspect to design, there are few utilities which allow designers and developers to interact directly with a grid within a web-browser (most methods involve overlaying a static grid image on a page). Grid is designed to fill this gap.

Using Grid is as simple as loading it into any web-page you wish by following the instructions above, and then customising the grid displayed to suit your needs using it's control panel. Grid will automatically calculate the number of columns/rows or the size of the column/row depending on your input. This is particularly useful for calculating CSS units.

You may also wish to make use the grid displayed on a web-page in a desktop design package such as Photoshop. This can be done by using the 'Print / Screenshot' mode. Activate this mode by clicking the 'screen' icon in the top left of the Grid control panel (second icon down) and the contents of the web-page will be blanked out, leaving only the grid. Take a screenshot of this (and delete the white elements), or print it out as you wish. To return to the normal view mode, press the 'esc' button.

Support and future work

Since Grid can be used on any web-site, it's programming must allow for many different environment variations. It is therefore possible that you will find one or two sites which Grid struggles to work with. If you do find any, please report them to me. Likewise, please get in touch if you have any ideas for enhancements which could be made to improve Grid, or even if you simply like using it!

Supported browsers

The following browsers are supported in Grid:

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

No IE6 support? Nope. Grid is 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?

Change history

Version 1.1

• New: Include the 'print / screenshot' mode. Many thanks to Paul Annett for this suggestion!

Version 1.0

• New: Incorporated into the Design framework.
• New: Window resize is now taken account of

Version 0.5

• New: State of the control panel is saved (collapsed or not) which is useful if you are checking one site a lot with minor changes
• New: A small loading indicator is shown while Grid is loading
• New: Position of the grid control panel is now fixed in the viewport, so you will always have easy access to it, even on long pages. (Note that Safari 2 is an exception here due to a bug in how it handles position fixed and overflow - works fine in Safari 3).
• Bug fix: The height of the display grid will now either be the height of the browser viewport (if no vertical scrolling), or the height of the content (with scrolling). The same applies to the width. Note that when using percentages for the page container units, this percentage is calculated from the height of the full page, as described above).

Version 0.4

• First public release

The web today

Donate

If you find the software on this site useful, and/or enjoy using it, please consider making a donation so I can keep developing this software.