Looking for an easy way to overlay a baseline grid on any webpage? Baseliner is a JavaScript tool that can do just that.
How do I use it?
The easiest way to use baseliner is the Baseliner bookmarklet, which always loads the latest code.
A custom baseline grid can be created directly:
<script src="http://files.keyes.ie/baseliner-latest.min.js">
</script>
<script>
window.onload = function() {
baseliner = new Baseliner();
}
</script>
The default grid is 10 pixels high. To change this pass a height parameter:
baseliner = new Baseliner(12);
The default grid color is grey. This can be changed too.
baseliner = new Baseliner({ gridHeight: 12, gridColor: 'red' });
There are four supported color names: red, green, blue, black. Further customization is available by using an array to represent an rgb value:
baseliner = new Baseliner({ gridColor: [255,60,60] });
If you’d like the grid to blend into the page you can customize the opacity of the overlay by specifying a percentage value:
baseliner = new Baseliner({ gridOpacity: 50 });
Another way to make the grid blend into a design, is to specify the spacing between the grid pixels. This will create dotted lines instead of solid ones.
baseliner = new Baseliner({ gridSpace: 5 });
The maximum spacing is 10 pixels.
Latest Release — 0.9.8
Source
Minified
Other Resources
Bookmarklet Updates
2011-11-08
- Loads the minimized baseliner JavaScript
- Prevent multiple overlays when using IE
2011-11-07
- The location of the baseliner script changed to
files.keyes.ie.
- The default grid height can now be modified by changing the
_grid_height variable.
Acknowledgements
Document width and window height are found using code from jQuery. These dimensions are used to ensure the background scales as the window size or zoom levels change.
Versions previous to 0.9.8 used Robert Eisele’s PNGlib, to create the transparent tiling background that created the baseline grid.
