HTML and CSS baseline grid tools and examples
JavaScript HTML
Latest commit 5175a5b Dec 27, 2015 @jkeyes Updating changelog.
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});