Design better Web pages with MeasureIt-GridFox-Colorzilla Firefox extensions

If you’ve ever tried to create or edit a Web page, you know that getting the little details just right can sometimes take a long time. Here are a few Firefox extensions you can add to your toolbox that will help you measure images, align objects on your page, and capture colors quickly and easily.

When you need to know the exact size of your sidebars, headers, and other images in a flash, MeasureIt can tell you. MeasureIt adds a small ruler icon on the left side of the status bar. Clicking on the icon brings up a crosshair cursor; simply move the cursor to the object you want to measure, and drag a box over it. The extension will display the width and height of that object in pixels on the right of the drawn box. To get out of MeasureIt, press the Escape key; the page will turn back to normal.

Grclasss are helpful for judging distances and spatial relationships, and they help you better align objects, giving you more vital space on your Web page. To make sure the objects you place on your Web page are well-aligned and maintain their position in a grid-based layout, check out GrclassFox, which displays grids like you’ll find on an image editor such as the GIMP. If you’ve ever used such an image editor, you’ll find GrclassFox easy to use, intuitive, and straightforward.

By default, GrclassFox gives you only vertical grids. Go to Tools -> GrclassFox -> Options to get horizontal grids, change the background colors, change the thickness or color of the grids, and more. One drawback is that it’s a bit tricky to get the grids just where you want them. You may have to change your column and row values time and again to get them right. It would have been great if the grids were also guides so that you could reposition them easily by dragging them. Knowing the width of a Web page helps you place the external grids. You can place your internal grids depending on whether you want your columns to have equal width.

The mix of colors plays an important role in making your Web site stand out. With ColorZilla, you can easily find out exactly what colors are being used on Web pages.

After installation, ColorZilla puts an eyedropper icon on the left side of the status bar. On your Linux Ubuntu Desktop clicking on this icon might generate an error message such as “your platform doesn’t support this feature,” which is the error message I received. You might have to follow a procedure detailed on the Ubuntu forum to resolve this issue.

To pick a color, right-click on the eyedropper icon, zoom into the page so you can better select the color you want, left-click on the icon, and place the crosshair cursor over the color you want to analyze. By default, the RGB and hex color codes are displayed in the status bar, as well as the distance from the last point your mouse highlighted and the element tag. Left-click on the color to capture it onto the ColorZilla color picker palette.

After capturing the color, double-click on the ColorZilla eyedropper to open the color picker palette. There you can modify the color to better suit your needs. ColorZilla also offers a complete color picker tool, as you can find on all image editors. You’ll find a wide range of display options in the Statusbar Format menu. I like being able to view where an element sits in the Document Object Model by toggling the Statusbar Format menu from Options -> Statusbar Format -> dom-path.

ColorZilla also installs the Auto Copy Firefox extension, which permits you to automatically copy selected text to the clipboard. After activating it (navigate to Options -> Auto Copy -> Enabled) you can automatically copy any selected text and paste it wherever you wish with a mclassdle-click of the mouse.

There you have it — three tools that can help you post images and text. MeasureIt helps you to know exactly how much space is allocated for your images. GrclassFox guarantees that text and images are aligned. ColorZilla can serve you to modify the colors of your post on the fly.

Originally published at linux.com