Utilities ~ Layers
image
Be on top of what is on top

Tired of that z-index: 9999; as a desparate attempt to put a layer on top, because you have no idea or oversight into layer orders across your code base? Silva uses a simple but effective dictionary system to bring back order into the chaos.

Usage

The layer dictionary system is a global map available across your code base:

$z-layers: ( "below": -1, "default": 1, "page": 10 );

To add a layer, think of a meaningful semantic name, and add it to the map. It is recommended to leave gaps into groups of layers, allowing you to fit in new layers in between. Next, rather than hardcoding a z-index value, use the lookup function:

z-index: z('key');

Limitations

The dictionary system for layers does not automatically prevent developers from hardcoding z-index values. However, a global search across a codebase for z-index is an easy way to check for compliance. Note that the dictionary approach only works for layers within your own control, third party widgets will not adhere to it.