Bolt Spacing
Utility Description
Add the utility class .u-bolt-xx-yy-zz
where xx equals the spacing property, yy equals the direction, and zz (optional) equals the t-shirt size you wish to apply. For example:
.u-bolt-margin-left-large
= margin-left: 3.1rem.u-bolt-margin-right
= margin-right: 1.55rem
(xx) Possible property values include:
padding
margin
(yy) Possible direction values include:
top
right
bottom
left
(zz) Possible size values include:
none
: 0auto
: auto[base]
: 1.55remxxsmall
: 0.19375remxsmall
: 0.3875remsmall
: 0.775remmedium
: 1.55remlarge
: 3.1remxlarge
: 6.2remxxlarge
: 12.4remxxxlarge
: 24.8rem
Demo
.u-bolt-margin-left
margin-left: 1.55rem
.u-bolt-margin-left-large
margin-left: 3.1rem
.u-bolt-margin-left-xxlarge
margin-left: 12.4rem
.u-bolt-padding
padding: 1.55rem
.u-bolt-padding-large
padding: 3.1rem
.u-bolt-padding-left-xlarge
.u-bolt-padding-right-xlarge
.u-bolt-padding-top
.u-bolt-padding-bottom
padding-left: 6.2rem
padding-right: 6.2rem
padding-top: 3.1rem
padding-bottom: 3.1rem
padding-right: 6.2rem
padding-top: 3.1rem
padding-bottom: 3.1rem