Spacing Units

Apply margin or padding to any element using HTML or SCSS

• How to
  • HTML Example:
  • SCSS Example:
• HTML
• SCSS
  • get-spacing
  • get-spacing sizes in pixels

How to

Warning: Configuration recommended

To protect legacy usages, these utilities produce pixels by default. But, the best practice is to use rems for margin and padding. This allows components to grow as the user increases their browser font size.

Learn more about how to set this configuration for your project here.

To use these styles in a Vue component SCSS, you'll need:

@import '~@skyline/scss/src/core/UI.required';
@import '~@skyline/scss/src/utilities/utilities.spacing';

HTML Example:

<div class="u-mt--400">Example of margin 400 on a div</div>
<div class="u-pa--800">Example of padding 800 on a div</div>

SCSS Example:

.example-of-using-spacing-units {
  margin-top: get-spacing(300);
}
// get-spacing() is also variadic and can be used with lists.
.example-of-variadic-usage {
  margin: get-spacing(300 200);
}

HTML

utility

• uutility

-

type

• mmargin

• ppadding

direction

• ttop

• rright

• bbottom

• lleft

• vvertical

• hhorizontal

• aall

--

size

• 00px

• 1004px

• 2008px

• 30012px

• 40016px

• 50020px

• 60024px

• 70028px

• 80032px

• 90036px

• 100040px

• 120048px

• 140056px

SCSS

get-spacing

SCSS file imports

To use these styles in a Vue component SCSS, you’ll need:

@import '~@skyline/scss/src/core/UI.required';

get-spacing($values, $rems);

Returns

Parameters

$values: <Number|List>

$rems: <Bool>

Default value:false

get-spacing sizes in pixels

• padding || margin: get-spacing(0);-0px

• padding || margin: get-spacing(100);-4px

• padding || margin: get-spacing(200);-8px

• padding || margin: get-spacing(300);-12px

• padding || margin: get-spacing(400);-16px

• padding || margin: get-spacing(500);-20px

• padding || margin: get-spacing(600);-24px

• padding || margin: get-spacing(700);-28px

• padding || margin: get-spacing(800);-32px

• padding || margin: get-spacing(900);-36px

• padding || margin: get-spacing(1000);-40px

• padding || margin: get-spacing(1200);-48px

• padding || margin: get-spacing(1400);-56px