A PostCSS plugin to create a custom vertical rhythm unit from the base font-size and line-height.

Set the font on the body selector using the CSS shorthand method, you can use either px, em, rem or % unit for font-size:

body {
  font: 16px/2 serif;
}

This will create a line-height of 32px, which will be the vertical rhythm value. Now you can use the custom vertical rhythm unit, vr:

Input:

p {
  margin-bottom: 1vr;
  padding-top: .5vr;
}

Output:

p {
  margin-bottom: 32px;
  padding-top: 16px;
}

Type: Object | Null

Default:

{
  rootSelector: 'body',
}

• rootSelector (String) The root selector for the font declaraion.

Install:

npm install postcss-vertical-rhythm --save-dev

Then include the plugin:

postcss([ require('postcss-vertical-rhythm')(options) ])

See PostCSS docs for examples for your environment.

Released under the MIT license.