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
433 Stars 26 Forks 317 Commits 6 Opened issues

Description

A quick, painless, Javascript-free baseline overlay.

Services available

!
?

Need anything else?

Contributors list

# 143
React
CSS
HTML
css-ani...
77 commits
# 494,315
TypeScr...
HTML
devops
GitHub
9 commits
# 653,137
TypeScr...
JavaScr...
7 commits
# 12,861
CSS
JavaScr...
React
emotico...
3 commits
# 13,312
JavaScr...
Rails
twitter...
Sublime...
1 commit
# 89,669
CSS
TypeScr...
messeng...
Electro...
1 commit
# 8,107
CSS
React N...
npm
postcss...
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.