Consistency is key when designing a balanced user interface. Not only you need a balanced color scheme, but the spacings in and between your elements should also be spot on. Creating harmonious spacings is easy using this simple method.
Spacing variable
It is almost the first thing i do when starting of a new project; Create a variables.scss with a $spacing variable in it.
// variables.scss
$spacing: 8px;
I use that spacing-variable on every element that needs somekind of spacing. I use it on mostly padding, margin, width, height and border-radius. Now not everything needs a 8px padding. Sometime you need more padding.
Scales are friends, not enemies
Using a scale for the increments is what makes your ui look consistent. You could use the fibonacci scale or a binairy scale.
// Fibonacci scale
$spacing-s: $spacing * 0.5;
$spacing-l: $spacing * 2;
$spacing-xl: $spacing * 3;
$spacing-xxl: $spacing * 5;
$spacing-xxxl: $spacing * 8;
$spacing-xxxxl: $spacing * 13;
// Binary scale
$spacing-s: $spacing * 0.5;
$spacing-l: $spacing * 2;
$spacing-xl: $spacing * 4;
$spacing-xxl: $spacing * 8;
$spacing-xxxl: $spacing * 16;
Defining a bunch of these spacing-variables makes your life a lot easier in the long run. You don't have to think about numbers anymoore, just use clothing-sizes as your variable names and you easily increase or decrease the spacing of an element.
// style.scss
@import 'variables'
.button {
padding: $spacing $spacing-l;
}
.grid {
display: grid;
margin-bottom: $spacing-xl;
grid-gap: $spacing-xl;
}
Breaking the scales
At some point you need a more fine-grained control over your spacing. That's no problem as long as you keep working with your base $spacing variable. Use $spacing * 0.25 to get a tiny space. Or use $spacing * 6 to get some more spacing then $spacing-xl does. No problem, as long as you stick to the $spacing variable and multiply by whole numbers.
Update: 30 May 2022
You shouldn't use divisions in Sass anymore, because it is conflicting with the slash in e.g. defining a grid-row like grid-row: 1/3.