Layout

Universal spacing

Spacing can be applied using either margin or padding. Both margin and padding share the same predefined scale. There are 6 available spacing sizes; .margin-xxs, .margin-xs, .margin-s, .margin-m, .margin-l or .margin-xl. All classes have responsive options available.

padding or margin -xxs (5px)

<!-- margin classes -->
<div class="margin-xxs">...</div>
<!-- padding classes -->
<div class="padding-xxs">...</div>

padding or margin -xs (10px)

<!-- margin classes -->
<div class="margin-xs">...</div>      
<!-- padding classes -->
<div class="padding-xs">...</div>

padding or margin -s (15px)

<!-- margin classes -->
<div class="margin-s">...</div>      
<!-- padding classes -->
<div class="padding-s">...</div>

padding or margin -m (20px)

<!-- margin classes -->
<div class="margin-m">...</div>      
<!-- padding classes -->
<div class="padding-m">...</div>

padding or margin -l (25px)

<!-- margin classes -->
<div class="margin-l">...</div>      
<!-- padding classes -->
<div class="padding-l">...</div>

padding or margin -xl (60px)

<!-- margin classes -->
<div class="margin-xl">...</div>      
<!-- padding classes -->
<div class="padding-xl">...</div>

Individual spacing

Individual spacing can be applied to a single side of an element using either margin or padding. Again, both margin and padding share the same predefined scale. The same 6 sizes as stated above are available.

<!-- margin classes -->
<div class="margin-top-m">...</div>
<!-- padding classes -->
<div class="padding-top-m">...</div>

<!-- margin classes -->
<div class="margin-right-m">...</div>
<!-- padding classes -->
<div class="padding-right-m">...</div>

<!-- margin classes -->
<div class="margin-bottom-m">...</div>
<!-- padding classes -->
<div class="padding-bottom-m">...</div>

<!-- margin classes -->
<div class="margin-left-m">...</div>
<!-- padding classes -->
<div class="padding-left-m">...</div>