Arbitrary spacing shims

Most unidirectional spacing relationships are best represented as listings, and more complex relationships as grids or tiles. However, sometimes we need a way to apply space that can’t reasonably be encapsulated in a discrete layout object; this pattern is a spacing shim.

To implement a spacing shim, the base object should provide no styles of its own. Use modifiers for different amounts of space and provide breakpoint modifiers for further flexibility in complex responsive layouts.

When applying a spacing shim, we should resist the temptation to apply it directly to an element that already opts into another object — it might easily be overridden by another margin rule with higher specificity. Instead, compose it around another element, or add it as a single element in the document flow.

.space--small {
  margin-bottom: 1.2rem;
}
 
.space--medium {
  margin-bottom: 2.4rem;
}
 
@media (min-width: $BREAKPOINT_SMALL) {
  .space--none\@small {
    margin-bottom: 0;
  }
 
  .space--small\@small {
    margin-bottom: 1.2rem;
  }
 
  .space--medium\@small {
    margin-bottom: 2.4rem;
  }
}
<!-- Use an empty spacing shim between elements: -->
<h2 class="text text--large">Example Content</h2>
<div class="space space--small"></div>
<p>And a bit more example content.</p>
<!-- Alternatively, wrap an element in a spacing shim: -->
<div class="space space--small">
  <h2 class="text text--large">Example Content</h2>
</div>
<p>And a bit more example content.</p>