GridFox
If you’ve recently moved from desktop publishing to web design one of the things you’re likely to miss is the ability to overlay gridlines on your website to make sure the various elements line up, much like The Gimp or Inkscape does. Designing neatly-aligned webpages demands something a little more accurate than guesswork to make sure things are in proportion. GridFox goes some way to achieving this and is intuitive and easy to use.

By default GridFox displays a set of vertical grids over your page but can be adjusted to display a set of horizontal grids as well. Go to Tools->GridFox->Options and enable the horizontal grid lines.

The colour, thickness, opacity and spacing of the grid lines can be customised in GridFox’s options menu as well. Being able to adjust the thickness of the rules is handy for making sure gutter widths are even across the site, for example.

Adjusting the space between the grid lines is a little more fiddly than I would like but not impossible. In the options window there are tabs for horizontal and vertical line adjustments. Entering a set of co-ordinates (numbers separated by commas) space the lines however you like. Unfortunately, getting them exactly right means a number of guesses until you’re satisfied. What would be ideal would be to be able to drag the gridlines to where you need them but unfortunately this is not possible. Perhaps in future releases?

Of course, if you simply want a straightforward set of equally-spaced grid lines then this is not an issue. Or if you know beforehand exactly how wide you want all your columns, headers and other elements, then you simply put them in and get designing.

MeasureIt
All good graphic designers scour sources for good ideas and pleasing geometries to work with. On paper a pen and a ruler makes taking accurate measurements fairly straightforward. But what if it’s a website you want to measure? Introducing MeasureIt, a simple Firefox-based ruler that can be used to measure the size of columns, images, sidebars and just about anything else you can see in your browser. Installed, MeasureIt places a small icon in the status bar of your browser. So when next you’re browsing a good-looking website and you’re wondering what size an image is (it happpens!) whip out MeasureIt, drag a box around the item and you’ve got the information you need.

In action, MeasureIt draws a lightly-coloured ruler over the areas being measured and gives the height and width of the object in pixels.

ColorZilla (or our preferred Gcolor2)
One of the reasons I stick with Bluefish as my preferred HTML editor is because of its built in colour picker which can select the hex colour codes from anywhere on my screen. (I wrote about this particular preference in Five must-have apps for a new Linux install).

ColorZilla does pretty much the same thing for websites though your mileage may vary depending on your platform. Ubuntu users appear to have regular problems using this though the discussion here might help.

The idea behind ColorZilla is that you can view any page, even zoom in on a selected area, and, using the eyedropper, pick the exact colour you need as a hex or RGB code. Very nice. Especially if the eyedropper wasn’t broken on Ubuntu. But even if you can’t use the eye dropper you can still use ColorZilla’s other features including a colour picker that you can scroll through.

Given ColorZilla’s limitations on Ubuntu I’ve recently started using Gcolor2 which is colour picker tool that captures colour information from anywhere on your screen. Using Gcolor’s eyedropper you’re not limited to just the existing browser window but you can pick and choose colours from anywhere on your screen.

The disadvantage is that Gcolor is a standalone application so you’ll need one extra step to get the chosen colour into your html document by copying and pasting.

The big advantage Gcolor has is that it stores your chosen colours so you can come back them later, which is essential if you want to use colours consistently across your site.

View source chart
This is a little more geeky than the previous extensions but if you’ve ever spent a good couple of hours trying to work out why one block of text appears somewhere it is not meant to then View Source Chart is something you have got to get your hands on. Installed, View Source Chart renders a graphic of the page you’re looking with each block (DIVs, HREFs etc) and how it all fits together. Magically the errant block of text and he reason for it misplacement become a whole lot easier to pinpoint and fix. Very nice when you’re in a fix.

Original link: http://www.tectonic.co.za/?p=220...