8-point spacings.
npm i -D spacings// Place this at the top of your SCSS/CSS file
@use 'spacings'; /* for SCSS */
OR
@import 'spacings'; /* for CSS */:root {
--s-00: 0rem; /* Zero */
--s-01: 0.0625rem; /* 1px */
--s-02: 0.125rem; /* 2px */
--s-04: 0.25rem; /* 4px */
--s-08: 0.5rem; /* 8px */
...
}- Format:
.sp-u-[property][axis]-[value] - Properties:
mmargin,ppadding - Axes:
xhorizontal,yvertical,ttop,bbottom,sstart,eend
<!-- Add 1.5rem padding to the bottom -->
<div class="sp-u-pb-24"></div>
<!-- Add 32px padding to both top and bottom -->
<div class="sp-u-py-32"></div>
<!-- Add 8px margin on both sides (inline) -->
<div class="sp-u-mx-08"></div>- Format:
.sp-c-[value] - Values:
00,01,02,04,06,08,12,16,20,24,32,40,48,56,64,72,80,96,112,120,128,160
<!-- Render a block with height 2rem -->
<div class="sp-c-32"></div>
<!-- Render a block with height 128px -->
<div class="sp-c-128"></div>