PostCSS Spacing

Spacings are defined in the design system, and for each size there is a class name. Assign the desired class name to a div element to add the space. Spaces push vertically by default. To change it to horizontal (in-line) use the .horizontal class name. Spaces can be specified to be shown in a specific media query, this allows different spacings in different screen resolutions.

<span class="space size-160 xs-hide lg-show"></span>
<span class="space size-24 horizontal xs-show lg-hide"></span>

Classes

Below you can find the class names for all sizes. Make sure your element includes both classes as specified.

Class NameSize
.space.size-22px
.space.size-44px
.space.size-88px
.space.size-1212px
.space.size-1616px
.space.size-2424px
.space.size-3232px
.space.size-4848px
.space.size-5656px
.space.size-6464px
.space.size-9696px
.space.size-128128px
.space.size-180180px

Show & Hide Spaces

Each element can be specified to be shown or hidden in a specific media query.

Class NameDescription
.space.horizontalHorizontal space (in-line)
.xs-hideHide on XS media query
.xs-showShow on XS media query
.sm-hideHide on SM media query
.sm-showShow on SM media query
.md-hideHide on MD media query
.md-showShow on MD media query
.lg-hideHide on LG media query
.lg-showShow on LG media query
.xl-hideHide on XL media query
.xl-showShow on XL media query
.xxl-hideHide on XXL media query
.xxl-showShow on XXL media query
.xxxl-hideHide on XXXL media query
.xxxl-showShow on XXXL media query
PostCSS InputsPostCSS Grid