Styleguide
-
Molecules
-
Components
- Auth Modal
- Banner
- Category Filter Menu
- Comparison Table
- Countdown Timer
- Expandable List
- Featured Event
- Flex Cols Img
- Flex Cols
- Form Contact Default
- Hall of Fame List
- Hero
- Ico Three Col
- Ico Two Col
- Info Bullets
- Logo Card Grid
- Logos XS
- Multi Ico List
- One Col
- Resource Thumbnail
- Security Details
- Stepline
- Subnav
- Two Col
-
Styles
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. |