A flexible jQuery plugin for generating horizontal and vertical baseline grids. Super-duper lightweight at 0.8kb.

Basic demo

At it's simplest ashlar.js can be used on any selector which you want to add horizontal or vertical guides to:

jQuery('#wrapper').ashlar();

Though you'll probably want to change the dimensions to fit with your own design. All the options are passed in the standard way:

jQuery('#wrapper').ashlar({
  baseline: 21,
  cols: 16
})

Type: Float Default: 24

Space between vertical lines, typically the base font size multiplied by the line height e.g. 16 * 1.5 = 24

Type: String Default: #ddd

Colour of the vertical grid; can be provided as a hex, color, rgb or rgba value

Type: Integer Default: 12

Number of horizontal columns

Type: String Default: #eee

Colour of the horizontal grid; can be provided as a hex, color, rgb or rgba value

Type: Integer Default: 20

Space between columns in pixels

Type: Boolean Default: true

Show the horizontal grid

Type: Boolean Default: true

Show the vertical grid

• Internet Explorer 8.0+
• Firefox 3.0+
• Safari 4.0+
• Chrome 14.0+
• Opera 10.0+