Spacings

Values that define empty space between elements.

SCSS recall spacings with space({key}) function

HTML apply margin to elements with .m-{key}, .ml-{key}, .mr-{key}, .mt-{key}, .mb-{key} classes

HTML apply padding to elements with .p-{key}, .pl-{key}, .pr-{key}, .pt-{key}, .pb-{key} classes

SCSS
    
$space-base: 24px;

$spaces: (
  0: 0,                 // 0px
  1: $space-base / 6,   // 4px
  2: $space-base / 3,   // 8px
  3: $space-base / 2,   // 12px
  4: $space-base,       // 24px
  5: $space-base * 2,   // 48px
  6: $space-base * 3,   // 72px
  7: $space-base * 6    // 144px
);
  
.p-4
.p-5
.p-6
HTML
    <div class="grid">
  <div class="col-4">
    <div class="text-center color-white bg-primary p-4">.p-4</div>
  </div>
  <div class="col-4">
    <div class="text-center color-white bg-primary p-5">.p-5</div>
  </div>
  <div class="col-4">
    <div class="text-center color-white bg-primary p-6">.p-6</div>
  </div>
</div>
  

Responsive

Apply responsive margin to elements .{breakpoint}:m-{key}, .{breakpoint}:ml-{key}, .{breakpoint}:mr-{key}, .{breakpoint}:mt-{key}, .{breakpoint}:mb-{key} classes

Apply responsive padding to elements .{breakpoint}:p-{key}, .{breakpoint}:pl-{key}, .{breakpoint}:pr-{key}, .{breakpoint}:pt-{key}, .{breakpoint}:pb-{key} classes

Class prefix example
Default
> 0px
m-, p-
Extra extra small
> 320px
xxs:m-{key}, xxs:p-{key}
Extra small
> 480px
xs:m-{key}, xs:p-{key}
Small
> 640px
sm:m-{key}, sm:p-{key}
Medium
> 768px
md:m-{key}, md:p-{key}
Large
> 991px
lg:m-{key}, lg:p-{key}
Extra large
> 1200px
xl:m-{key}, xl:p-{key}
Extra extra large
> 1440px
xxl:m-{key}, xxl:p-{key}
.p-1
.md:p-2
.p-1
.md:p-3
.p-1
.md:p-4
HTML
    <div class="grid">
  <div class="col-12 md:col-4">
    <div class="text-center color-white bg-primary p-1 md:p-2">.p-1 <br> .md:p-2</div>
  </div>
  <div class="col-12 md:col-4">
    <div class="text-center color-white bg-primary p-1 md:p-3">.p-1 <br> .md:p-3</div>
  </div>
  <div class="col-12 md:col-4">
    <div class="text-center color-white bg-primary p-1 md:p-4">.p-1 <br> .md:p-4</div>
  </div>
</div>