Skip to content


Subversion checkout URL

You can clone with
Download ZIP
A quick, painless, Javascript-free baseline overlay.
PHP CSS JavaScript
branch: master

Merge pull request #23 from MoOx/patch-1

Add Bookmarklet trick
latest commit 15ce72e218
@daneden authored


Get a baseline grid overlay on your site in one painless, javascript-free step.

Here's an example demonstrating how to get a 24px baseline overlay on your site:

<link rel="stylesheet" href="">

Easy, huh?

Further Examples:

Specify a 6 digit hex code:

<link rel="stylesheet" href="">

Specify separate RGB values:

<link rel="stylesheet" href="">

Specify 50% alpha using RGBA:

<link rel="stylesheet" href="">

Image Only Mode

You can use Baseline to grab the image on it's own, if you'd rather apply it as a background in your own stylesheet.

Simple example:

html {
    background-image: url(; // 24px baseline
    background-image: url(; // with Hex colour
    background-image: url(; // with RGB colour
    background-image: url(; // with RGBA colour


Just add this as a bookmark:


This will add the default grid according to your body line-height (using getComputedStyle).

Something went wrong with that request. Please try again.