This is just a demo to show how grid_lines jQuery plugin looks like

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

Installing Grid Lines

Download grid_lines.js file here

Create a reference:

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

Add following line in your site:

  1. <script>
  2. $.grid_lines();
  3. </script>


  1. store // true/false for saving last settings
  2. borderStyle // css border
  3. hideKey // KeyCode to hide grid lines, its set to 72 (for Key H) as default
  4. widthReduceBy // reduce width if need
  5. heightReduceBy // reduce height if needed
  6. 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

  1. $.grid_lines({
  2. isHidden: true,
  3.   borderStyle: '1px solid blue',
  4.   widthReduceBy: 19
  5. });

Press H before !!!

To get all informations and download please see our main site