Spacers ​

Fluid UI generates a set of spacer utility classes for paddings, margins and gaps.
We use sizes scale: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000.

CSS Variables ​

Basic spacing design tokens are defined in ./settings/design-tokens.scss.

  --g-spacer-50: 0.25rem; // 4px
  --g-spacer-100: #{g-fluid(4px, 8px)};
  ...

  --g-spacer-50: 0.25rem; // 4px
  --g-spacer-100: #{g-fluid(4px, 8px)};
  ...

Then we define SCSS map in ./settings/global.scss

  $g-spacers: (
    50: var(--g-spacer-50),
    100: var(--g-spacer-100),
    ...
);

  $g-spacers: (
    50: var(--g-spacer-50),
    100: var(--g-spacer-100),
    ...
);

Generated classes ​

Based on above SCSS Map we generate set of spacing classes.
We use the format: {property}-{direction}-{size} like:

.p-50 {
  padding: var(--g-spacer-50) !important;
}

.ms-100 {
  margin-left: var(--g-spacer-100) !important;
}

.g-900 {
  gap: var(--g-spacer-900) !important;
}

.p-50 {
  padding: var(--g-spacer-50) !important;
}

.ms-100 {
  margin-left: var(--g-spacer-100) !important;
}

.g-900 {
  gap: var(--g-spacer-900) !important;
}

All classes are generated for sizes from 50, 100, 200, ... to 1000.

Paddings - available classes ​

Margins - available classes ​

Gaps - available classes ​