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: 4rem.u-bolt-margin-right= margin-right: 2rem
(xx) Possible property values include:
paddingmargin
(yy) Possible direction values include:
toprightbottomleft
(zz) Possible size values include:
none: 0auto: auto[base]: 2remxxsmall: 0.25remxsmall: 0.5remsmall: 1remmedium: 2remlarge: 4remxlarge: 8remxxlarge: 16remxxxlarge: 32rem
Demo
.u-bolt-margin-left
margin-left: 2rem
.u-bolt-margin-left-large
margin-left: 4rem
.u-bolt-margin-left-xxlarge
margin-left: 16rem
.u-bolt-padding
padding: 2rem
.u-bolt-padding-large
padding: 4rem
.u-bolt-padding-left-xlarge
.u-bolt-padding-right-xlarge
.u-bolt-padding-top
.u-bolt-padding-bottom
padding-left: 8rem
padding-right: 8rem
padding-top: 4rem
padding-bottom: 4rem
padding-right: 8rem
padding-top: 4rem
padding-bottom: 4rem