Modules

Spacing

This module has classes for setting different padding and margin for elements.

Notation #

The notation of padding or margin consists of several parts:


{name}{side}-{size}

Where {name} is one of:

  • m — for classes that set margin;
  • p — for classes that set padding.

Where {side} is one of:

  • t — sets margin-top or padding-top;
  • b — sets margin-bottom or padding-bottom;
  • l — sets margin-left or padding-left;
  • r — sets margin-right or padding-right;
  • x — sets both left and right margin or padding;
  • y — sets both top and bottom margin or padding;
  • blank — sets a margin or padding on all sides of the element.

Where {size} is one of:

  • size — sets a specified size of margin or padding;
  • off — turns off margin or padding of the element;
  • auto — sets the margin to auto.

The {size} is based on the Spacing scale. By default, it looks like this:


// =Scales
$scales: (
    spacing: (
        1: 1, // {size name}: {size in rem}
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        6: 6,
        7: 7,
        8: 8,
        9: 9,
        10: 10,
        11: 11,
        12: 12,
        13: 13,
        14: 14,
        15: 15,
        16: 16,
        20: 20,
        24: 24
    )
);

Here are some examples of how to specify spacing classes:


<div class="m-4">..</div>
<div class="mb-4">..</div>
<div class="pt-6">..</div>
<div class="px-8">..</div>
<div class="p-off">..</div>
<div class="mt-off">..</div>
<div class="ml-auto">..</div>

And here is an example of a card where you can see how spacing classes work in real life.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.


<div class="card b-dark-medium bg-light r-base">
    <div class="card-box p-6 pb-10">
        <div class="card-caption mb-2">
            <a href="#" class="caption caption-positive">...</a>
        </div>
        <div class="card-head">
            <h2 class="heading-medium">...</h2>
        </div>
        <div class="card-body mt-3">
            <p class="text-medium">...</p>
        </div>
    </div>
</div>

Negative #

To specify negative margins you need to add the prefix n before the size.


<div class="mb-n4">...</div>
<div class="mt-n4">...</div>
<div class="ml-n4">...</div>
<div class="mr-n4">...</div>

Responsive #

Use m-off-sm or p-off-sm classes to turn off margin or padding of the element on mobile screens.


<div class="mb-4 m-off-sm">...</div>
<div class="p-4 p-off-sm">...</div>

Use the -sm suffix for any spacing class to change the spacing behavior on small screens.


<div class="p-4 p-2-sm">...</div>
<div class="mb-4 mb-6-sm">...</div>
<div class="mt-auto mt-off-sm">...</div>