Simple code to add a root-element-relative vertical rhythm checker to a web page. Inspired by Sassline.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
README.md
gridify.bookmarklet.js
gridify.js
package.json
style.js

README.md

Gridify: In-Browser Vertical Rhythm Measurement Tool

Gridify is inspired by the grid at sassline.com.

Demo

Gridify Example

Usage

  1. Copy the bookmarklet to a new bookmark in your browser
  2. Click the bookmarklet
  3. Give the prompt a selector (e.g. #main) to attach itself to.

Gridify uses the page's root element's font-size to determine how to size itself. In other words, it sizes the grid according to the rem unit.

Building/Contributing

  1. This project depends on babel (implicitly, via babelify), uglifyify, and browserify.
  2. npm run build - this will print compiled code to STDOUT.
  3. npm run build:bookmarklet - this will write minified + compiled code to gridify.bookmarklet.js.