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.

    Install

    npm i postcss-baseline-grid-overlay

    DownloadsWeekly Downloads

    4

    Version

    3.0.1

    License

    MIT

    Last publish

    Collaborators

    • andrasna