Variables
Shorthand classes for margins and padding are controlled using the Root Spacing variables for a consistent apperance throughout the project and across screen sizes.
Notation
Classes are named using the format property sides - size.
Property
Where property is one of:
m for classes that set margin
p for classes that set padding
Sides
Where sides is one of:
t - for classes that set margin or padding for the top of the element.
b - for classes that set margin or padding for the bottom of the element.
l - for classes that set margin or padding for the left of the element.
r - for classes that set margin or padding for the right of the element.
x - for classes that set margin or padding for the x-axis (left & right) of the element.
y - for classes that set margin or padding for the y-axis (top & bottom) of the element.
blank - for classes that set margin or padding on all 4 sides of the element.
Size
Where size is one of:
xlrg - for classes that use the --xlrg spacing variable.
lrg - for classes that use the --lrg spacing variable.
med - for classes that use the --med spacing variable.
sml - for classes that use the --sml spacing variable.
xsml - for classes that use the --xsml spacing variable.
container - for classes that use the --container-padding variable.
0 - to specify none.
Representative examples:
.mt-0 {
margin-top: 0;
}
.ml-sml {
margin-left: var(--space-sml);
}
.px-med {
padding-left: var(--space-med);
padding-right: var(--space-med);
}
.p-lrg {
padding: var(--space-lrg);
}
Margin Auto
Additionally the Framework also includes the size of auto. This can be used when setting margin for elements and will set the margin for the applicable sides to auto (as opposed to utilising one of the spacing variables).
Representative examples:
.ml-auto {
margin-left: auto;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}