The word color is used loosely here to describe the surface-level aspects of a design, including colors, backgrounds, borders, shadows and other properties that are decorative and highly likely to change over time. Basscss includes a suite of color utilities as a starting point. Use these as a guide for creating your own styles.
<h3 class="center">
<span class="dark-gray">.dark-gray</span>
<span class="mid-gray">.mid-gray</span>
<span class="light-gray">.light-gray</span>
<span class="white">.white</span>
<span class="blue">.blue</span>
<span class="red">.red</span>
<span class="yellow">.yellow</span>
<span class="green">.green</span>
</h3>
<div class="center p1 white bg-dark-gray">.bg-dark-gray</div>
<div class="center p1 bg-mid-gray">.bg-mid-gray</div>
<div class="center p1 bg-light-gray">.bg-light-gray</div>
<div class="center p1 bg-white">.bg-white</div>
<div class="center p1 bg-blue">.bg-blue</div>
<div class="center p1 bg-red">.bg-red</div>
<div class="center p1 bg-yellow">.bg-yellow</div>
<div class="center p1 bg-green">.bg-green</div>
<div class="center p1 bg-darken-1">.bg-darken-1</div>
<div class="center p1 bg-darken-2">.bg-darken-2</div>
<div class="center p1 bg-darken-3">.bg-darken-3</div>
<div class="p1 m1 border bg-white">.border</div>
<div class="p1 m1 border-top bg-white">.border-top</div>
<div class="p1 m1 border-right bg-white">.border-right</div>
<div class="p1 m1 border-bottom bg-white">.border-bottom</div>
<div class="p1 m1 border-left bg-white">.border-left</div>
Basscss also includes other basic color styles for links, buttons, form elements, and tables. Customize or extend these styles to create your own theme.