[v3] Add variations to the layer classes

[titouanmathis]

Proposal

Adding --above and --under modifiers to the layer classes.

.layer-goku {
  z-index: 9000;
}

.layer-goku--above {
  z-index: 9001;
}

.layer-goku--under {
  z-index: 8999;
}

The idea is to have a more precise way to stack elements on one another without adding custom CSS. For example, if you have a modal layer, it can be very practical to be able to place elements just above/under it. For example:

<div class="layer-modal">
  ...
</div>

<p class="layer-modal--above">
  I am over the modal! 💪 
</p>

👍 Pros

• Simpler way to stack elements on one another

👎 Cons

• More classes

[notjb]

I think the idea is good, but it is more a pattern that can be used than a needed feature. The fact it will automatically generate 2 more classes for each layer is not a good thing to me.

[perruche]

+1 @notjb
This feature is already available in the framework via the layer() function