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

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>

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

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

Learn More

To learn more about using Basscss and the motivations behind it, read the Design Principles.

Or to learn more about web design in general, check out the Guide to Basics.


Colors Backgrounds Borders Forms Buttons Tables Variables NPM