postcss-baseline-grid-overlay

3.0.1 • Public • Published

PostCSS Baseline Grid Overlay Build Status

PostCSS plugin to check vertical rhythm by using a baseline grid overlay created with the linear-gradient function.

body {
    baseline-grid-overlay: 24px hsla(28050%30%.3) 9999;
}
Outputs:
body {
    position: relative;
}
 
body::after {
    background: linear-gradient(to bottomhsla(28050%30%.3)hsla(28050%30%.3) 1pxtransparent 1pxtransparent);
    background-size: 100% 24px;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 9999;
}

You can see what the output looks like on CodePen: link

The values for the baseline-grid-overlay property are:

<base-line-height> [, <line-color> [, <z-index>]]

The line-color and z-index values default to rgba(0, 0, 0, .25) and 9999 if omitted.

Usage

postcss([ require('postcss-baseline-grid-overlay') ])

See PostCSS docs for examples for your environment.

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 3.0.1
    1
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 3.0.1
    1
  • 3.0.0
    0
  • 2.0.0
    0

Package Sidebar

Install

npm i postcss-baseline-grid-overlay

Weekly Downloads

1

Version

3.0.1

License

MIT

Last publish

Collaborators

  • andrasna