Stacks & Flows
Stacks and flows are preset layouts which inject margins between sibling elements within a parent element. This method is favored over applying margins to an element, as it allows for greater modularity and flexibility with layouts.
Stacks
The Stack layout works by using the adjacent sibling combinator (+) to apply a top margin only to subsequent elements, meaning it will only work on the second item. Furthermore, to allow for differing nesting Stack values, these margins are scoped to apply only to direct children of the parent (e.g. .d-stack[#] > * + *).
| Pixel | Class |
|---|---|
| 0px | .d-stack0 |
| 1px | .d-stack1 |
| 2px | .d-stack2 |
| 4px | .d-stack4 |
| 6px | .d-stack6 |
| 8px | .d-stack8 |
| 12px | .d-stack12 |
| 16px | .d-stack16 |
| 24px | .d-stack24 |
| 32px | .d-stack32 |
| 48px | .d-stack48 |
| 64px | .d-stack64 |
<div class="d-stack0">…</div>
<div class="d-stack1">…</div>
<div class="d-stack2">…</div>
<div class="d-stack4">…</div>
<div class="d-stack6">…</div>
<div class="d-stack8">…</div>
<div class="d-stack12">…</div>
<div class="d-stack16">…</div>
<div class="d-stack24">…</div>
<div class="d-stack36">…</div>
<div class="d-stack48">…</div>
<div class="d-stack64">…</div>Flows
The Flow layout is similar to the Stacks layout above, except instead of apply a top margin to adjacent children, it applies a left margin. This is useful for when you want to space our elements horizontally.
| Pixel | Class |
|---|---|
| 0px | .d-flow0 |
| 1px | .d-flow1 |
| 2px | .d-flow2 |
| 4px | .d-flow4 |
| 6px | .d-flow6 |
| 8px | .d-flow8 |
| 12px | .d-flow12 |
| 16px | .d-flow16 |
| 24px | .d-flow24 |
| 32px | .d-flow32 |
| 48px | .d-flow48 |
| 64px | .d-flow64 |
<div class="d-flow0">…</div>
<div class="d-flow1">…</div>
<div class="d-flow2">…</div>
<div class="d-flow4">…</div>
<div class="d-flow6">…</div>
<div class="d-flow8">…</div>
<div class="d-flow12">…</div>
<div class="d-flow16">…</div>
<div class="d-flow24">…</div>
<div class="d-flow36">…</div>
<div class="d-flow48">…</div>
<div class="d-flow64">…</div>