Technology moves fast! ⚡ Don't get left behind.🚶 Subscribe to our mailing list to keep up with latest and greatest in open source projects! 🏆


Subscribe to our mailing list

Basehold.it

A quick, painless, Javascript-free baseline overlay.

Subscribe to updates I use Basehold.it


Statistics on Basehold.it

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 over 2 years ago
Repo Created about 7 years ago
Repo Last Updated over 1 year ago
Size 26 KB
Homepage http://basehold.it
Organization / Authordaneden
Contributors7
Page Updated
Do you use Basehold.it? Leave a review!
View open issues (6)
View Basehold.it activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

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

Baseline

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
}

Bookmarklet

Just add this as a bookmark:

javascript:(function(){var%20link=document.createElement("link");link.setAttribute("rel","stylesheet");link.setAttribute("href","http://basehold.it/"+parseInt(window.getComputedStyle(document.body).getPropertyValue("line-height"),10));document.head.appendChild(link);})()

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 */

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