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

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>

Colors

Use this suite of color, background color, and border color utilities to directly style elements. The color values used in this module are from mrmrs/colors.

Colors

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

Background Colors

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

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

Opacity

To de-emphasize elements with lower opacity, use the .muted utility.

Normal Muted
<span class="blue">Normal</span>
<span class="blue muted">Muted</span>

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="http://d2v52k3cl9vedd.cloudfront.net/assets/images/placeholder-square.svg" class="rounded" width="64" height="64" />
<img src="http://d2v52k3cl9vedd.cloudfront.net/assets/images/placeholder-square.svg" class="circle" width="64" height="64" />
<img src="http://d2v52k3cl9vedd.cloudfront.net/assets/images/placeholder-square.svg" class="rounded-top" width="64" height="64" />
<img src="http://d2v52k3cl9vedd.cloudfront.net/assets/images/placeholder-square.svg" class="rounded-right" width="64" height="64" />
<img src="http://d2v52k3cl9vedd.cloudfront.net/assets/images/placeholder-square.svg" class="rounded-bottom" width="64" height="64" />
<img src="http://d2v52k3cl9vedd.cloudfront.net/assets/images/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 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>

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>

Background Images

Use the .bg-cover or .bg-contain utilities to control background size.

.bg-cover
<div class="p4 bg-cover" style="background-image: url(http://d2v52k3cl9vedd.cloudfront.net/assets/images/placeholder.svg)">
  <code>.bg-cover</code>
</div>

Use background position utilities to control position.

.bg-center

.bg-center
<div class="p4 bg-cover bg-center" style="background-image: url(http://d2v52k3cl9vedd.cloudfront.net/assets/images/placeholder.svg)">
  <code>.bg-center</code>
</div>

.bg-top

.bg-top
<div class="p4 bg-cover bg-top" style="background-image: url(http://d2v52k3cl9vedd.cloudfront.net/assets/images/placeholder.svg)">
  <code>.bg-top</code>
</div>

.bg-right

.bg-right
<div class="p4 bg-cover bg-right" style="background-image: url(http://d2v52k3cl9vedd.cloudfront.net/assets/images/placeholder.svg)">
  <code>.bg-right</code>
</div>

.bg-bottom

.bg-bottom
<div class="p4 bg-cover bg-bottom" style="background-image: url(http://d2v52k3cl9vedd.cloudfront.net/assets/images/placeholder.svg)">
  <code>.bg-bottom</code>
</div>

.bg-left

.bg-left
<div class="p4 bg-cover bg-left" style="background-image: url(http://d2v52k3cl9vedd.cloudfront.net/assets/images/placeholder.svg)">
  <code>.bg-left</code>
</div>