Concepts
Spacing
Spacing is a scale of system distance values.
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, // 36px
10: 10, // 40px
12: 12, // 48px
14: 14, // 56px
16: 16, // 64px
20: 20, // 80px
24: 24, // 96px
32: 32 // 128px
)
Usage #
Spacing is used as module modifiers automatically generated by Superkube in these modules:
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
scales.scss
main.scss
Next, import scales.scss
in your custom framework settings in the scales.scss
file.
// scales.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,
8: 8,
10: 10,
12: 12,
14: 14,
16: 16,
18: 18,
20: 20,
24: 24,
33: 33
)
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>