• DocumentationDocs

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-24"></span>
<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-160160px

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

Follow the creator

Join the community