Colors
Use one of the following classes to style an element background using a CSS variable:
/* 1.4 Theme Colors */
.color-bg-dark-1 {background: var(--color-dark-1);}
.color-bg-dark-2 {background: var(--color-dark-2);}
...
.color-primary {color: var(--color-primary);}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 All Sides */
.g-xsmall {padding: var(--gutters-xsmall);}
.g-small {padding: var(--gutters-small);}
...
/* Gutters Left and Right */
.gx-xsmall {padding-left: var(--gutters-xsmall); padding-right: var(--gutters-xsmall);}
.gx-small {padding-left: var(--gutters-small); padding-right: var(--gutters-small);}
...
/* Gutters Left */
.gl-xsmall {padding-left: var(--gutters-xsmall);}
.gl-small {padding-left: var(--gutters-small);}
...
/* Gutters Right */
.gr-xsmall {padding-right: var(--gutters-xsmall);}
.gr-small {padding-right: var(--gutters-small);}
...
/* Padding Top */
.pt-xsmall {padding-top: 25px;}
.pt-small {padding-top: 50px;}
...
/* Padding Bottom */
.pb-xsmall {padding-bottom: 25px;}
.pb-small {padding-bottom: 50px;}
...
/* No Gutters */
.no-padding {padding-left: 0; padding-right: 0;}
/* Default Margins */
.mt-xsmall {margin-top: 25px;}
.mt-small {margin-top: 50px;}
...
/* Default Offset Margins */
.mt-offset-xsmall {margin-top: -25px;}
.mt-offset-small {margin-top: -50px;}
...Change Default Spacings
You can change the default margin and padding by editing the :root selector CSS variables.
/* Gutters */
--gutters-xsmall: 25px;
--gutters-small: 50px;
...Font Size
You can change the default font size by editing this code as well:
/* Font Size */
--font-size-xsmall: 12px;
--font-size-small: 15px;
--font-size-medium: 18px;
--font-size-large: 24px;
...