ALF Colors
There's a number of predefined colors in ALF, which you can configure by overwriting the SASS variables. There are also corresponding classes for text color, background color and border color:
| Text color | Background color | Border color |
|---|---|---|
| .txt-main | .bg-main | .bd-main |
| .txt-alt | .bg-alt | .bd-alt |
| .txt-ok | .bg-ok | .bd-ok |
| .txt-warning | .bg-warning | .bd-warning |
| .txt-error | .bg-error | .bd-error |
| .txt-text | .bg-text | .bd-text |
| .txt-link | .bg-link | .bd-link |
NOTE: I'd try to avoid using these classes, as this can clutter your HTML with presentational classes. A better approach (imo) is to use the SASS color variables to create your own components. Besides, the SASS variables provide extra flexibility (see the section on SASS variables).
Many of the ALF components can make use of these colors, just by adding the color identifier, (i.e. <div class="box warning">...)