Colors
Use one of the following classes to style an element background using a CSS variable:
/* 1.4. Helper classes */
.background-auto-1 {background: var(--background-auto-1);}
.background-auto-2 {background: var(--background-auto-2);}
...
.color-light {color: var(--color-light);}Spacings
You can make elements/section/container spacings just using some classes from the below list.
/* 1.6 Default Spacings */
.container-fluid {
padding-left: 0;
padding-right: 0;
}
.gutters-auto {
padding-left: 12px;
padding-right: 12px;
}
/* Gutters All Sides */
.g-xSmall {padding: var(--gutters-xSmall);}
.g-mediumSmall {padding: var(--gutters-mediumSmall);}
.g-small {padding: var(--gutters-small);}
.g-medium {padding: var(--gutters-medium);}
.g-large {padding: var(--gutters-large);}
.g-xLarge {padding: var(--gutters-xLarge);}
...Change Default Spacings
You can change the default margin and padding by editing the :root selector CSS variables.
/* Gutters */
--gutters-xxSmall: 15px;
--gutters-xSmall: 24px;
...Font Size
You can change the default font size by editing this code as well:
/* Font Size */
--fontSize-xSmall: 12px;
--fontSize-small: 15px;
--fontSize-medium: 18px;
--fontSize-large: 24px;
--fontSize-xLarge: 42px;
--fontSize-xxl: 62px;
...