Skip to content

Instantly share code, notes, and snippets.

@IamSwap
Created September 2, 2018 16:07
Show Gist options
  • Save IamSwap/b28ff51e57bb10a6864c0e4f36e7b46f to your computer and use it in GitHub Desktop.
Save IamSwap/b28ff51e57bb10a6864c0e4f36e7b46f to your computer and use it in GitHub Desktop.
Extra Spacers & Sizes for Bootstrap 4
// Spacers for margin & padding
$spacer: 1rem;
$spacers: ();
$spacers: map-merge((
0: 0,
px: 1px,
1: ($spacer * .25),
2: ($spacer * .5),
3: ($spacer * .75),
4: $spacer,
5: ($spacer * 1.25),
6: ($spacer * 1.5),
8: ($spacer * 2),
10: ($spacer * 2.50),
12: ($spacer * 3),
16: ($spacer * 4),
20: ($spacer * 5),
24: ($spacer * 6),
32: ($spacer * 8),
), $spacers);
// This variable affects the `.h-*` and `.w-*` classes.
$sizes: ();
$sizes: map-merge((
auto: auto,
px: 1px,
1: 0.25rem,
2: 0.5rem,
3: 0.75rem,
4: 1rem,
5: 1.25rem,
6: 1.5rem,
8: 2rem,
10: 2.5rem,
12: 3rem,
16: 4rem,
24: 6rem,
32: 8rem,
48: 12rem,
64: 16rem,
half: 50%,
one-third: 33.33333%,
two-third: 66.66667%,
one-fourth: 25%,
three-fourth: 75%,
one-fifth: 20%,
two-fifth: 40%,
three-fifth: 60%,
four-fifth: 80%,
one-sixth: 16.66667%,
five-sixth: 83.33333%,
full: 100%,
screen: 100vw
), $sizes);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment