Nanoprogrammed Penultimate Musicianship
    Wondering what’s next for npm?Check out our public roadmap! »

    postcss-g-index

    0.1.1 • Public • Published

    postcss-g-index

    postcss library for z-index handling

    Beneath the sun logo

    g-index

    a small collection of functions and mixins to handle your elements’ z-index. g-index uses "G"eographical names to make it very clear where the element will be placed.

    npm

    npm install --save-dev postcss-g-index

    bower

    bower install postcss-g-index

    Demo

    The demo uses the SCSS version Beneath the sun

    Codepen demo

    Names

    'underground' 'sea'   'land' 'hill'
     = -3          = 0     = 3     = 6
    'mountain'    'cloud' 'moon' 'sun'
     = 9           = 12    = 15   = 18

    Usage

    postcss().use(require('postcss-g-index'))
      .process(/* ... */)
      .then(/* ... */)

    input

    .tooltip {
      z-index: g-index('land');
    }
    .dialog {
      z-index: g-index('mountain');
    }
    .dialog-backdrop {
      z-index: g-below('mountain');
    }

    output

    .tooltip {
      z-index: 0;
    }
    .dialog {
      z-index: 9;
    }
    .dialog-backdrop {
      z-index: 8;
    }

    Custom levels

    const gIndex = require('postcss-g-index')
     
    postcss().use(gIndex({
      levels: {
        'down-there': -1,
        'here': 0,
        'above-us': 1,
        'out-of-reach': 5,
        'way-up-in-the-sky': 100
      }
    }))
      .process(/* ... */)
      .then(/* ... */)

    Install

    npm i postcss-g-index

    DownloadsWeekly Downloads

    3

    Version

    0.1.1

    License

    MIT

    Last publish

    Collaborators

    • avatar