npm install rdmkit-vrt --save-dev

This will install VRT as a devDependency.

Quick setup

import vrt from "rdmkit-vrt";
vrt();

This will get you going, but you will have to comment it out or remove it for production builds. Unless, you want it in your build code.

Conditional setup

if (process.env.NODE_ENV === "development") {
  var vrt = require("rdmkit-vrt");
  vrt();
}

If you are using environment variables, this will only enable CPL while in development. It will not be included in the build. If you happen to use ParcelJS process.env.NODE_ENV === "development" is set for you on all non-build runs. And it will also set process.env.NODE_ENV === "production" when you do build. Super handy.

Options

You can also change the gridline colors and the shortcut keys to open and close the grid. So, use the colors that work with your backgrounds and the keys that you prefer.

// You must specify your options before you call `vrt()` 
// Also, you don't need to use all the options

const options = {
  belowColor: "cyan",
  aboveColor: "indigo",
  aboveKey: "38,38", //  upArrow
  belowKey: "40,40", //  downArrow
  closeKey: "88"     //  x
}

vrt(options);

// or, specify just the setting you need
vrt({belowColor: "#ccc"});

Additional CSS setup

You will need to specify a line-height and font-size on the :root selector in order for this to work. This grid is configured to work on a site that is correctly configured for good typography.

:root {
  line-height: 1.5;
  font-size: 20px;
}

Usage

• Display VRT grid BELOW your web page -> Press ,,
• Display VRT grid ABOVE your web page -> Press ..
• Close VRT grid press -> /

Try this now, VRT is enabled throughout this site. Press .. to open the below grid, and press / to close the grid.

Why ABOVE and BELOW?

There is an ABOVE and BELOW display option for solving two issues with vertical grids. Putting the grid below is great, but you can't see it if you have a background color or image set on any elements. Displaying the grid ABOVE the web page is good, but then you can't select any of the elements below the grid. So, you kind of need both to get the job done reliably.

Background

Let me start by saying that you don't need the challenge of following a strict vertical grid. Millions of websites are made without following this old practice from the print world. Besides, designing to a vertical grid in a web page is tough anyway.

The benefit of following a baseline grid is that it helps you figure out the vertical height and spacing for all the elements in your site. And for a medium that has a vertical nature, a vertical grid maintains a pleasing vertical rhythm as you scroll through the site.

If we choose to take on the challenge of following a strict vertical rhythm, then we need a grid that we can follow. Instead of making a grid that is independent of our stylesheets, this one only works once you set line-height and font-size on the :root selector in your stylesheet. This forces us to use good typographical practices in our stylesheets.

In this case above, the baseline height equals 30px. This is determined by multiplying a line-height of 1.5 by a font-size of 20px. Having a vertical grid to follow will help you figure out consistent vertical spacing between all the elements in your site.

A common mistake is trying to make ALL text fall on a baseline. You don't need to do this. We are only trying to have the main text content fall on the baseline. So, it's the paragraphs and lists of the main content that we are tyring to address. And we want to make sure that the media we add to the web page doesn't disrupt this baseline alignment.

I prefer a line-height of 1.5 and a font-size of any even number. I follow these settings because the math yields consistent results. When values are used that don't yield even numbers or quarters, then different browsers are going to handle rounding fractional numbers differently. This will throw off your baseline efforts and make managing baseline rhythm a pain in the ass. We don't want that. I made a JSBIN to demonstrate this.

Another thing to notice is that the basline isn't showing at the bottom of the text. It's showing inbetween lines of text. The web works in a different nature than print does. Everything in HTML creates a bounding box. A paragraph tag is a box that holds text. Every word and character on the page is bound by a text box too. As a result, our text is always going to rest inside that box. So this VRT grid seeks to handle the baseline as it applies to the web and not as it applies to print.

This will be enough to get you going, but eventually, you will find that images and responsive settings make following a strict vertical grid impossible. For that problem I've created another tool to resize images(or any element) to the nearest multiple of the baseline unit. Thus, enabling us to keep the rhythm that we want. Look at using the RDM module to help with that.