Spacing

Unit #

Superkube is fully based on a system concept. Therefore, all units of measurement in it correspond to the basic value of unit.

In vars/basis this is defined like this:

$unit: 4px;

This means that 1rem in SCSS will be 4px. For example:

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

Of course, you can change the unit to another value:

$unit: 5px;

In this case 1rem will be 5px and this is how it will work in SCSS:

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

Scale #

By default, the spacing scale looks like this in vars/scales:

$spacing-scale: (
    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,
    12: 12,
    14: 14,
    16: 16,
    20: 20,
    25: 25,
    30: 30
);

Of course you can change the scale using the values you need in your case.

$spacing-scale: (
    1: 1,
    2: 2,
    3: 3,
    4: 4,
    5: 5,
    10: 10,
    20: 20,
    40: 40
    60: 60
);

Spacing scale is used in the following modules:

• Spacing
• Offset
• Grid

In practice, it looks like this. You specify a class with the name spacing size and this class has the size in rem.

<div class="mb-4">...</div>

// css
margin-bottom: 4rem; // 4 units * 4px = 16px