0.3.1 • Published 8 years ago
beneath-the-sun v0.3.1
Beneath the sun
postcss and SCSS 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 beneath-the-sun
bower
bower install beneath-the-sun
Demo
Names
'underground' 'sea' 'land' 'hill'
= -3 = 0 = 3 = 6
'mountain' 'cloud' 'moon' 'sun'
= 9 = 12 = 15 = 18
There is no reason to use insane numbers like 999999999 when you know the limits. The steps between the values can be adjusted. The default value is 3
$g-index-levels: ( 'underground': -1,
'sea': 0,
'land': 1,
'hill': 10,
'mountain': 30,
'cloud': 50,
'moon': 100,
'sun': 200
) ;
You can change the names too
$g-index-levels: ( 'below': -1,
'zero': 0,
'above': 1,
'fixed': 2,
'modal': 10
) ;
.tooltip {
z-index: g-index('above');
}
.dialog {
z-index: g-index('modal');
}
.dialog-backdrop {
z-index: g-below('modal');
}
You can also add your own debugging method. If debugging is enabled the elments will be translated on the z-axis to show the layers in 3-d space
postcss
for more options look at postcss-g-index
.tooltip {
z-index: g-index('land');
}
.dialog {
z-index: g-index('mountain');
}
.dialog-backdrop {
z-index: g-below('mountain');
}