A quick, painless, Javascript-free baseline overlay.
Latest commit 95d08b8 Jan 3, 2017 @daneden Update front page



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="http://basehold.it/24">

Easy, huh?

Further Examples:

Specify a 6 digit hex code:

<link rel="stylesheet" href="http://basehold.it/24/DEEFFF">

Specify separate RGB values:

<link rel="stylesheet" href="http://basehold.it/24/255/42/85">

Specify 50% alpha using RGBA:

<link rel="stylesheet" href="http://basehold.it/24/255/42/85/0.5">

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(http://basehold.it/i/24); // 24px baseline
    background-image: url(http://basehold.it/i/24/ff0000); // with Hex colour
    background-image: url(http://basehold.it/i/24/255/0/0); // with RGB colour
    background-image: url(http://basehold.it/i/24/255/0/0/0.85); // with RGBA colour


Just add this as a bookmark:


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

Sass Mixin

@mixin baseline-grid( $line-height:24 ) {

    position: relative;

    &:after {
        position: absolute;
        width: auto;
        height: auto;
        z-index: 9999;
        content: '';
        display: block;
        pointer-events: none;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: url(http://basehold.it/image.php?height=#{$line-height}) repeat top left;

    &:active:after {
        display: none;


Sass Mixin Usage

body { 

    @include baseline-grid(24);

    /* change 24 to your grid size */