HTML and CSS baseline grid tools and examples
Clone or download
Latest commit 5175a5b Dec 28, 2015
Type Name Latest commit message Commit time
Failed to load latest commit information.
baseliner Updating changelog. Dec 28, 2015
.gitignore Ignore compiled Python. Nov 9, 2011 Add support for a vertical offset. Nov 14, 2013

Using Baseliner


The bookmarklet can be found here and it allows you to run Baseliner on any webpage.

Super-short Example

<script src="baseliner.js"></script>
window.onload = function() {
    baseliner = new Baseliner(8);

This will add the Baseliner widget to your page:

Show Baseline

If you click on Show Baseline an 8px baseline grid overlay is displayed:

Hide Baseline

You can customize the size of the grid too:

16px Baseline

Configuration Options

Three configuration options are supported:

  • gridColor — an RBGA array ([255, 0, 0, 255] for red) or a color string (red, blue, green or grey/gray). If this option is not set, it defaults to a highly transparent red.
  • gridHeight — the height of the baseline grid. If it is not set, it defaults to 10 pixels.
  • gridOffset — the number of pixels to offset the grid vertically. If it is not set, it defaults to 0 pixels.

Some more examples

// a black grid, 20 pixels high
baseliner = new Baseliner({'gridColor': [0, 0, 0, 255], 'gridHeight': 20 });
// a red grid, 10 pixels high
baseliner = new Baseliner({'gridColor': 'red'});
// a black grid, 24 pixels high, offset by 10 pixels
baseliner = new Baseliner({'gridHeight': 24, 'gridOffset': 10});