basehold.it

by daneden

daneden /basehold.it

A quick, painless, Javascript-free baseline overlay.

431 Stars 26 Forks Last release: Not found 307 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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:



Easy, huh?

Further Examples:

Specify a 6 digit hex code:



Specify separate RGB values:



Specify 50% alpha using RGBA:



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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.