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

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.

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

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

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

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

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

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

<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

Colors Borders Forms Forms Dark Buttons Tables