A quick, painless, Javascript-free baseline overlay.
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:
Easy, huh?
Specify a 6 digit hex code:
Specify separate RGB values:
Specify 50% alpha using RGBA:
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:
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).