Flow Utility

Our flow utility is constructed as follows:

.flow>*+* {
margin-top: var(--flow-space, var(--size-400));
}

Purpose

Our flow utility is heavily inspired by Every Layout's Flow utility. As quoted:

The trick is to style the context, not the individual element(s). The Stack layout primitive injects margin between elements via their common parent:

Example

<ul class="[ stacked-list ] [ flow ]"></ul>
.stacked-list {
--flow-space: 1.5em;
}