diff options
Diffstat (limited to 'node_modules/postcss-zindex/README.md')
| -rw-r--r-- | node_modules/postcss-zindex/README.md | 89 |
1 files changed, 89 insertions, 0 deletions
diff --git a/node_modules/postcss-zindex/README.md b/node_modules/postcss-zindex/README.md new file mode 100644 index 00000000..e27eacf3 --- /dev/null +++ b/node_modules/postcss-zindex/README.md @@ -0,0 +1,89 @@ +# [postcss][postcss]-zindex [][ci] [][npm] [][deps] + +> Reduce z-index values with PostCSS. + +## Install + +With [npm](https://npmjs.org/package/postcss-zindex) do: + +``` +npm install postcss-zindex --save +``` + +## Example + +Sometimes, you may introduce z-index values into your CSS that are larger than +necessary, in order to improve your understanding of how each stack relates to +the others. For example, you might have a modal overlay at `5000` and the dialog +for it at `5500` - so that modal classes occupy the `5xxx` space. + +But in production, it is unnecessary to use such large values for z-index where +smaller values would suffice. This module will reduce all z-index declarations +whilst respecting your original intent; such that the overlay becomes `1` and +the dialog becomes `2`. For more examples, see the [tests](test.js). + +### Input + +```css +.modal { + z-index: 5000 +} + +.modal-overlay { + z-index: 5500 +} +``` + +### Output + +```css +.modal { + z-index: 1 +} + +.modal-overlay { + z-index: 2 +} +``` + +Note that this module does not attempt to normalize relative z-index values, +such as `-1`; indeed, it will abort immediately when encountering these values +as it cannot be sure that rebasing mixed positive & negative values will keep +the stacking context intact. Be careful with using this module alongside +JavaScript injected CSS; ideally you should have already extracted all of your +stacking context into CSS. + +## API + +### zindex([options]) + +#### options + +##### startIndex + +Type: `number` +Default: `1` + +Set this to any other positive integer if you want to override z-indices from +other sources outside your control. For example if a third party widget has a +maximum z-index of `99`, you can set this to `100` and not have to worry about +stacking conflicts. + +## Usage + +See the [PostCSS documentation](https://github.com/postcss/postcss#usage) for +examples for your environment. + +## Contributing + +Pull requests are welcome. If you add functionality, then please add unit tests +to cover it. + +## License + +MIT © [Ben Briggs](http://beneb.info) + +[ci]: https://travis-ci.org/ben-eb/postcss-zindex +[deps]: https://gemnasium.com/ben-eb/postcss-zindex +[npm]: http://badge.fury.io/js/postcss-zindex +[postcss]: https://github.com/postcss/postcss |