Create a grid while you're developing your markup
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



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:

Property Type Default Description
align String "center" Align your grid at left, right or center.
width Number 951 Is the width of the base.
offset Number 0 This offset is applied to the grid base.
columns Number 16 Setting colums to 0 you obtain an empty base to add individual guides manually.
gutter Number 9 Separation between columns.
color String "#00FF00" Colour of the guides in the grid.
opacity Number 0.5 Just opacity :)
zindex Number 9000000 Use a negative value if you want to use the grid under your design

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

// add an horizontal guide

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

  color: "#00FF00",
  opacity: 0.5,
  left: 100
Property Type Default Description
color String "#00FF00" Colour of the guides in the grid.
opacity Number 0.5 Just opacity :)
left Number 0 Distance between the guide and the left of the page.

For horizontal guides:

  color: "#00FF00",
  opacity: 0.5,
  top: 100
Property Type Default Description
color String "#00FF00" Colour of the guides in the grid.
opacity Number 0.5 Just opacity :)
top Number 0 Distance between the guide and the top of the page.

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


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 :)


Let's see:


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


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!