Video Overview
Utility Classes
There are 3 font colors & 3 background color classes available in the Framework.
Font Colors
Each of the font colors is linked to a corresponding Root Variable.
txt-1 linked to --txt-1-color
txt-2 linked to --txt-2-color
txt-3 linked to --txt-3-color
Example usage:
<div class="txt-2">Example</div>
Div fonts will inherit the color assigned to --txt-2-color.
Background Colors
Each of the background colors is linked to a corresponding Root Variable.
bg-1 - linked to --background-color-1
bg-2 - linked to --background-color-2
bg-3 - linked to --background-color-3
Example usage:
<div class="bg-1">Example</div>
Div background will inherit the color assigned to --background-color-1.
CSS Usage
You can utilise the Root Colors in your CSS by using the color variable names in place of an absolute value.
Example usage:
.example {color: var(--red);}
.example {background-color: var(--red);}
.example {border: 1px 1px var(--red);}