Skip to content

Instantly share code, notes, and snippets.

@blakewatson
Last active December 27, 2022 17:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save blakewatson/784a13a3befdeb9e2757062db6fb66c6 to your computer and use it in GitHub Desktop.
Save blakewatson/784a13a3befdeb9e2757062db6fb66c6 to your computer and use it in GitHub Desktop.
Customizable utility classes for applying margin and padding
:root {
--xxs: 0.125rem;
--xs: 0.25rem;
--sm: 0.5rem;
--md: 1rem;
--lg: 2rem;
--xl: 4rem;
--xxl: 8rem;
}
.m-none { margin: 0; }
.p-none { padding: 0; }
.mt-none { margin-top: 0; }
.pt-none { padding-top: 0; }
.mr-none { margin-right: 0; }
.pr-none { padding-right: 0; }
.mb-none { margin-bottom: 0; }
.pb-none { padding-bottom: 0; }
.ml-none { margin-left: 0; }
.pl-none { padding-left: 0; }
.px-none { padding-left: 0; padding-right: 0; }
.py-none { padding-top: 0; padding-bottom: 0; }
.mx-none { margin-left: 0; margin-right: 0; }
.my-none { margin-top: 0; margin-bottom: 0; }
.m-xxs { margin: var(--xxs); }
.p-xxs { padding: var(--xxs); }
.mt-xxs { margin-top: var(--xxs); }
.pt-xxs { padding-top: var(--xxs); }
.mr-xxs { margin-right: var(--xxs); }
.pr-xxs { padding-right: var(--xxs); }
.mb-xxs { margin-bottom: var(--xxs); }
.pb-xxs { padding-bottom: var(--xxs); }
.ml-xxs { margin-left: var(--xxs); }
.pl-xxs { padding-left: var(--xxs); }
.px-xxs { padding-left: var(--xxs); padding-right: var(--xxs); }
.py-xxs { padding-top: var(--xxs); padding-bottom: var(--xxs); }
.mx-xxs { margin-left: var(--xxs); margin-right: var(--xxs); }
.my-xxs { margin-top: var(--xxs); margin-bottom: var(--xxs); }
.m-xs { margin: var(--xs); }
.p-xs { padding: var(--xs); }
.mt-xs { margin-top: var(--xs); }
.pt-xs { padding-top: var(--xs); }
.mr-xs { margin-right: var(--xs); }
.pr-xs { padding-right: var(--xs); }
.mb-xs { margin-bottom: var(--xs); }
.pb-xs { padding-bottom: var(--xs); }
.ml-xs { margin-left: var(--xs); }
.pl-xs { padding-left: var(--xs); }
.px-xs { padding-left: var(--xs); padding-right: var(--xs); }
.py-xs { padding-top: var(--xs); padding-bottom: var(--xs); }
.mx-xs { margin-left: var(--xs); margin-right: var(--xs); }
.my-xs { margin-top: var(--xs); margin-bottom: var(--xs); }
.m-sm { margin: var(--sm); }
.p-sm { padding: var(--sm); }
.mt-sm { margin-top: var(--sm); }
.pt-sm { padding-top: var(--sm); }
.mr-sm { margin-right: var(--sm); }
.pr-sm { padding-right: var(--sm); }
.mb-sm { margin-bottom: var(--sm); }
.pb-sm { padding-bottom: var(--sm); }
.ml-sm { margin-left: var(--sm); }
.pl-sm { padding-left: var(--sm); }
.px-sm { padding-left: var(--sm); padding-right: var(--sm); }
.py-sm { padding-top: var(--sm); padding-bottom: var(--sm); }
.mx-sm { margin-left: var(--sm); margin-right: var(--sm); }
.my-sm { margin-top: var(--sm); margin-bottom: var(--sm); }
.m-md { margin: var(--md); }
.p-md { padding: var(--md); }
.mt-md { margin-top: var(--md); }
.pt-md { padding-top: var(--md); }
.mr-md { margin-right: var(--md); }
.pr-md { padding-right: var(--md); }
.mb-md { margin-bottom: var(--md); }
.pb-md { padding-bottom: var(--md); }
.ml-md { margin-left: var(--md); }
.pl-md { padding-left: var(--md); }
.px-md { padding-left: var(--md); padding-right: var(--md); }
.py-md { padding-top: var(--md); padding-bottom: var(--md); }
.mx-md { margin-left: var(--md); margin-right: var(--md); }
.my-md { margin-top: var(--md); margin-bottom: var(--md); }
.mlg { margin: var(--lg); }
.plg { padding: var(--lg); }
.mt-lg { margin-top: var(--lg); }
.pt-lg { padding-top: var(--lg); }
.mr-lg { margin-right: var(--lg); }
.pr-lg { padding-right: var(--lg); }
.mb-lg { margin-bottom: var(--lg); }
.pb-lg { padding-bottom: var(--lg); }
.ml-lg { margin-left: var(--lg); }
.pl-lg { padding-left: var(--lg); }
.px-lg { padding-left: var(--lg); padding-right: var(--lg); }
.py-lg { padding-top: var(--lg); padding-bottom: var(--lg); }
.mx-lg { margin-left: var(--lg); margin-right: var(--lg); }
.my-lg { margin-top: var(--lg); margin-bottom: var(--lg); }
.m-xl { margin: var(--xl); }
.p-xl { padding: var(--xl); }
.mt-xl { margin-top: var(--xl); }
.pt-xl { padding-top: var(--xl); }
.mr-xl { margin-right: var(--xl); }
.pr-xl { padding-right: var(--xl); }
.mb-xl { margin-bottom: var(--xl); }
.pb-xl { padding-bottom: var(--xl); }
.ml-xl { margin-left: var(--xl); }
.pl-xl { padding-left: var(--xl); }
.px-xl { padding-left: var(--xl); padding-right: var(--xl); }
.py-xl { padding-top: var(--xl); padding-bottom: var(--xl); }
.mx-xl { margin-left: var(--xl); margin-right: var(--xl); }
.my-xl { margin-top: var(--xl); margin-bottom: var(--xl); }
.m-xxl { margin: var(--xxl); }
.p-xxl { padding: var(--xxl); }
.mt-xxl { margin-top: var(--xxl); }
.pt-xxl { padding-top: var(--xxl); }
.mr-xxl { margin-right: var(--xxl); }
.pr-xxl { padding-right: var(--xxl); }
.mb-xxl { margin-bottom: var(--xxl); }
.pb-xxl { padding-bottom: var(--xxl); }
.ml-xxl { margin-left: var(--xxl); }
.pl-xxl { padding-left: var(--xxl); }
.px-xxl { padding-left: var(--xxl); padding-right: var(--xxl); }
.py-xxl { padding-top: var(--xxl); padding-bottom: var(--xxl); }
.mx-xxl { margin-left: var(--xxl); margin-right: var(--xxl); }
.my-xxl { margin-top: var(--xxl); margin-bottom: var(--xxl); }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment