Basscss / Docs

Color

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.

Colors

.dark-gray .mid-gray .light-gray .white .blue .red .yellow .green

<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>

Background Colors

.bg-dark-gray
.bg-mid-gray
.bg-light-gray
.bg-white
.bg-blue
.bg-red
.bg-yellow
.bg-green
.bg-darken-1
.bg-darken-2
.bg-darken-3
<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>

Borders

.border
.border-top
.border-right
.border-bottom
.border-left
<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.

Colors Backgrounds Borders