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.

Base

Sets color styles for the body tag, links, pre, code, hr tags, and the .button utility.

Buttons

Default buttons have a blue background. Use color utilities to alter the appearance.

<button class="button mb1">Button</button>
<button class="button mb1 bg-black">Button</button>
<button class="button mb1 bg-gray">Button</button>
<button class="button mb1 black bg-silver">Button</button>
<button class="button mb1 black bg-aqua">Button</button>
<button class="button mb1 bg-navy">Button</button>
<button class="button mb1 bg-teal">Button</button>
<button class="button mb1 bg-green">Button</button>
<button class="button mb1 bg-olive">Button</button>
<button class="button mb1 bg-lime">Button</button>
<button class="button mb1 black bg-yellow">Button</button>
<button class="button mb1 bg-orange">Button</button>
<button class="button mb1 bg-red">Button</button>
<button class="button mb1 bg-fuchsia">Button</button>
<button class="button mb1 bg-purple">Button</button>
<button class="button mb1 bg-maroon">Button</button>
<button class="button mb1 black bg-darken-1">Button</button>
<button class="button mb1 black bg-darken-2">Button</button>
<button class="button mb1 black bg-darken-3">Button</button>
<button class="button mb1 bg-darken-4">Button</button>

Default Variables

Uses colors from mrmrs/colors in addition to these defaults:

:root {
  --darken-1: rgba(#000,.0625);
  --darken-2: rgba(#000,.125);
  --darken-3: rgba(#000,.25);
  --darken-4: rgba(#000,.5);
  --border-color: var(--darken-2);
  --border-radius: 3px;
  --border-width: 1px;
}

Colors

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

.black .gray .silver .white .aqua .blue .navy .teal .green .olive .lime .yellow .orange .red .fuchsia .purple .maroon

<h3 class="center">
  <span class="black">.black</span>
  <span class="gray">.gray</span>
  <span class="silver">.silver</span>
  <span class="white">.white</span>
  <span class="aqua">.aqua</span>
  <span class="blue">.blue</span>
  <span class="navy">.navy</span>
  <span class="teal">.teal</span>
  <span class="green">.green</span>
  <span class="olive">.olive</span>
  <span class="lime">.lime</span>
  <span class="yellow">.yellow</span>
  <span class="orange">.orange</span>
  <span class="red">.red</span>
  <span class="fuchsia">.fuchsia</span>
  <span class="purple">.purple</span>
  <span class="maroon">.maroon</span>
</h3>
.bg-black
.bg-gray
.bg-silver
.bg-white
.bg-aqua
.bg-blue
.bg-navy
.bg-teal
.bg-green
.bg-olive
.bg-lime
.bg-yellow
.bg-orange
.bg-red
.bg-fuchsia
.bg-purple
.bg-maroon
.bg-darken-1
.bg-darken-2
.bg-darken-3
.bg-darken-4
<div class="center p1 white bg-black">.bg-black</div>
<div class="center p1 bg-gray">.bg-gray</div>
<div class="center p1 bg-silver">.bg-silver</div>
<div class="center p1 bg-white">.bg-white</div>
<div class="center p1 bg-aqua">.bg-aqua</div>
<div class="center p1 bg-blue">.bg-blue</div>
<div class="center p1 white bg-navy">.bg-navy</div>
<div class="center p1 bg-teal">.bg-teal</div>
<div class="center p1 bg-green">.bg-green</div>
<div class="center p1 bg-olive">.bg-olive</div>
<div class="center p1 bg-lime">.bg-lime</div>
<div class="center p1 bg-yellow">.bg-yellow</div>
<div class="center p1 bg-orange">.bg-orange</div>
<div class="center p1 bg-red">.bg-red</div>
<div class="center p1 bg-fuchsia">.bg-fuchsia</div>
<div class="center p1 bg-purple">.bg-purple</div>
<div class="center p1 white bg-maroon">.bg-maroon</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>
.border-black
.border-gray
.border-silver
.border-white
.border-aqua
.border-blue
.border-navy
.border-teal
.border-green
.border-olive
.border-lime
.border-yellow
.border-orange
.border-red
.border-fuchsia
.border-purple
.border-maroon
.border-darken-1
.border-darken-2
.border-darken-3
.border-darken-4
<div class="flex flex-wrap mxn1">
  <div class="flex-auto center m1 p1 white border border-black">.border-black</div>
  <div class="flex-auto center m1 p1 border border-gray">.border-gray</div>
  <div class="flex-auto center m1 p1 border border-silver">.border-silver</div>
  <div class="flex-auto center m1 p1 border border-white">.border-white</div>
  <div class="flex-auto center m1 p1 border border-aqua">.border-aqua</div>
  <div class="flex-auto center m1 p1 border border-blue">.border-blue</div>
  <div class="flex-auto center m1 p1 border border-navy">.border-navy</div>
  <div class="flex-auto center m1 p1 border border-teal">.border-teal</div>
  <div class="flex-auto center m1 p1 border border-green">.border-green</div>
  <div class="flex-auto center m1 p1 border border-olive">.border-olive</div>
  <div class="flex-auto center m1 p1 border border-lime">.border-lime</div>
  <div class="flex-auto center m1 p1 border border-yellow">.border-yellow</div>
  <div class="flex-auto center m1 p1 border border-orange">.border-orange</div>
  <div class="flex-auto center m1 p1 border border-red">.border-red</div>
  <div class="flex-auto center m1 p1 border border-fuchsia">.border-fuchsia</div>
  <div class="flex-auto center m1 p1 border border-purple">.border-purple</div>
  <div class="flex-auto center m1 p1 border border-maroon">.border-maroon</div>
  <div class="flex-auto center m1 p1 border border-darken-1">.border-darken-1</div>
  <div class="flex-auto center m1 p1 border border-darken-2">.border-darken-2</div>
  <div class="flex-auto center m1 p1 border border-darken-3">.border-darken-3</div>
  <div class="flex-auto center m1 p1 border border-darken-4">.border-darken-4</div>
</div>

The color values used in this module are from mrmrs/colors.

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>

Button Outline

The button-outline style inherits color from its parent.

Link Button
<div class="blue">
  <button class="button-outline">Button</button>
  <a href="#!" class="button button-outline">Link Button</a>
  <input type="button" class="button button-outline" value="Input Button">
</div>

Use utility styles to change the color.

<button class="button-outline green">Button</button>
<button class="button-outline red">Button</button>

Button Transparent

The button-transparent style inherits color from its parent.

Link Button
<div class="blue">
  <button class="button-transparent">Button</button>
  <a href="#!" class="button button-transparent">Link Button</a>
  <input type="button" class="button button-transparent" value="Input Button">
</div>

Use utility styles to change the color.

<button class="button-transparent green">Button</button>
<button class="button-transparent red">Button</button>

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>