sizes are defined and SCSS Variable and they are generating css variables in root that will be used through the entire framework

Space SCSS Variables

Click to copy
$spaces: (
    "xs":   2,
    "s":    5,
    "m":    10,
    "l":    25,
    "xl":   50,
    "xxl":  100,

Space Variables that are generated from Space SCSS Variables

Click to copy
:root {
  --space-xs: 2px;
  --space-s: 5px;
  --space-m: 10px;
  --space-l: 25px;
  --space-xl: 50px;
  --space-xxl: 100px;

Those values are for all the layout applied sizes in the framework:

Paddings and Margins are placed under Layout section. Read more.

Comments Area

No comments have been posted yet. Please feel free to comment first!

Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!


Please add to the discussion in a constructive way. If you disagree, please be polite.

In the same area