Vertical spacing

View typographical spacing on the typography test page.

Negative space is an important part of website design (and design in general). It helps to create visual order, and provides room for our eyes to rest between pieces of content.

This section is specifically concerned with vertical spacing between block-level elements. Amplify manages this in two ways:

• Each component that makes up a web page has the class component added to its outermost element. Amplify uses the next-sibling combinator to target this class, adding margin-top to all but the very first component in a series to space them apart vertically.

  The code for this resides in 50-core-components/_main.scss.

• Within those components, and anywhere else that vertical spacing is needed between block-level elements, Chris Burnell's stack mixin gives us the option to add vertical spacing. As it's a Sass mixin, we can use specified units of measurement at whatever value we choose, and that value can vary depending on the use case and design requirements thanks to the @include at-rule.

  The mixin resides in 20-mixins/_stack.scss.

The mixin was adapted from Heydon Pickering's lobotomized owl technique, which developed into the stack in Every Layout.