reticulator.js

Sometimes your design don't fit in the pre-built grid and framework systems. Sometimes you want to code all your html and css stuff and you just need some guides to fit all the design details. Then probably you want to get a try.

Reticulator.js is a light javascript library that allows you to build grids or simple vertical / horizontal guides over your rendered html. It's just like fireworks/photoshop guides.

• Use multiple grids at the same time.
• Use individual horizontal or vertical guides.
• Toggle visibility with g+r key combination.

This library takes its name from the fancy Fireworks extenison, that now is part of OrangeCommands.

Tested successfully in the following browsers:

• Firefox 3+
• Internet Explorer 6+
• Safari 3+
• Opera 9+

In a near future I must finish my unit tests for this library.

usage and configuration

You need to include reticulator.js in your html file.

To get the default grid (951/16/9) just write:

var grid = new Reticulator();

Usage of the new keyword to instantiate the object is optional.

Customize your grid using the following options:

Then, if you want a red grid with 10 columns and 1000px width, write:

var grid = new Reticulator({
  width: 1000,
  columns: 10,
  color: "red"
});

Add extra guides to your grid:

var grid = new Reticulator();

// add a vertical guide
grid.addVerticalGuide(50);

// add an horizontal guide
grid.addHorizontalGuide(50);

You can forget the basegrid and add individual guides. For vertical guides:

Reticulator.addVerticalGuide({
  color: "#00FF00",
  opacity: 0.5,
  left: 100
});

For horizontal guides:

Reticulator.addHorizontalGuide({
  color: "#00FF00",
  opacity: 0.5,
  top: 100
});

To show/hide/toggle your grids, you can uses some imaginatively named methods:

Reticulator.hideAll();
Reticulator.showAll();
Reticulator.toggleAll();

The instance methods hide, show and toggle can be used to manipulate the visibility of individual grids. This will allow programmers coming from the future to develop its own UI for Reticulator.

Anyway you can use the bookmarklet :)

examples

Let's see:

• Simple grid
• Custom grid adding extra guides
• Two grids
• Empty grid adding extra guides
• Only a horizontal guide
• Only a vertical guide

download

Download reticulator.js in a zip file with examples or grab the code from github.

support

Nobody is perfect :) If you find problems with reticulator you can post an issue here and I'll try to solve it as soon as possible.

I also accept that my english is not as good as it should be :) if you find any mistake in this text let me know!