Colors

Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.

Colors

Text colors

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-muted">.text-muted</p>
<p class="text-body">.text-body</p>
<p class="text-emphasis">.text-emphasis</p>
<p class="text-white bg-dark">.text-white</p>

Grays

A Foundation-inspired neutral scale via .text-gray-{100..900} / .bg-gray-{100..900}.

Opacity

Use .text-opacity-{10|25|50|75|100} for text alphras on a primary-tinged color.

CSS variables

Every color is exposed as a CSS custom property: --boodoo-primary, --boodoo-primary-rgb, --boodoo-gray-100, etc. Use them anywhere in your own CSS.