gridify

Simple code to add a root-element-relative vertical rhythm checker to a web page. Inspired by Sassline.

Usage no npm install needed!

<script type="module">
  import gridify from 'https://cdn.skypack.dev/gridify';
</script>

README

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.