Overview
Margins are great. They're my go-to way to apply spacing, because they're always applied relative to the elements they're attached to.
Spacing is always calculated relative to the font size of the element you're adding the class to. That's why in the CSS you'll notice explicit variable assignments to every possible type style. That's because the type styles each have locally-defined scale keys that have to be referenced instead of the global variables when applying margins to them. Explicitly defining them like this is definitely verbose, but it's the only way to guarantee enforcement.
Default Classes
| Class Name |
CSS Properties |
.m-top__2xs |
margin-top: var(--2xs);
|
.m-top__xs |
margin-top: var(--xs);
|
.m-top__sm |
margin-top: var(--sm);
|
.m-top__md |
margin-top: var(--md);
|
.m-top__lg |
margin-top: var(--lg);
|
.m-top__xl |
margin-top: var(--xl);
|
.m-top__2xl |
margin-top: var(--2xl);
|
.m-right__2xs |
margin-right: var(--2xs);
|
.m-right__xs |
margin-right: var(--xs);
|
.m-right__sm |
margin-right: var(--sm);
|
.m-right__md |
margin-right: var(--md);
|
.m-right__lgspan> |
margin-right: var(--lg);
|
.m-right__xl |
margin-right: var(--xl);
|
.m-right__2xl |
margin-right: var(--2xl);
|
.m-bottom__2xs |
margin-bottom: calc(1.272em * 0.128);
|
.m-bottom__xs |
margin-bottom: calc(1.272em * 0.272);
|
.m-bottom__sm |
margin-bottom: calc(1.272em * 0.618);
|
.m-bottom__md |
margin-bottom: var(--md);
|
.m-bottom__lgspan> |
margin-bottom: var(--lg);
|
.m-bottom__xl |
margin-bottom: var(--xl);
|
.m-bottom__2xl |
margin-bottom: var(--2xl);
|
.m-left__2xs |
margin-left: var(--2xs);
|
.m-left__xs |
margin-left: var(--xs);
|
.m-left__sm |
margin-left: var(--sm);
|
.m-left__md |
margin-left: var(--md);
|
.m-left__lgspan> |
margin-left: var(--lg);
|
.m-left__xl |
margin-left: var(--xl);
|
.m-left__2xl |
margin-left: var(--2xl);
|
