When designing and developing to the grid, it can be very useful to ensure alignment between various layout components on the page. One easy way to do this is to use a crosshair cursor. Crosshair is a JavaScript bookmarklet which provides exactly this on any web-page you wish.
Usage
Using Crosshair is extremely simple:
-
Drag the Crosshair link below to your bookmark bar (or add it to your bookmarks by right clicking the link and selected 'Add to bookmarks/favourites'):
- Load any web-page you want
- Click Crosshair in your bookmark bar
- Move the mouse around the web-page and the crosshair will follow.
The usage of Crosshair is as simple as loading it in a web-page, as described above. The crosshair, including a small information box about the x and y co-ordinates of the mouse on the page.
Supported browsers
The following browsers are supported in Rule:
- Internet Explorer 7
- Firefox 2+
- Safari 2.0.4+
- Opera 9.2
These are exactly the same as Grid, and there is no IE6 support for exactly the same reason as before.

The simple things There are always two ways to look at everything - often its the company v the consumer (should not be - but that is how it often is). A milk jug which is difficult to pour... oh dear
Flexible layouts This is an excellent article arguing for flexible layouts, which are typically quite difficult to implement and design. The rewards can be worth it though
Dragonfly Alpha 2 The Opera Dragonfly team appear to have been hard at work building up their developer tools. On-the-fly style changes is particularly nice to have. Nice work guys
Full service There are a number of interesting things we can take away from this story, particularly the fact that users like to do things themselves - the feeling of accomplishment
CSS variables This is something that CSS developers have been waiting for - and it is now in the Webkit nightlies! Nice one
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.