HTML and CSS baseline grid tools and examples
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

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});