Grid Lines (jQuery Plugin)


While improving SSG (Style Sheet Generation) i made this plugin hopping it might be usefull for some webdesigners to get better messures.

There is a left upper menu with 3 inputs (type numbers)

  1. first one for drawing methodes (4 types)
  2. second to add Horizontal lines
  3. third to add vertical lines

You can see a demo here how it looks like Grid Lines Demo

Installing Grid Lines

Download grid_lines.js

Create a reference:

<script src="grid_lines.js"></script>

Add following line in your site:



store // true/false for saving last settings
borderStyle // css border
hideKey // KeyCode to hide grid lines, its set to 72 (for Key H) as default
// you can also set to FALSE and use click function to hide or show: onClick="$.grid_lines.gridButton();"
widthReduceBy // reduce width if need
heightReduceBy // reduce height if needed 
isHidden // true/false to show or hide grid lines at first start. Its also stored If store options is set to TRUE

An example with options

isHidden: true,
borderStyle: '1px solid blue',
widthReduceBy: 19

Have fun