Spacing

Unit #

Superkube is fully based on a system concept. Therefore, all units of measurement in it correspond to the basic value of unit. By default it is 4px. This means that 1rem in SCSS will be 4px. For example:

.item {
    margin-bottom: 2rem; // 2 units * 4px = 8px
}

So the spacing scale is based on rem and unit. This allows you to create consistent margins, padding and other parameters in both design and SCSS.

Scale #

These are the default values in spacing scale.

spacing: (
    1: 1, // {size name}: {size in rem}
    2: 2, // 8px
    3: 3, // 12px
    4: 4, // 16px
    5: 5, // 20px
    6: 6, // 24px
    7: 7, // 28px
    8: 8, // 32px
    9: 9, // 40px
    10: 10, // 40px
    11: 11, // 44px
    12: 12, // 48px
    13: 13, // 52px
    14: 14, // 56px
    15: 15, // 60px
    16: 16, // 64px
    20: 20, // 80px
    25: 25, // 100px
    30: 30 // 120px
)

Usage #

Spacing is used as module modifiers automatically generated by Superkube in these modules:

• Grid
• Row
• Offset
• Spacing
• Stack

Here's a couple of examples:

// row-5 specifies that the gap between blocks within a row is 5 rem (or 20px)
<div class="row row-5">
    <div class="item">...</div>
    <div class="item">...</div>
</div>

// mb-10 specifies that the margin-bottom value is 10rem (or 40px)
<div class="item mb-10">...</div>

Spacing can also be used in SCSS directly, just as values in rem. It helps to have a systematic approach to design when the units are unified.

.item {
    padding: 6rem;
    margin-bottom: 8rem;
}

Extend #

To extend the default values, you need to create your scales.scss and then extend $scales map in it.

// your project
superkube/
vars/
    scales.scss
vars.scss
main.scss

Next, import scales.scss in your custom framework settings in the vars.scss file.

// vars.scss
@import "vars/scales";

Now you can extend the spacing scale in the scales.scss file with map-extend function.

// =Scales
$scales: map-extend($scales, (
    spacing: (
        18: 18
    )
));

After extending, a new value will be added and the scale will look like this:

spacing: (
    1: 1,
    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,
    18: 18,
    20: 20,
    25: 25,
    30: 30
)

Now you can use module modifiers with the new value. For example, Superkube will automatically generate Spacing module modifiers with a value of 18.

<div class="item mb-18">...</div>