postcss-g-index

postcss library for z-index handling

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(/* ... */)