Root #
:root {
--padding-1: 100;
--padding-2: 90;
--padding-3: 80;
--padding-4: 70;
--padding-5: 60;
--padding-6: 50;
--padding-7: 40;
--padding-8: 30;
--padding-9: 20;
--padding-10: 10;
--padding-11: 1.5;
--margin-1: 100;
--margin-2: 70;
--margin-3: 50;
--margin-4: 30;
--margin-5: 20;
--margin-6: 10;
--margin-7: 5;
--margin-8: 4;
--margin-9: 3;
--margin-10: 2;
--margin-11: 1.5;
}Margin #
Use direct margins to set the margin on a specific element. Direct margins utilize !important to override c-margin settings when necessary.
| Full | Left | Right | Top | Bottom |
|---|---|---|---|---|
m-1 |
ml-1 |
mr-1 |
mt-1 |
mb-1 |
m-2 |
ml-2 |
mr-2 |
mt-2 |
mb-2 |
m-3 |
ml-3 |
mr-3 |
mt-3 |
mb-3 |
m-4 |
ml-4 |
mr-4 |
mt-4 |
mb-4 |
m-5 |
ml-5 |
mr-5 |
mt-5 |
mb-5 |
m-6 |
ml-6 |
mr-6 |
mt-6 |
mb-6 |
m-7 |
ml-7 |
mr-7 |
mt-7 |
mb-7 |
m-8 |
ml-8 |
mr-8 |
mt-8 |
mb-8 |
m-9 |
ml-9 |
mr-9 |
mt-9 |
mb-9 |
m-10 |
ml-10 |
mr-10 |
mt-10 |
mb-10 |
m-11 |
ml-11 |
mr-11 |
mt-11 |
mb-11 |
Cascade Margin #
Cascade margins to set the margin for all direct child elements.
| Full | Left | Right | Top | Bottom |
|---|---|---|---|---|
c-m-1 |
c-ml-1 |
c-mr-1 |
c-mt-1 |
c-mb-1 |
c-m-2 |
c-ml-2 |
c-mr-2 |
c-mt-2 |
c-mb-2 |
c-m-3 |
c-ml-3 |
c-mr-3 |
c-mt-3 |
c-mb-3 |
c-m-4 |
c-ml-4 |
c-mr-4 |
c-mt-4 |
c-mb-4 |
c-m-5 |
c-ml-5 |
c-mr-5 |
c-mt-5 |
c-mb-5 |
c-m-6 |
c-ml-6 |
c-mr-6 |
c-mt-6 |
c-mb-6 |
c-m-7 |
c-ml-7 |
c-mr-7 |
c-mt-7 |
c-mb-7 |
c-m-8 |
c-ml-8 |
c-mr-8 |
c-mt-8 |
c-mb-8 |
c-m-9 |
c-ml-9 |
c-mr-9 |
c-mt-9 |
c-mb-9 |
c-m-10 |
c-ml-10 |
c-mr-10 |
c-mt-10 |
c-mb-10 |
c-m-11 |
c-ml-11 |
c-mr-11 |
c-mt-11 |
c-mb-11 |
Padding #
Use direct padding to set the padding on a specific element. Direct padding utilizes !important to override c-padding settings when necessary.
| Full | Left | Right | Top | Bottom |
|---|---|---|---|---|
p-1 |
pl-1 |
pr-1 |
pt-1 |
pb-1 |
p-2 |
pl-2 |
pr-2 |
pt-2 |
pb-2 |
p-3 |
pl-3 |
pr-3 |
pt-3 |
pb-3 |
p-4 |
pl-4 |
pr-4 |
pt-4 |
pb-4 |
p-5 |
pl-5 |
pr-5 |
pt-5 |
pb-5 |
p-6 |
pl-6 |
pr-6 |
pt-6 |
pb-6 |
p-7 |
pl-7 |
pr-7 |
pt-7 |
pb-7 |
p-8 |
pl-8 |
pr-8 |
pt-8 |
pb-8 |
p-9 |
pl-9 |
pr-9 |
pt-9 |
pb-9 |
p-10 |
pl-10 |
pr-10 |
pt-10 |
pb-10 |
p-11 |
pl-11 |
pr-1 |
pt-11 |
pb-11 |
Cascade Padding #
Cascade padding to set the padding for all direct child elements.
| Full | Left | Right | Top | Bottom |
|---|---|---|---|---|
c-p-1 |
c-pl-1 |
c-pr-1 |
c-pt-1 |
c-pb-1 |
c-p-2 |
c-pl-2 |
c-pr-2 |
c-pt-2 |
c-pb-2 |
c-p-3 |
c-pl-3 |
c-pr-3 |
c-pt-3 |
c-pb-3 |
c-p-4 |
c-pl-4 |
c-pr-4 |
c-pt-4 |
c-pb-4 |
c-p-5 |
c-pl-5 |
c-pr-5 |
c-pt-5 |
c-pb-5 |
c-p-6 |
c-pl-6 |
c-pr-6 |
c-pt-6 |
c-pb-6 |
c-p-7 |
c-pl-7 |
c-pr-7 |
c-pt-7 |
c-pb-7 |
c-p-8 |
c-pl-8 |
c-pr-8 |
c-pt-8 |
c-pb-8 |
c-p-9 |
c-pl-9 |
c-pr-9 |
c-pt-9 |
c-pb-9 |
c-p-10 |
c-pl-10 |
c-pr-10 |
c-pt-10 |
c-pb-10 |
c-p-11 |
c-pl-11 |
c-pr-11 |
c-pt-11 |
c-pb-11 |
Spacing (Combined) #
Use direct spacing to add both m-N and p-N together.
| Full |
|---|
sp-1 |
sp-2 |
sp-3 |
sp-4 |
sp-5 |
sp-6 |
sp-7 |
sp-8 |
sp-9 |
sp-10 |
sp-11 |
Cascade Spacing #
Cascade combined spacing to set the padding for all direct child elements.
| Full |
|---|
c-sp-1 |
c-sp-2 |
c-sp-3 |
c-sp-4 |
c-sp-5 |
c-sp-6 |
c-sp-7 |
c-sp-8 |
c-sp-9 |
c-sp-10 |
c-sp-11 |