Spacing

Config values

You can add different value for each existing breakpoint. Note that at least the key 'xs' is required.


// breakpoint key name : the "full" value
  $s-spacing-values:(
  'xs': 5rem,
  'md': 6rem,
  'xl': 7rem
);

// class name : percentage
$s-spacing-fractions: (
  'full': 1,
  'threequarter': 0.75,
  'twothird': 0.66,
  'half': 0.5,
  'third': 0.33,
  'quarter': 0.25,
  'none': 0
);
    

Padding

There is some examples, all the keys name from the $s-spacing-fractions map are available.

pt-half
p-quarter
pb-full
p-half

Padding with grid gap values

One powerful feature is the availibity to use together the gap values and the spacing values.

gap-half + pb-half
gap-full + pb-full

Margin

mb-quarter
mb-third
mb-half
mb-threequarter
mb-full

No Margin or Padding

If you want to remove padding or margin on an element, use the -none value.

p-quarter + pb-none