HamburgerHamburger Icon

Spacing

Spacing is defined by margins and/or padding above and below type and other components. Spacing guidelines are to properly separate sections and pieces of content. Below are the space sizes used throughout Buffy.

Component Spacing

Components can be spaced with either margin or padding applied to the top and/or bottom.

8px

micro

.5rem

@include ltc-spacing($property: "margin-top", $size: "micro");
@include ltc-spacing($property: "margin-bottom", $size: "micro");
@include ltc-spacing($property: "padding-top", $size: "micro");
@include ltc-spacing($property: "padding-bottom", $size: "micro");
Copy

16px

x-small

1rem

@include ltc-spacing($property: "margin-top", $size: "xs");
@include ltc-spacing($property: "margin-bottom", $size: "xs");
@include ltc-spacing($property: "padding-top", $size: "xs");
@include ltc-spacing($property: "padding-bottom", $size: "xs");
Copy

32px

small

2rem

@include ltc-spacing($property: "margin-top", $size: "s");
@include ltc-spacing($property: "margin-bottom", $size: "s");
@include ltc-spacing($property: "padding-top", $size: "s");
@include ltc-spacing($property: "padding-bottom", $size: "s");
Copy

48px

medium

3rem

@include ltc-spacing($property: "margin-top", $size: "m");
@include ltc-spacing($property: "margin-bottom", $size: "m");
@include ltc-spacing($property: "padding-top", $size: "m");
@include ltc-spacing($property: "padding-bottom", $size: "m");
Copy

64px

large

4rem

@include ltc-spacing($property: "margin-top", $size: "l");
@include ltc-spacing($property: "margin-bottom", $size: "l");
@include ltc-spacing($property: "padding-top", $size: "l");
@include ltc-spacing($property: "padding-bottom", $size: "l");
Copy

80px

x-large

5rem

@include ltc-spacing($property: "margin-top", $size: "xl");
@include ltc-spacing($property: "margin-bottom", $size: "xl");
@include ltc-spacing($property: "padding-top", $size: "xl");
@include ltc-spacing($property: "padding-bottom", $size: "xl");
Copy

Spacing beyond the x-large size can use the custom ltc-unit mixin. The below code will add a 200 pixel (25 x 8) top margin:

@include ltc-unit("margin-top", 25);
Copy
Typography Spacing

Spacing can be applied to type by adding a class or using a sass mixin. Note that the micro or x-small spacing may not be applied visually due to existing padding and line-height.

micro

jsx
<h4 className={`type-sp-micro`}>micro</h4>
Copy
scss
@include typography-styles("h4", .5);
Copy

x-small

jsx
<h4 className={`type-sp-xs`}>x-small</h4>
Copy
scss
@include typography-styles("h4", 1);
Copy

small

jsx
<h4 className={`type-sp-s`}>small</h4>
Copy
scss
@include typography-styles("h4", 2);
Copy

medium

jsx
<h4 className={`type-sp-m`}>medium</h4>
Copy
scss
@include typography-styles("h4", 3);
Copy

large

jsx
<h4 className={`type-sp-l`}>large</h4>
Copy
scss
@include typography-styles("h4", 4);
Copy

x-large

jsx
<h4 className={`type-sp-xl`}>x-large</h4>
Copy
scss
@include typography-styles("h4", 5);
Copy
Border & Separator Spacing

Spacing can be applied above or below lines and borders.

micro (top)
@include ltc-border-padding(
  $border-top-pixels: 1,
  $border-bottom-pixels: 0,
  $padding-top: 1,
  $border-top-color: $black
);
Copy
micro (bottom)
@include ltc-border-padding(
  $border-top-pixels: 0,
  $border-bottom-pixels: 1,
  $padding-top: 1,
  $border-top-color: $black
);
Copy
x-small (top)
@include ltc-border-padding(
  $border-top-pixels: 1,
  $border-bottom-pixels: 0,
  $padding-top: 2,
  $border-top-color: $black
);
Copy
x-small (bottom)
@include ltc-border-padding(
  $border-top-pixels: 0,
  $border-bottom-pixels: 1,
  $padding-top: 2,
  $border-top-color: $black
);
Copy
small (top)
@include ltc-border-padding(
  $border-top-pixels: 1,
  $border-bottom-pixels: 0,
  $padding-top: 4,
  $border-top-color: $black
);
Copy
small (bottom)
@include ltc-border-padding(
  $border-top-pixels: 0,
  $border-bottom-pixels: 1,
  $padding-top: 4,
  $border-top-color: $black
);
Copy
medium (top)
@include ltc-border-padding(
  $border-top-pixels: 1,
  $border-bottom-pixels: 0,
  $padding-top: 6,
  $border-top-color: $black
);
Copy
medium (bottom)
@include ltc-border-padding(
  $border-top-pixels: 0,
  $border-bottom-pixels: 1,
  $padding-top: 6,
  $border-top-color: $black
);
Copy
large (top)
@include ltc-border-padding(
  $border-top-pixels: 1,
  $border-bottom-pixels: 0,
  $padding-top: 8,
  $border-top-color: $black
);
Copy
large (bottom)
@include ltc-border-padding(
  $border-top-pixels: 0,
  $border-bottom-pixels: 1,
  $padding-top: 8,
  $border-top-color: $black
);
Copy
x-large (top)
@include ltc-border-padding(
  $border-top-pixels: 1,
  $border-bottom-pixels: 0,
  $padding-top: 10,
  $border-top-color: $black
);
Copy
x-large (bottom)
@include ltc-border-padding(
  $border-top-pixels: 0,
  $border-bottom-pixels: 1,
  $padding-top: 10,
  $border-top-color: $black
);
Copy