A PostCSS plugin to create a custom vertical rhythm unit from the base font-size and line-height.
JavaScript
Latest commit 8a5d952 Nov 18, 2015 @markgoodyear update travis config
Permalink
Failed to load latest commit information.
test Fixes #1 and fixes #2 Jun 15, 2015
.eslintrc Update for PostCSS 5 Nov 18, 2015
.gitignore Initial release Jun 4, 2015
.npmignore Initial release Jun 4, 2015
.travis.yml update travis config Nov 18, 2015
CHANGELOG.md update travis config Nov 18, 2015
LICENSE Initial release Jun 4, 2015
README.md Fixes #3 Jun 24, 2015
gulpfile.js Initial release Jun 4, 2015
index.js 1.1.4 hotfix Nov 18, 2015
package.json update travis config Nov 18, 2015

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.