Skip to main content

Spacers

These classes allow setting padding (p) and margin (m)

The classes are named using the format has-{property}{sides}-{size} for xs and has-{property}{sides}-{breakpoint}-{size} for the other breakpoints.

Parameters:

  • size - Size from the map $spacers from 0 to 10
  • sides - Optional value. If no set then the 4 sides will be targeted, x target left and right, y top and bottom, r right, l left, t top, b bottom.
  • property - m for margin, p for padding.
  • breakpoint - sm - md - lg

You can aswell use negative spacing by adding -neg to your class .has-mt-neg-3 (Margin only)

Usage:

  • Do you need a padding top of 30px = spacer-6? And on mobile of 12px = spacer-3?

    • has-pt-3 has-pt-md-6

  • has-mt-3 => has margin top var(--spacer-3) => margin-top: var(--spacer-3);

  • has-p-sm-3 => has padding var(--spacer-3) from sm breakpoint

  • has-mx-lg-3 => has margin left and right var(--spacer-3) from lg breakpoint

Example

Age, inquies, ista parva sunt. An vero, inquit, quisquam potest probare, quod perceptfum, quod. Non potes, nisi retexueris illa. De hominibus dici non necesse est. Nam quid possumus facere melius? Erit enim mecum, si tecum erit.

<div class="bg-grey-light has-p-1 has-p-sm-6 has-p-md-1 has-p-lg-6 has-p-xl-1">
 <div class="bg-grey-dark has-p-1">
   <p class="has-mt-6 has-mx-sm-1 has-mx-md-5 has-mt-lg-3">
     Age, inquies, ista parva sunt. An vero, inquit, quisquam potest probare, quod perceptfum, quod. Non potes, nisi retexueris illa. De hominibus dici non necesse est. Nam quid possumus facere melius? Erit enim mecum, si tecum erit.
   </p>
 </div>
</div>