A PostCSS plugin to create a custom vertical rhythm unit from the base font-size and line-height.
Switch branches/tags
Nothing to show
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.
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.