Baseline grids are super helpful for web designers, allowing us to maintain vertical rhythm on our designs. But short of a few Javascript bookmarklets, there isn't really a simple way to get a baseline grid overlay on our designs. Enter Basehold.it.
Using Basehold.it couldn't be easier. Simply add it to your web projects like any other stylesheet:
<link rel="stylesheet" href="//basehold.it/24">
Just like that. Easy, right? That'll get you a 24px baseline grid overlay, just like the one you can see on this page. For more information, or to look at the code (and maybe even contribute some code yourself), check out the repo on GitHub.
You can also specify a custom colour using Hex values, RGB values, or RGBA values, like so:
<link rel="stylesheet" href="//basehold.it/24/ff0000">
<link rel="stylesheet" href="//basehold.it/24/255/0/0">
<link rel="stylesheet" href="//basehold.it/24/255/42/85/0.5">
One last thing - if you just want the image, and not the pseudo element, so that you can apply it in your own CSS file, that's easy too. Simply write your CSS like this:
html {
background-image: url(//basehold.it/i/24); /* 24px baseline */
background-image: url(//basehold.it/i/24/ff0000); /* with Hex colour */
background-image: url(//basehold.it/i/24/255/0/0); /* with RGB colour */
background-image: url(//basehold.it/i/24/255/0/0/0.85); /* with RGBA colour */
}