Utilities
🔗
Each of the spacing units defined in
sky-toolkit-core/settings/globals are available as
u-margin and u-padding utility classes. Each of these can be applied on:
-allsides-topside-rightside-bottomside-leftside
With the following size suffixes:
| Suffix | Size |
|---|---|
| No suffix (Default) | $global-spacing-unit |
-none |
0 |
-tiny |
$global-spacing-unit-tiny |
-small |
$global-spacing-unit-small |
-large |
$global-spacing-unit-large |
-x-large |
$global-spacing-unit-x-large |
Margin
Applies spacing to the outside of the box-model.
No Margin
Tiny Margin
Small Margin
Default Margin
Large Margin
Extra Large Margin
No Top Margin
Tiny Top Margin
Small Left Margin
Default Right Margin
Large Bottom Margin
Extra Large Bottom Margin
<div class="u-margin-all-none">No Margin</div>
<div class="u-margin-all-tiny">Tiny Margin</div>
<div class="u-margin-all-small">Small Margin</div>
<div class="u-margin-all">Default Margin</div>
<div class="u-margin-all-large">Large Margin</div>
<div class="u-margin-all-x-large">Extra Large Margin</div>
<hr class="c-keyline"/>
<div class="u-margin-top-none">No Top Margin</div>
<div class="u-margin-top-tiny">Tiny Top Margin</div>
<div class="u-margin-left-small">Small Left Margin</div>
<div class="u-margin-right">Default Right Margin</div>
<div class="u-margin-bottom-large">Large Bottom Margin</div>
<div class="u-margin-bottom-x-large">Extra Large Bottom Margin</div>
Padding
Applies spacing to the inside of the box-model.
No Padding
Tiny Padding
Small Padding
Default Padding
Large Padding
Extra Large Padding
No Top Padding
Tiny Top Padding
Small Left Padding
Default Right Padding
Large Bottom Padding
Extra Large Bottom Padding
<div class="u-padding-all-none">No Padding</div>
<div class="u-padding-all-tiny">Tiny Padding</div>
<div class="u-padding-all-small">Small Padding</div>
<div class="u-padding-all">Default Padding</div>
<div class="u-padding-all-large">Large Padding</div>
<div class="u-padding-all-x-large">Extra Large Padding</div>
<hr class="c-keyline"/>
<div class="u-padding-top-none">No Top Padding</div>
<div class="u-padding-top-tiny">Tiny Top Padding</div>
<div class="u-padding-left-small">Small Left Padding</div>
<div class="u-padding-right">Default Right Padding</div>
<div class="u-padding-bottom-large">Large Bottom Padding</div>
<div class="u-padding-bottom-x-large">Extra Large Bottom Padding</div>