Colors
Utilities for controlling the color and background color of an element.
It uses $global-colors variables map to generate the color utilities.
Where can I customize this variable?
It is located in 1-Settings/_settings.colors.scss
$global-colors: (
'branding-primary': hsl(72, 54%, 52%),
'notify-success': hsl(122, 39%, 49%),
'notify-info': hsl(199, 92%, 56%),
'notify-warning': hsl(36, 100%, 50%),
'notify-danger': hsl(4, 90%, 58%),
);
Text color
Used to give color to the text of a specific element.
| Class | Property |
|---|---|
| u-color-{color} | color: {color} |
Usage
<p class="u-color-notify-warning">Lorem ipsum dolor sit amet</p>
Lorem ipsum dolor sit amet
Background color
Used to give color to the background of a specific element.
| Class | Property |
|---|---|
| u-background-{color} | background-color: {color} |
Usage
<p class="u-background-notify-warning">Lorem ipsum dolor sit amet</p>
Lorem ipsum dolor sit amet