Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Create a grid while you're developing your markup
JavaScript
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
examples
test
.gitignore
README.markdown
reticulator.js

README.markdown

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:

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

Reticulator.addHorizontalGuide({
  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:

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:

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!

Something went wrong with that request. Please try again.