Reticulator, get a grid

reticulator.js: get a grid

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();
  

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:

  
    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:

  
    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.

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!