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

Background Colors

.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

.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

Apply the .field-light color style to input, select, and textarea elements to control appearance.

<form class="sm-col-6">
  <label>Email Address</label>
  <input type="text" class="block full-width field-light">
  <label>Password</label>
  <input type="password" class="block full-width field-light">
  <label>Select</label>
  <select class="block full-width field-light">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
  </select>
  <label class="block full-width mb2">
    <input type="checkbox" checked>
    Remember me
  </label>
  <button type="submit" class="button-blue">Sign In</button>
  <button type="reset" class="button-gray">Cancel</button>
</form>

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

<form class="sm-col-6">
  <label>Normal</label>
  <input type="text" class="block full-width field-light">
  <label>Disabled</label>
  <input type="text" class="block full-width field-light" value="This is disabled" disabled>
  <label>Read-only (But still selectable)</label>
  <input type="text" class="block full-width field-light" value="This is read-only" readonly>
  <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">
  <button type="submit" class="button-blue">Submit</button>
  <button type="reset" class="button-gray">Reset</button>
</form>

Use color utilities along with .fieldset-reset to style fieldsets.

Fieldset Legend
<form class="sm-col-6">
  <fieldset class="fieldset-reset">
    <div class="p2 bg-white border rounded">
      <legend class="h3 bold">Fieldset Legend</legend>
      <label>Hamburger</label>
      <input type="text" class="block full-width field-light">
      <label>Hot Dog</label>
      <input type="text" class="block full-width field-light">
    </div>
  </fieldset>
  <button type="sumbit" class="button-blue">Submit</button>
</form>

For forms on dark backgrounds, use the .field-dark style.

<form class="p2 sm-col-6 white bg-dark-gray rounded">
  <label>Hamburger</label>
  <input type="text" class="block full-width field-dark">
  <label>Hot Dog</label>
  <input type="text" class="block full-width field-dark">
  <button class="button-blue">Potato</button>
</form>

Buttons

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

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>

Default Variables

Colors styles use the following variables. To alter these defaults, declare new values after importing Basscss with Rework.

:root {

  --blue: #0076df;
  --red: #f95020;
  --green: #00d930;
  --yellow: #ffdc00;

  --dark-gray: #333;
  --mid-gray: #777;
  --light-gray: #ccc;
  --lighter-gray: #eee;

  --darken-1: rgba(#000,.0625);
  --darken-2: rgba(#000,.125);
  --darken-3: rgba(#000,.25);
  --darken-4: rgba(#000,.5);

  --border-color: var(--light-gray);
  --border-width: 1px;
  --border-radius: 3px;

}

NPM

These basic color styles are also available as a standalone NPM module.

npm install basscss-color-basic

Colors Backgrounds Borders Forms Buttons Tables Variables NPM

Learn More