https://github.com/daneden/basehold.it
A quick, painless, Javascript-free baseline overlay.
https://github.com/daneden/basehold.it
Last synced: 11 months ago
JSON representation
A quick, painless, Javascript-free baseline overlay.
- Host: GitHub
- URL: https://github.com/daneden/basehold.it
- Owner: daneden
- Created: 2012-04-12T12:19:36.000Z (about 14 years ago)
- Default Branch: master
- Last Pushed: 2024-04-29T08:18:49.000Z (about 2 years ago)
- Last Synced: 2024-11-24T10:34:29.747Z (over 1 year ago)
- Language: TypeScript
- Homepage: http://basehold.it
- Size: 570 KB
- Stars: 541
- Watchers: 14
- Forks: 26
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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:
```css
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:
```js
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`).