Skip to content

daneden/basehold.it

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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:

<link rel="stylesheet" href="http://basehold.it/24">

Easy, huh?

Further Examples:

Specify a 6 digit hex code:

<link rel="stylesheet" href="http://basehold.it/24/DEEFFF">

Specify separate RGB values:

<link rel="stylesheet" href="http://basehold.it/24/255/42/85">

Specify 50% alpha using RGBA:

<link rel="stylesheet" href="http://basehold.it/24/255/42/85/0.5">

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

About

A quick, painless, Javascript-free baseline overlay.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published