Utility Classes
The following utility classes are available within the Framework.
Base Classes
There are 3 types of container available for use with varrying max-widths. These can used on the same page but should not be nested within each other.
container-lrg linked to root-variable --container-lrg-width
container linked to root-variable --container-width
container-sml linked to root-variable --container-sml-width
Example usage:
<div class="container">
<div>Example content</div>
</div>
All content within the container will be constrained by it's max-width and padding.
Lean
The lean class can also be added to any container to remove the padding.
Example usage:
<div class="container lean">
<div>Example content</div>
</div>
All content within the container will be constrained by it's max-width but with no x-axis padding.
Full Width
The full-width class can also be added to any container to remove the max-width restriction.
Example usage:
<div class="container full-width">
<div>Example content</div>
</div>
Container will have no max-width but will retain the x-axis padding.
Variables
The max-width and padding of Framework containers are controlled using the Root Spacing variables. For consistency all # containers share the same same padding variable and therefore do not have individually configurable padding.
Widths & Padding
Set these variables using absolute values as these elements do not change with screen size.
--container-lrg-width controls the max-width of the Framework class container-lrg.
--container-width controls the max-width of the Framework class container.
--container-sml-width controls the max-width of the Framework class container-sml.
--container-padding controls the x-axis padding of the Framework Container classes.
Example usage:
:root {
--container-lrg-width: 1900px;
--container-width: 1500px;
--container-sml-width: 1200px;
--container-padding: 45px;
}
Responsive
This variable is set using absolute values so it will not automatically resize when --space is adjusted. Changes to the absolute value should be made for each breakpoint as required.
--container-padding controls the x-axis padding of the Framework classes container container-lrg and container-sml for the given breakpoint.
Example usage:
@media only screen and (max-width: 1100px) {
:root {
--container-padding: 30px;
}
}