Box Model

Box Model ensures consistent margins, paddings and borders across our products. The class name is presented in pixels, but being translated to REM units via Scss functions during compilation.

Spacing Tokens

We use a set of spacing tokens to ensure consistent margins, paddings and borders across our products. The class name is presented in pixels, but being translated to REM units via SCSS functions during compilation. The tokens are:

Token Name Value (px) Value (rem)
0 0 0
2 2 0.125
4 4 0.25
8 8 0.5
12 12 0.75
16 16 1
20 20 1.25
24 24 1.5
28 28 1.75
32 32 2
40 40 2.5
48 48 3
52 52 3.25
56 56 3.5
64 64 4
80 80 5
96 96 6
128 128 8
160 160 10
192 192 12
100 100 6.25
200 200 12.5
300 300 18.75

Utility classes

Class Scss Define Compiled CSS
u-padding-#{$s} padding: pxToRem($s) !important; padding: #{pxToRem($s)}rem !important;
u-padding-inline-#{$s} padding-inline: pxToRem($s) !important; padding-inline: #{pxToRem($s)}rem !important;
u-padding-inline-start-#{$s} padding-inline-start: pxToRem($s) !important; padding-inline-start: #{pxToRem($s)}rem !important;
u-padding-inline-end-#{$s} padding-inline-end: pxToRem($s) !important; padding-inline-end: #{pxToRem($s)}rem !important;
u-padding-block-#{$s} padding-block: pxToRem($s) !important; padding-block: #{pxToRem($s)}rem !important;
u-padding-block-start-#{$s} padding-block-start: pxToRem($s) !important; padding-block-start: #{pxToRem($s)}rem !important;
u-padding-block-end-#{$s} padding-block-end: pxToRem($s) !important; padding-block-end: #{pxToRem($s)}rem !important;
u-margin-#{$s} margin: pxToRem($s) !important; margin: #{pxToRem($s)}rem !important;
u-margin-inline-start-#{$s} margin-inline-start: pxToRem($s) !important; margin-inline-start: #{pxToRem($s)}rem !important;
u-margin-inline-end-#{$s} margin-inline-end: pxToRem($s) !important; margin-inline-end: #{pxToRem($s)}rem !important;
u-margin-block-#{$s} margin-block: pxToRem($s) !important; margin-block: #{pxToRem($s)}rem !important;
u-margin-block-start-#{$s} margin-block-start: pxToRem($s) !important; margin-block-start: #{pxToRem($s)}rem !important;
u-margin-block-end-#{$s} margin-block-end: pxToRem($s) !important; margin-block-end: #{pxToRem($s)}rem !important;
u-gap-#{$s} gap: pxToRem($s) !important; gap: #{pxToRem($s)}rem !important;
u-row-gap-#{$s} row-gap: pxToRem($s) !important; row-gap: #{pxToRem($s)}rem !important;
u-column-gap-#{$s} column-gap: pxToRem($s) !important; column-gap: #{pxToRem($s)}rem !important;
u-margin-auto margin: auto !important; Stays the same
u-margin-inline-auto margin-inline: auto !important; Stays the same
u-margin-inline-start-auto margin-inline-start: auto !important; Stays the same
u-margin-inline-end-auto margin-inline-end: auto !important; Stays the same
u-margin-block-auto margin-block: auto !important; Stays the same
u-margin-block-start-auto margin-block-start: auto !important; Stays the same
u-margin-block-end-auto margin-block-end: auto !important; Stays the same
u-border-width-0 border-width:0!important; Stays the same
u-mobile-border-width-0 @media #{$break1} { border-width:0!important;} @media (max-width:767.99px) { border-width:0!important; } 
<div class="box u-margin-block-start-32 u-padding-block-end-56"></div>