Utilities

Layout, spacing and alignment helpers on the golden-ratio scale.

Source: src/stylus/base/helpers.styl, src/stylus/elements/padding.styl

Flex

.flex makes a row; .flex-column, .flex-wrap, .flex-middle (align), .flex-between and .flex-center (justify) adjust it.

Left Right 
<div class="flex flex-middle flex-between padding-md">
  <span class="badge primary">Left</span>
  <span class="badge secondary">Right</span>
</div>

Gap

.gap-xs through .gap-xxl space the children of a flex or grid container, on the same golden-ratio scale as padding and margin: .382, .618, 1, 1.618, 2.618 and 4.236rem. .gap-x-* and .gap-y-* set one axis; .gap-0 removes it.

xsxs
mdmd
xlxl
<div class="flex gap-xs"><span class="badge">xs</span><span class="badge">xs</span></div>
<div class="flex gap-md"><span class="badge">md</span><span class="badge">md</span></div>
<div class="flex gap-xl"><span class="badge">xl</span><span class="badge">xl</span></div>

Padding and margin

.padding-*, .px-*, .py-*, .pt-*, .pb-* and the matching .margin-*, .mt-*, .mb-* use the same six steps. .p-0 and .m-0 reset.

padding-sm
padding-lg
<div class="card padding-sm">padding-sm</div>
<div class="card padding-lg">padding-lg</div>