A PostCSS plugin to create a custom vertical rhythm unit from the base font-size and line-height.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
.eslintrc
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
gulpfile.js
index.js
package.json

README.md

postcss-vertical-rhythm Build Status

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

Examples

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;
}

Options

Type: Object | Null

Default:

{
  rootSelector: 'body',
}
  • rootSelector (String) The root selector for the font declaraion.

Usage

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.

Licence

Released under the MIT license.