Need help with basehold.it?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

daneden
437 Stars 26 Forks 351 Commits 6 Opened issues

Description

A quick, painless, Javascript-free baseline overlay.

Services available

!
?

Need anything else?

Contributors list

# 190
CSS
HTML
css-ani...
stylesh...
79 commits
# 500,416
CSS
Objecti...
devops
GitHub
9 commits
# 660,489
TypeScr...
CSS
7 commits
# 12,973
CSS
JavaScr...
React
emotico...
3 commits
# 15,047
JavaScr...
Rails
twitter...
Sublime...
1 commit
# 100,165
CSS
PHP
messeng...
Electro...
1 commit
# 9,027
CSS
React N...
npm
reasonm...
1 commit

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.