Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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.

About

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

Resources

License

You can’t perform that action at this time.