Spacing

A function to apply default space values.

A key component in working with layouts is the correct usage of space in placing and separating different elements. This is especially important when developers are trying to replicate the spacing used in a mockup exactly into the final layout.

To create the spacing system for Sipster, we opted for a 4px base size and its multiples, which offers developers and end users a harmonious, vertical scale, which leads to more visually consistent layouts.

To use this feature, you only need to apply the function sds-spc("value"), replacing the param for any of the values listed in the following table.

values	pixel size	rem size
Spacing Value	Pixel Equivalent	REM value
4	4 px	0.25 rem
8	8 px	0.5 rem
12	12 px	0.75 rem
16	16 px	1 rem
24	24 px	1.5 rem
32	32 px	2 rem
40	40 px	2.5 rem
64	64 px	4 rem

This function can be used inside any CSS property where spacing/an integer can be implemented.

Examples:

.link {
  margin: sds-spc(12) sds-spc(16);
}


//--------------
// Compiled CSS
//--------------

.link {
  margin: 12px 16px;
}

button {
  padding: sds-spc(12);
}


//--------------
// Compiled CSS
//--------------

button {
  padding: 12px;
}