Paddings & Margins

Paddings
Class Description Quick Example
Smarty Paddings (px)
.p--* .pt--* .pr--* .pb--* .pl--*
.p-auto .p-inherit
Bootstrap Paddings (rem)
.p-0 .p-1 .p-2 .p-3 .p-4 .p-5 .p[l|r|t|b|x|y]-*
Smarty - Bootstrap Added (rem)
.pl-* and .pr-* not added! .p-6 .p-7

Paddings variables defined in: _core/utils/_variables.scss
Paddings are in pixels.

p--* = all paddings
pt--* = padding top
pr--* = padding right
pb--* = padding bottom
pl--* = padding left

.p--20 (20px paddings)
.pt--20 (20px top paddings)
.pr--20 (20px right paddings)
.pb--20 (20px bottom paddings)
.pl--20 (20px left paddings)
$util-padding-val: 0 1 2 3 4 5 6 7 8 9 10 12 15 18 20 22 25 30 35 40 45 50 60 70 80 90 100 120 150 180 200 250 280 300 350 400 450 500 !default;

.p--20

.pt--20

.pr--20

.pb--20

.pl--20

Margins
Class Description Quick Example
Smarty Margins (px)
.m--* .mt--* .mr--* .mb--* .ml--*
.mt--n* .mr--n* .mb--n* .ml--n*
.m-auto .m-inherit
Bootstrap Margins (rem)
.m-0 .m-1 .m-2 .m-3 .m-4 .m-5 .m[l|r|t|b|x|y]-*
Smarty - Bootstrap Added (rem)
.m-6 .m-7

Margins variables defined in: _core/utils/_variables.scss
Margins are in pixels.

m--* = all margins
mt--* = margin top
mr--* = margin right
mb--* = margin bottom
ml--* = margin left

mt--n* = negative margin top
mr--n* = negative margin right
mb--n* = negative margin bottom
ml--n* = negative margin left

.m--20 (20px margins)
.mt--20 (20px top margin)
.mr--20 (20px right margin)
.mb--20 (20px bottom margin)
.ml--20 (20px left margin)

.mt--n20 (-20px top margin)
.mr--n20 (-20px right margin)
.mb--n20 (-20px bottom margin)
.ml--n20 (-20px left margin)
$util-margin-val: 0 1 2 3 4 5 6 7 8 9 10 12 15 18 20 22 25 30 35 40 45 50 60 70 80 90 100 120 150 180 200 250 280 300 350 400 450 500 !default; * uses same variables as paddings

.m--20
.mt--20
.mr--20
.mb--20
.ml--20
Negative class example
smarty
.mt--n50