Spacing

The design system aims to create a generic spacing system, in an attempt to maintain consistency across different components. Hopefully, the system will also allow for flexibility in the future.

Base units

Default unit (1rem = 16px)

A series of units created to space elements in the page content. This system allows for responsiveness, having different values for smaller and larger screen widths.

Base units

For headings

• h1 uses space-xl for margin-top and space-sm for margin-bottom.
• Other headings use space-lg for margin-top and space-sm for margin-bottom.

Usage

When working in scss, a mixin is available, do-space. Simply send the desired property (usually margin-top or margin-bottom) and the desired space unit (xs, sm, md, lg, xl). The value zero can also be passed to set the property to zero.

@include do-space(margin-top, xl);    
@include do-space(margin-bottom, xl);

Utility classes are also available for inline use, these can be useful if elements need to wrapped in container divs and the ability to collapse margins is lost, resulting in unwanted extra margins. These are available for both margin-top and bottom and padding top and bottom at each of the space units. These classes replicate the responsiveness detailed above.

<h1 class=”margin-top-zero”>
<p class=”margin-top-xs”>
<p class=”padding-bottom-sm”>
<p class=”padding-top-xl”>

These classes should be used sparingly. As mentioned above, using padding should be avoided unless absolutely neccessary.

Dividers

If more space is required than the above options allow, consider using a hr tag to divide content.

• <hr /> uses space-lg for margins top and bottom.
• <hr class=”xl” /> uses space-xl for margins top and bottom.