A flexible jQuery plugin for generating horizontal and vertical baseline grids. Super-duper lightweight at 0.8kb.
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+