Flow Utility Classes

Flow Utility Classes

Website Documentation / Webteam

The flow utility provides flow and rhythm between direct sibling elements. These classes are added to wrappers and impact direct children only. Child or grandchild elements can override these classes to change the flow value. The default class is flow and has the value of --flow-space: clamp(1.13rem, 1.08rem + 0.24vw, 1.25rem); — other flow classes are available and are tied to the spacing custom properties values — these are documented below.

The flow concept is explained well on Andy Bell's website

  • flow | default spacing | uses clamp
  • flow-2xs | uses --space-2xs
  • flow-s | uses --space-s
  • flow-m | uses --space-m
  • flow-l | uses --space-l
  • flow-xl | uses --space-xl
  • flow-3xl | uses --space-3xl
  • flow-0 | removes any space between child elements

Flow Space Example Code

The .flow class is simple and can be added to most containers — the code looks like the following:

// base flow class
  .flow > *+* {
    margin-top: var(--flow-space, 1em);
  }

Default flow-space Value

// default flow-space value
  --flow-space: clamp(1.13em, 1.03em + 0.49vw, 1.38em);

Example .flow Use

//HTML
  <div class="flow">
    <div> ... </div>
    [flow space]
    <p> ... </p>
    [flow space]
    <blockquote> ... </blockqute>
  </div>

By defining --flow-space in the CSS of either a child element of .flow, or on .flow itself: that value will be honoured in line with the cascade and specificity. For example: if you set --flow-space: 3rem on the third element inside of a .flow container: only that element will have a 3rem top margin.

// SCSS — changing the --flow-space CP
  blockquote {
    --flow-space: var(--space-m);
    font-size: var(--fs-0);
    font-style: italic;
    font-family: var(--ff-serif);
    margin-top: var(--space-m);
    margin-inline-start: var(--space-l);
    }
  }

Related Content