Flow

Add the class u-flow to any container, to space its contents.

<div class="u-flow">
  <h1>Flow</h1>
  <p>Example</p>
  <img src="example.jpg" />
  <div>Example</div>
</div>

Spacing content effectively is imperative to good component composition. Taking learnings from broader CSS spacing paradigms, rather than dictate spacing at a child-level, we set the rules at a parent-level, overriding at a child-level where appropriate.

With this approach, we can add any number of new children to a parent without breaking this existing variants. This mindset is crucial to extending the design system over time.

To achieve this, we use the flow concept. The lobotomised owl selector * + * does the heavy lifting here. Rather than every element 'pushing down', any children that follow another child 'push up'.

.parent > * {
  margin-bottom: 1rem;

  &:last-child {
    margin-bottom: 0;
  }
}

.parent > * + * {
  margin-top: 1rem;
}

This also means we don't have to reset the last child and remove unnecessary space.

Utility classes

Instead of writing the above for every component, utility classes have been created to handle this consistently. These inherit from the Space system underpinning the design, and use the same 't-shirt sizing' concept.

.u-flow will produce a 'small' space, and .u-flow--l a 'large' one.

<div class="c-component">
  <h2 class="c-component__title u-margin-top-m">...</h2>
</div>

<div class="c-component u-flow--m">
  <h2 class="c-component__title">...</h2>
</div>

SCSS Mixin

It's also possible to apply the flow concept to a component's SCSS via the mixin: flow($size).

Source → Compiled

.c-component {
  @include flow('l');
}

.c-component > * + * {
  margin-top: 36px;
  margin-top: var(--space-l);
}