Background-Color: Requirements

---

Background-Color: Black & White

Black and White cannot be lightened or darkeded with class name extensions (use gray).

---

Background-Color: Class Prefix Options (Required)

Class names can be written three different ways depending on your desired specificity.

Minimal	.bg
Abbr Strict	.bg-color
Strict	.background-color

Background-Color: Class Color Extensions (Required)

The following color extensions can be customized and extended in the variable-settings.scss file.

-gray	-primary	-success	-danger
-warning	-info	-harvest	-royal

Background-Color: Class Brightness Extensions (Optional)

The following breakpoint extension can be customized and extended in the variable-settings.scss file.

-darkest	-darker	-dark
-light	-lighter	-lightest

Background-Color: Class Force Print Extension (Optional)

The following print extension forces the background color to print no matter the browsers settings.

-pr

Background-Color: Example Code

<!-- Minimal: Creates a red background. -->
<div class="bg-danger">Background-Color</div>

<!-- Minimal: Creates a light blue background. -->
<div class="bg-primary-light">Background-Color</div>

<!-- Abbreviated Strict: Creates a dark green background. -->
<div class="bg-color-success-dark">Background-Color</div>

<!-- Strict: Creates a darker purple background. -->
<div class="background-color-royal-darker">Background-Color</div>

Background-Color: Swatches