A utility to handle z-index layers with simplicity

The installation can be done in 3 steps:

• Step 1

  Install via NPM:

   $ npm i --save mantis-layers

• Step 2

  You can use this plugin in different ways, but all consist of passing the plugin to the .use method of Stylus. For this example, I'll use it with Gulp in a ES6 enviornment.

   import gulp from 'gulp';
   import stylus from 'gulp-stylus';
   import layers from 'mantis-layers';
  
   gulp.task('css', () =>
   	gulp.src('path-to-source.styl')
   		.pipe(stylus({
   			use: [
   				layers()
   			]
   		}))
   		.pipe(gulp.dest('path-to-dest/'))
   );

• Step 3

  Now just import the plugin into your .styl file as you already know.

   @import 'mantis-layers'

$mantis.layers.context = {
	default: (element-a element-b element-c),
	element-a: (child-a child-b)
	element-b: (child-b child-a)
}

.element-a
	z-index element-a

	.child-a
		z-index element-a child-a

	.child-b
		z-index element-a child-b

.element-b
	z-index element-b

	.child-a
		z-index element-b child-a

	.child-b
		z-index element-b child-b

.element-c
	z-index element-c

Will result:

.element-a {
	z-index: 100;
}

.element-a .child-a {
	z-index: 100;
}

.element-a .child-b {
	z-index: 200;
}

.element-b {
	z-index: 200;
}

.element-b .child-a {
	z-index: 200;
}

.element-b .child-b {
	z-index: 100;
}

.element-c {
	z-index: 300;
}

© 2016 Acauã Montiel

MIT License