PostCSS plugin that adds support for a lh unit based on the line height for vertical rhythm
TypeScript JavaScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
src
test
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
package-lock.json
package.json
tsconfig.json

README.md

PostCSS-LH

Build Status npm version

PostCSS plugin that defines a lh unit based on the root line-height, used for vertical rhythm in a web layout.

Built for Concise CSS.

Write this:

:root {
  font: 16px / 1.5 "Helvetica", "Arial", sans-serif;
}

section {
  margin-bottom: 1lh;
  padding-top: .5lh;
}

And get this:

:root {
  font: 16px / 1.5 "Helvetica", "Arial", sans-serif;
}

section {
  margin-bottom: 1.5rem;
  padding-top: 0.75rem;
}

Installation

$ npm install postcss-lh

Usage

postcss([ require('postcss-lh') ])

See PostCSS docs for examples for your environment.

Options

rootSelector

  • Type: string
  • Default: :root

The selector where the line height is set. You can use html or body for example, but by default it will use :root.

unit

  • Type: string
  • Default: lh

The unit to be used in your CSS.

lineHeight

  • Type: number
  • Default: 1.5

The default line height. Used only when a line height definition in the root element is not found.

License

MIT - James Kolce