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
.d-stack0
.d-stack0
.d-stack1
.d-stack1
.d-stack2
.d-stack2
.d-stack4
.d-stack4
.d-stack6
.d-stack6
.d-stack8
.d-stack8
.d-stack12
.d-stack12
.d-stack16
.d-stack16
.d-stack24
.d-stack24
.d-stack32
.d-stack32
.d-stack48
.d-stack48
.d-stack64
.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
.d-flow0
.d-flow0
.d-flow1
.d-flow1
.d-flow2
.d-flow2
.d-flow4
.d-flow4
.d-flow6
.d-flow6
.d-flow8
.d-flow8
.d-flow12
.d-flow12
.d-flow16
.d-flow16
.d-flow24
.d-flow24
.d-flow32
.d-flow32
.d-flow48
.d-flow48
.d-flow64
.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>