Day 148 - Creating A Design System • Spacing

This is the third post on creating a Design System of your own and until now we have learned about the colors and typography parts of the system. Now we will be having a look at Spacing of the Design System.

Just as before first we will be have a base variable from which we will calculate all the other spacing values. The reason why we define a base value if because of it being the single source of truth for all of our other values. If we want to change the scale of the project we only have to change a single line of code.

This can be very helpful when making your projects responsive. You might want to have a more spacing when the viewport is biiger and smaller spacing when the viewport is smaller like when using a mobile phone etc.

$space-base: 1rem;

From this we calculate our main spacing utilities.

$space-xxs: $space-base * 0.25;
$space-xs: $space-base * 0.5;
$space-sm: $space-base * 0.75;
$space-md: $space-base * 1.25;
$space-lg: $space-base * 2;
$space-xl: $space-base * 3.25;
$space-xxl: $space-base * 5.25;

Now where ever we use these variables we can just update them by changing the $space-base variable.

Spacing Classes

Now this is all helpful but now I want to have more helper classes for padding and margin in our project just like bootstrap. To create helper classes we will be using the same variable as the base for all the classes.

@for $i from 1 to 21 {
  // Padding Helper Classes
  .p-#{$i} {
    padding: ($space-base / 2) * $i;
  }
  .px-#{$i} {
    padding-left: ($space-base / 2) * $i;
    padding-right: ($space-base / 2) * $i;
  }
  .py-#{$i} {
    padding-top: ($space-base / 2) * $i;
    padding-bottom: ($space-base / 2) * $i;
  }
  // Margin Helper Classes
  .m-#{$i} {
    margin: ($space-base / 2) * $i;
  }
  .mx-#{$i} {
    margin-left: ($space-base / 2) * $i;
    margin-right: ($space-base / 2) * $i;
  }
  .my-#{$i} {
    margin-top: ($space-base / 2) * $i;
    margin-bottom: ($space-base / 2) * $i;
  }
}

This for look will create padding and margin classes ranging from .5rem with an intervel of .5rem up to 10rem.

We can also create helper classes for top, left, bottom and right side of the elements with SCSS.

@for $i from 1 to 21 {
  .pt-#{$i} {
    padding-top: ($space-base / 2) * $i;
  }
  .pl-#{$i} {
    padding-left: ($space-base / 2) * $i;
  }
  .pb-#{$i} {
    padding-bottom: ($space-base / 2) * $i;
  }
  .pr-#{$i} {
    padding-right: ($space-base / 2) * $i;
  }
}

And same can be done with margin classes.

@for $i from 1 to 21 {
  .mt-#{$i} {
    margin-top: ($space-base / 2) * $i;
  }
  .ml-#{$i} {
    margin-left: ($space-base / 2) * $i;
  }
  .mb-#{$i} {
    margin-bottom: ($space-base / 2) * $i;
  }
  .mr-#{$i} {
    margin-right: ($space-base / 2) * $i;
  }
}

Next we will be designing buttons and forms and then after that will be last part which will be abour grid layout.

zainscizainsci