Styleguide

Spacing

Description

A summary of spacing used on circleci.com

Spacing

Codified Spacing

sample value code
6px
scss variable:
$spacing-base
classes:
.margin-top-micro .margin-bottom-micro .margin-left-base .margin-bottom-base .padding-top-micro .padding-bottom-micro .padding-vertical-micro .reduced-bootstrap-padding-right .reduced-bootstrap-padding-left
12px
scss variable:
$spacing-small-horizontal
classes:
.margin-left-small .margin-right-small .padding-horizontal-small .padding-left-small .padding-right-small .screen-md-up-margin-right-small
18px
scss variable:
$spacing-small-vertical
classes:
.margin-top-small .margin-bottom-small .padding-top-small .padding-bottom-small .screen-md-margin-top-small .screen-md-margin-bottom-small .screen-md-min-margin-bottom-small .screen-sm-margin-top-small .margin-vertical-small
24px
scss variable:
$spacing-medium-horizontal $spacing-300-vertical
classes:
.margin-bottom-300 .margin-top-300 .padding-bottom-300 .padding-top-300 .padding-left-medium .padding-right-medium .margin-vertical-300 .padding-vertical-300
48px
scss variable:
$spacing-intermediate-large-horizontal $spacing-medium-vertical
classes:
.margin-top-medium .margin-bottom-medium .padding-top-medium .padding-bottom-medium .padding-left-medium .padding-right-medium .screen-md-margin-top-medium .screen-md-margin-bottom-medium .screen-sm-margin-top-medium .screen-sm-padding-top-medium .screen-sm-margin-bottom-medium .margin-vertical-medium .padding-horizontal-intermediate-large
60px
scss variable:
$spacing-large-horizontal
classes:
.padding-left-large .padding-right-large .screen-md-padding-right-large .padding-horizontal-large
66px
scss variable:
$spacing-intermediate-large-vertical
90px
scss variable:
$spacing-large-vertical
classes:
.margin-top-large .margin-bottom-large .padding-top-large .padding-bottom-large .screen-md-up-padding-bottom-large .screen-sm-margin-top-large .margin-vertical-large

Misc Spacing

The following spacing values are used in various parts of the side, but don't adhere to the codified spacing rules (which are technically supposed to be multiples of 6).

70px
scss variable:
$nav-height $nav-offset
Where it's used:

This is used to define the height of the nav, and related elements.

120px
scss variable:
$nav-offset-subnav
Where it's used:

This is used to define the height of the nav offset, when a subnav is included on the page (which increases the height of the space taken up by the nav on scroll.