There is a newer version of Luda.

Let's go!

Spacing

Use spacing utilities to control elments' margins and paddings responsively.

Introduction

All spacing utilities are extend with the screen width breakpoint postfixes. Margin utility classes are named using the format: .m{direction}-{value}-{postfix}, and padding utility classes are named using the format: .p{direction}-{value}-{postfix}. It means all directions if the {direction} part is not included.

We use shorthand class names and meaningful value words for these utilities, all abbreviations and value words are listed in the below tables.

Direction Abbreviations

AbbreviationDirection
ttop
rright
bbottom
lleft
xleft and right
ytop and bottom

Value Words

WordValue
tiny$spacing-tiny-rem
small$spacing-small-rem
medium$spacing-medium-rem
large$spacing-large-rem
none0
auto(only for margins)auto

Examples

In the below example, we control the elements’ margins and paddings responsively according to screen widths.

<div class="p-small px-medium-m py-large-l bc-primary">
  <div class="bc-danger">
    <div class="p-large mx-small my-medium-m m-large-l bc-dark"></div>
  </div>
</div>

Sass Variables

$spacing-tiny-rem: baseline(0.5) !default
$spacing-small-rem: baseline(1) !default
$spacing-medium-rem: baseline(2) !default
$spacing-large-rem: baseline(4) !default