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