Are you happy with your logging solution? Would you help us out by taking a 30-second survey? Click here

A quick, painless, Javascript-free baseline overlay.

Subscribe to updates I use

Statistics on

Number of watchers on Github 393
Number of open issues 6
Average time to close an issue about 1 month
Main language PHP
Average time to merge a PR about 8 hours
Open pull requests 1+
Closed pull requests 2+
Last commit about 3 years ago
Repo Created almost 8 years ago
Repo Last Updated almost 2 years ago
Size 26 KB
Organization / Authordaneden
Page Updated
Do you use Leave a review!
View open issues (6)
View activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)


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).

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({$line-height}) repeat top left;

    &:active:after {
        display: none;


Sass Mixin Usage

body { 

    @include baseline-grid(24);

    /* change 24 to your grid size */

} open issues Ask a question     (View All Issues)
  • over 6 years Feature request: Subdivisions
  • almost 8 years Pointer Events
  • almost 8 years Todo's open pull requests (View All Pulls)
  • Add license scan report and status list of languages used
Other projects in PHP