Stack space for flow elements
Created by: thewebartisan7
This feature is best explained here: https://every-layout.dev/layouts/stack/
And an example can be found here: https://jsfiddle.net/c2fbo0u3/1/
In the example I have just added two different space size, 1.5rem and large 3rem, but could be also added more.
As explained in every-layout.dev this is useful when we need to add space between elements, and in addition I added space X and Y, something like already bootstrap m-* utilities offer.
So instead of writing:
<div>
<div></div>
<div class="mt-3"></div>
<div class="mt-3"></div>
</div>
Can be:
<div class="stack-y">
<div></div>
<div></div>
<div></div>
</div>
Or instead of:
<div class="d-flex">
<div></div>
<div class="ml-3"></div>
<div class="ml-3"></div>
</div>
Can be:
<div class="d-flex stack-x">
<div></div>
<div></div>
<div></div>
</div>
Here https://jsfiddle.net/c2fbo0u3/1/ there are all examples, also creating a reverse space for space-x, and nested.
Nested could be also created without using space-nested but just adding for each nested element the same space-x/y classes. Example:
<div class="stack-x stack-nested d-flex">
<div>Stack nested X One</div>
<div>Stack nested X Two</div>
<div class="d-flex">
<div>Stack nested X One</div>
<div>Stack nested X Two</div>
<div>Stack nested X Three</div>
</div>
</div>
Can be:
<div class="stack-x d-flex">
<div>Stack nested X One</div>
<div>Stack nested X Two</div>
<div class="stack-x d-flex">
<div>Stack nested X One</div>
<div>Stack nested X Two</div>
<div>Stack nested X Three</div>
</div>
</div>