When designing and developing for the web, it's sometimes difficult to follow baselines and precisely align content. Instead of guessing, use guides.js overlay a grid over you HTML while you're working so that you can visually check that everything is aligned perfectly.
http://ryhan.github.io/guides.js/demo/
Include jQuery and guides.js, and then call
new GridSystem();Pressing the "g" key will toggle the visibility of the grid.
To hide the grid from the start, call 'hide' on your GridSystem object. For example,
(new GridSystem()).hide();You can also pass a few parameters to adjust the grid. For example, to adjust the alignment and spacing of the grid, one might call
new GridSystem({
align: 'left',
x: { major: 300, minor: 100, gutter: 20},
y: { minor: 50 }
});| Name | Type | Default | Description |
|---|---|---|---|
| align | string | 'center' | Decides how the grid should be aligned. Particularly important for resizing. Can be set to 'left' or 'center'. |
| x | object | major: 150, minor: 0, gutter: 30 | Set the major and minor gridlines as well as gutters for vertical lines. All values are in pixels. |
| y | object | major: 192, minor: 24, gutter: 0 | Set the major and minor gridlines as well as gutters for horizontal lines. All values are in pixels. |