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

basscss.com

Use this suite of color and background color utilities to directly style elements.

### .dark-gray .mid-gray .light-gray .lighter-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="lighter-gray">.lighter-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>

.bg-dark-gray
.bg-mid-gray
.bg-light-gray
.bg-lighter-gray
.bg-white
.bg-blue
.bg-red
.bg-yellow
.bg-green
.bg-darken-1
.bg-darken-2
.bg-darken-3
.bg-darken-4

    <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-lighter-gray">.bg-lighter-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="center p1 bg-darken-4">.bg-darken-4</div>

# Borders

basscss.com

.border
.border-top
.border-right
.border-bottom
.border-left

    <div class="p1 m1 border bg-lighter-gray">.border</div>
    <div class="p1 m1 border-top bg-lighter-gray">.border-top</div>
    <div class="p1 m1 border-right bg-lighter-gray">.border-right</div>
    <div class="p1 m1 border-bottom bg-lighter-gray">.border-bottom</div>
    <div class="p1 m1 border-left bg-lighter-gray">.border-left</div>

Utility styles for border radii can be used to style images and other elements.

    <img src="/docs/placeholder-square.svg" class="rounded" width="64" height="64" />
    <img src="/docs/placeholder-square.svg" class="circle" width="64" height="64" />
    <img src="/docs/placeholder-square.svg" class="rounded-top" width="64" height="64" />
    <img src="/docs/placeholder-square.svg" class="rounded-right" width="64" height="64" />
    <img src="/docs/placeholder-square.svg" class="rounded-bottom" width="64" height="64" />
    <img src="/docs/placeholder-square.svg" class="rounded-left" width="64" height="64" />

The `.not-rounded` utility can be used to override default radii. This is useful for things like input and button groups.

    <button class="button-blue not-rounded">Not Rounded</button>

# Forms

basscss.com

Basic color styles for form elements on a light background.

# Input Fields

To style the color, background, and border styles for form fields, use the `.field-light` style.

Input Select
Textarea

    <label>Input</label>
    <input type="text" class="block full-width field-light">
    <label>Select</label>
    <select class="block full-width field-light">
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <label>Textarea</label>
    <textarea class="block full-width field-light"></textarea>

The `.field-light` style includes states for disabled and read-only fields, as well as success, warning, and error states.

Normal Disabled Read Only Required Success Warning Error

    <label>Normal</label>
    <input type="text" class="block full-width field-light">
    <label>Disabled</label>
    <input type="text" class="block full-width field-light" disabled value="This is disabled">
    <label>Read Only</label>
    <input type="text" class="block full-width field-light" readonly value="This is read-only">
    <label>Required</label>
    <input type="text" class="block full-width field-light" required>
    <label>Success</label>
    <input type="text" class="block full-width field-light is-success">
    <label>Warning</label>
    <input type="text" class="block full-width field-light is-warning">
    <label>Error</label>
    <input type="text" class="block full-width field-light is-error">

Style radio buttons and checkboxes with the `.radio-light` and `.checkbox-light` styles. These add focus states that are consistent with the other form elements.

Checkbox Radio

    <label class="block">
      <input type="checkbox" class="checkbox-light">
      Checkbox
    </label>
    <label class="block">
      <input type="radio" class="radio-light">
      Radio
    </label>

# Forms Dark

basscss.com

Color styles for form elements on dark backgrounds.

# Input Fields

To style the color, background, and border styles for form fields on dark backgrounds, use the `.field-dark` style.

Input Select
Textarea

    <form class="p2 white bg-dark-gray">
      <label>Input</label>
      <input type="text" class="block full-width field-dark">
      <label>Select</label>
      <select class="block full-width field-dark">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
      <label>Textarea</label>
      <textarea class="block full-width field-dark"></textarea>
    </form>

The `.field-dark` style includes states for disabled and read-only fields, as well as success, warning, and error states.

Normal Disabled Read Only Required Success Warning Error

    <form class="p2 white bg-dark-gray">
      <label>Normal</label>
      <input type="text" class="block full-width field-dark">
      <label>Disabled</label>
      <input type="text" class="block full-width field-dark" disabled value="This is disabled">
      <label>Read Only</label>
      <input type="text" class="block full-width field-dark" readonly value="This is read-only">
      <label>Required</label>
      <input type="text" class="block full-width field-dark" required>
      <label>Success</label>
      <input type="text" class="block full-width field-dark is-success">
      <label>Warning</label>
      <input type="text" class="block full-width field-dark is-warning">
      <label>Error</label>
      <input type="text" class="block full-width field-dark is-error">
    </form>

# Buttons

basscss.com

Basscss includes the following basic button styles: `.button-blue`, `.button-gray`, `.button-blue-outline`, and `.button-red`. Customize these styles to suite your needs.

Link Button

    <div class="mb1">
      <button>Button</button>
      <a href="#!" class="button">Link Button</a>
      <input type="button" class="button" value="Input Button">
    </div>
    <div class="mb1">
      <button class="button-blue mb1">Button Blue</button>
      <button class="button-blue-outline mb1">Button Blue Outline</button>
      <button class="button-gray mb1">Button Gray</button>
      <button class="button-red mb1">Button Red</button>
    </div>

Button styles can be used for navigation. The `.button-nav-light` style adds a subtle hover effect for links on a light background.

Burgers Fries Shakes Onion Rings

    <div class="mxn1">
      <a href="#!" class="button button-narrow button-nav-light">Burgers</a>
      <a href="#!" class="button button-narrow button-nav-light">Fries</a>
      <a href="#!" class="button button-narrow button-nav-light">Shakes</a>
      <a href="#!" class="button button-narrow button-nav-light">Onion Rings</a>
    </div>

For dark backgrounds, use the `.button-nav-dark` style.

Burgers Fries Shakes Onion Rings

    <div class="bg-dark-gray">
      <a href="#!" class="button button-narrow button-nav-dark">Burgers</a>
      <a href="#!" class="button button-narrow button-nav-dark">Fries</a>
      <a href="#!" class="button button-narrow button-nav-dark">Shakes</a>
      <a href="#!" class="button button-narrow button-nav-dark">Onion Rings</a>
    </div>

# Tables

basscss.com

Use the `.table-light` style as a starting point, then apply color utilities to style tables.

Artist | Album | Release Date
--- | --- | ---
Huey Lewis and the News | Sports | 1983
Phil Collins | No Jacket Required | 1985
Peter Gabriel | So | 1986

    <div class="overflow-scroll">
      <table class="table-light">
        <thead>
          <tr>
            <th>Artist</th> <th>Album</th> <th>Release Date</th>
          </tr>
        </thead>
        <tbody>
          <tr> <td>Huey Lewis and the News</td> <td>Sports</td> <td>1983</td> </tr>
          <tr> <td>Phil Collins</td> <td>No Jacket Required</td> <td>1985</td> </tr>
          <tr> <td>Peter Gabriel</td> <td>So</td> <td>1986</td> </tr>
        </tbody>
      </table>
    </div>

Artist | Album | Release Date
--- | --- | ---
Huey Lewis and the News | Sports | 1983
Phil Collins | No Jacket Required | 1985
Peter Gabriel | So | 1986

    <div class="overflow-scroll">
      <table class="table-light overflow-hidden bg-white border rounded">
        <thead class="bg-light-gray">
          <tr>
            <th>Artist</th> <th>Album</th> <th>Release Date</th>
          </tr>
        </thead>
        <tbody>
          <tr> <td>Huey Lewis and the News</td> <td>Sports</td> <td>1983</td> </tr>
          <tr> <td>Phil Collins</td> <td>No Jacket Required</td> <td>1985</td> </tr>
          <tr> <td>Peter Gabriel</td> <td>So</td> <td>1986</td> </tr>
        </tbody>
      </table>
    </div>

# Learn More

### Basics

CSS and Web Design Fundamentals

### Page Layout

Using the Grid System to Create an Entire Page

### UI Elements

Styling Custom Controls for Interactivity

### Tips & Tricks

Getting the Most Out of Basscss

Colors Borders Forms Forms Dark Buttons Tables