postcss-lh

PostCSS plugin that adds support for a lh unit based on the line height for vertical rhythm

Showing:

Popularity

Downloads/wk

95

GitHub Stars

46

Maintenance

Last Commit

3yrs ago

Contributors

7

Package

Dependencies

1

Size (min+gzip)

21.2KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100