gridBuilder.js demo

gridBuilder.js is a jQuery plugin that draws a grid as a background.

It works via canvas and data-URL, so you need a real browser. It can be applied to any element, the grid is completely customisable, and has options to show secondary gridlines as well.

Download gridBuilder.js

3.8kb unpacked. Requires jQuery. Tested in Firefox 3.0, 3.5, Qt-Webkit 4.5 and Opera 9.6. Dual licenced under the MIT and GPL licenses. Hosted on Github.

How to invoke, and the default options of gridBuilder:

$(document).ready(function(){
  $("body").gridBuilder({
    color:          '#eee',    // color of the primary gridlines
    secondaryColor: '#f9f9f9', // color of the secondary gridlines
    vertical:       18,        // height of the vertical rhythm
    horizontal:     140,       // width of horizontal strokes
    gutter:         40,        // width of the gutter between strokes
  });
});

To remove via javascript:

  $("body").destroyGrid();

Made by Kilian Valkhof