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.

Color Base

basscss-color-base v1.1.2

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>

CSS Source

12 Rules
15 Selectors
47 Declarations
37 Properties
/* Basscss Color Base */

/*

   COLOR VARIABLES

   - Cool
   - Warm
   - Gray Scale

*/

:root {
  /* Cool */
  --aqua: #7fdbff;
  --blue: #0074d9;
  --navy: #001f3f;
  --teal: #39cccc;
  --green: #2ecc40;
  --olive: #3d9970;
  --lime: #01ff70;
  /* Warm */
  --yellow: #ffdc00;
  --orange: #ff851b;
  --red: #ff4136;
  --fuchsia: #f012be;
  --purple: #b10dc9;
  --maroon: #85144b;
  /* Gray scale */
  --white: #fff;
  --silver: #ddd;
  --gray: #aaa;
  --black: #111;
}

body {
  color: var(--black);
  background-color: white;
}

a {
  color: var(--link-color, var(--blue) );
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

pre,
code {
  background-color: var(--pre-background-color, var(--silver) );
  border-radius: var(--border-radius);
}

hr {
  border: 0;
  border-bottom-style: solid;
  border-bottom-width: var(--border-width);
  border-bottom-color: var(--border-color);
}

.button {
  color: white;
  background-color: var(--button-background-color, var(--blue) );
  border-radius: var(--border-radius);
  transition-duration: .05s;
  transition-timing-function: ease-out;
  transition-property: box-shadow, background-color;
}

.button:hover {
  box-shadow: inset 0 0 0 20rem var(--darken-1);
}

.button:focus {
  outline: none;
  border-color: var(--darken-2);
  box-shadow: 0 0 2px 1px var(--darken-3);
}

.button:active,
.button.is-active {
  box-shadow: inset 0 0 0 20rem var(--darken-2),
    inset 0 3px 4px 0 var(--darken-3),
    0 0 1px var(--darken-2);
}

.button:disabled,
.button.is-disabled {
  opacity: .5;
}

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

Button Outline

basscss-button-outline v0.0.2

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">Button</button>
<button class="button-outline navy">Button</button>
<button class="button-outline blue">Button</button>
<button class="button-outline aqua">Button</button>
<button class="button-outline teal">Button</button>
<button class="button-outline olive">Button</button>
<button class="button-outline green">Button</button>
<button class="button-outline lime">Button</button>
<button class="button-outline yellow">Button</button>
<button class="button-outline orange">Button</button>
<button class="button-outline red">Button</button>
<button class="button-outline maroon">Button</button>
<button class="button-outline fuchsia">Button</button>
<button class="button-outline purple">Button</button>

CSS Source

8 Rules
10 Selectors
33 Declarations
19 Properties
/* Basscss Button Outline */

.button-outline {
  position: relative;
  z-index: 2;
  color: inherit;
  background-color: transparent;
  border-radius: var(--border-radius);
  border: var(--border-width) solid currentcolor;
  transition-duration: .1s;
  transition-timing-function: ease-out;
  transition-property: box-shadow, background-color;
}

.button-outline:before {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  border: 1px solid transparent;
  background-color: currentcolor;
  border-radius: var(--border-radius);
  transition-duration: .1s;
  transition-timing-function: ease-out;
  transition-property: opacity;
  opacity: 0;
}

.button-outline:hover {
  box-shadow: none;
}

.button-outline:hover:before {
  opacity: .125;
}

.button-outline:focus {
  outline: none;
  border: var(--border-width) solid currentcolor;
  box-shadow: 0 0 3px 1px;
}

.button-outline:active,
.button-outline.is-active {
  box-shadow: inset 0 1px 5px 0, 0 0 1px;
}

.button-outline:disabled,
.button-outline.is-disabled {
  opacity: .5;
}

:root {
  --border-width: 1px;
  --border-radius: 3px;
}

Button Transparent

basscss-button-transparent v0.0.3

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">Button</button>
<button class="button-transparent navy">Button</button>
<button class="button-transparent blue">Button</button>
<button class="button-transparent aqua">Button</button>
<button class="button-transparent teal">Button</button>
<button class="button-transparent olive">Button</button>
<button class="button-transparent green">Button</button>
<button class="button-transparent lime">Button</button>
<button class="button-transparent yellow">Button</button>
<button class="button-transparent orange">Button</button>
<button class="button-transparent red">Button</button>
<button class="button-transparent maroon">Button</button>
<button class="button-transparent fuchsia">Button</button>
<button class="button-transparent purple">Button</button>

CSS Source

8 Rules
10 Selectors
32 Declarations
20 Properties
/* Basscss Button Transparent */

.button-transparent {
  position: relative;
  z-index: 2;
  color: inherit;
  background-color: transparent;
  border-radius: 0;
  border: var(--border-width) solid transparent;
  transition-duration: .1s;
  transition-timing-function: ease-out;
  transition-property: box-shadow;
}

.button-transparent:before {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  z-index: -1;
  top: -1px;
  left: -1px;
  border: 1px solid transparent;
  background-color: currentcolor;
  transition-duration: .1s;
  transition-timing-function: ease-out;
  transition-property: opacity;
  opacity: 0;
}

.button-transparent:hover {
  box-shadow: none;
}

.button-transparent:hover:before {
  opacity: .0625;
  opacity: .09375;
}

.button-transparent:focus {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 3px;
}

.button-transparent:active:before,
.button-transparent.is-active:before {
  opacity: .0625;
}

.button-transparent:disabled,
.button-transparent.is-disabled {
  opacity: .5;
}

:root {
  --border-width: 1px;
}

Colors

basscss-colors v1.0.6

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>

CSS Source

62 Rules
68 Selectors
82 Declarations
25 Properties
/* Basscss Colors */

/* Color */

.black,
.dark-gray {
  color: var(--black);
}

.gray,
.mid-gray {
  color: var(--gray);
}

.silver,
.light-gray {
  color: var(--silver);
}

.white {
  color: var(--white);
}

.aqua {
  color: var(--aqua);
}

.blue {
  color: var(--blue);
}

.navy {
  color: var(--navy);
}

.teal {
  color: var(--teal);
}

.green {
  color: var(--green);
}

.olive {
  color: var(--olive);
}

.lime {
  color: var(--lime);
}

.yellow {
  color: var(--yellow);
}

.orange {
  color: var(--orange);
}

.red {
  color: var(--red);
}

.fuchsia {
  color: var(--fuchsia);
}

.purple {
  color: var(--purple);
}

.maroon {
  color: var(--maroon);
}

/* Background Color */

.bg-black,
.bg-dark-gray {
  background-color: var(--black);
}

.bg-gray,
.bg-mid-gray {
  background-color: var(--gray);
}

.bg-silver,
.bg-light-gray {
  background-color: var(--silver);
}

.bg-white {
  background-color: var(--white);
}

.bg-aqua {
  background-color: var(--aqua);
}

.bg-blue {
  background-color: var(--blue);
}

.bg-navy {
  background-color: var(--navy);
}

.bg-teal {
  background-color: var(--teal);
}

.bg-green {
  background-color: var(--green);
}

.bg-olive {
  background-color: var(--olive);
}

.bg-lime {
  background-color: var(--lime);
}

.bg-yellow {
  background-color: var(--yellow);
}

.bg-orange {
  background-color: var(--orange);
}

.bg-red {
  background-color: var(--red);
}

.bg-fuchsia {
  background-color: var(--fuchsia);
}

.bg-purple {
  background-color: var(--purple);
}

.bg-maroon {
  background-color: var(--maroon);
}

.bg-darken-1 {
  background-color: var(--darken-1);
}

.bg-darken-2 {
  background-color: var(--darken-2);
}

.bg-darken-3 {
  background-color: var(--darken-3);
}

.bg-darken-4 {
  background-color: var(--darken-4);
}

/* Border Color */

.border-aqua {
  border-color: var(--aqua);
}

.border-blue {
  border-color: var(--blue);
}

.border-navy {
  border-color: var(--navy);
}

.border-teal {
  border-color: var(--teal);
}

.border-green {
  border-color: var(--green);
}

.border-olive {
  border-color: var(--olive);
}

.border-lime {
  border-color: var(--lime);
}

.border-yellow {
  border-color: var(--yellow);
}

.border-orange {
  border-color: var(--orange);
}

.border-red {
  border-color: var(--red);
}

.border-fuchsia {
  border-color: var(--fuchsia);
}

.border-purple {
  border-color: var(--purple);
}

.border-maroon {
  border-color: var(--maroon);
}

.border-black {
  border-color: var(--black);
}

.border-gray {
  border-color: var(--gray);
}

.border-silver {
  border-color: var(--silver);
}

.border-white {
  border-color: var(--white);
}

.border-darken-1 {
  border-color: var(--darken-1);
}

.border-darken-2 {
  border-color: var(--darken-2);
}

.border-darken-3 {
  border-color: var(--darken-3);
}

.border-darken-4 {
  border-color: var(--darken-4);
}

/* Opacity */

.muted {
  opacity: .5;
}

/*

   COLOR VARIABLES

   - Cool
   - Warm
   - Gray Scale

*/

:root {
  /* Cool */
  --aqua: #7fdbff;
  --blue: #0074d9;
  --navy: #001f3f;
  --teal: #39cccc;
  --green: #2ecc40;
  --olive: #3d9970;
  --lime: #01ff70;
  /* Warm */
  --yellow: #ffdc00;
  --orange: #ff851b;
  --red: #ff4136;
  --fuchsia: #f012be;
  --purple: #b10dc9;
  --maroon: #85144b;
  /* Gray scale */
  --white: #fff;
  --silver: #ddd;
  --gray: #aaa;
  --black: #111;
}

:root {
  --black: #222;
  --darken-1: rgba(0,0,0,.0625);
  --darken-2: rgba(0,0,0,.125);
  --darken-3: rgba(0,0,0,.25);
  --darken-4: rgba(0,0,0,.5);
}

Color Borders

basscss-color-borders v0.0.4

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>

CSS Source

13 Rules
13 Selectors
26 Declarations
17 Properties
/* Basscss Color Borders */

.border {
  border-style: solid;
  border-width: var(--border-width);
  border-color: var(--border-color);
}

.border-top {
  border-top-style: solid;
  border-top-width: var(--border-width);
  border-top-color: var(--border-color);
}

.border-right {
  border-right-style: solid;
  border-right-width: var(--border-width);
  border-right-color: var(--border-color);
}

.border-bottom {
  border-bottom-style: solid;
  border-bottom-width: var(--border-width);
  border-bottom-color: var(--border-color);
}

.border-left {
  border-left-style: solid;
  border-left-width: var(--border-width);
  border-left-color: var(--border-color);
}

.rounded {
  border-radius: var(--border-radius);
}

.circle {
  border-radius: 50%;
}

.rounded-top {
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.rounded-right {
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.rounded-bottom {
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.rounded-left {
  border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.not-rounded {
  border-radius: 0;
}

:root {
  --light-gray: #ccc;
  --border-color: var(--light-gray);
  --border-width: 1px;
  --border-radius: 3px;
}

Color Forms

basscss-color-forms v1.1.1

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>

CSS Source

12 Rules
14 Selectors
37 Declarations
26 Properties
/* Basscss Color Forms */

/*

   COLOR VARIABLES

   - Cool
   - Warm
   - Gray Scale

*/

:root {
  /* Cool */
  --aqua: #7fdbff;
  --blue: #0074d9;
  --navy: #001f3f;
  --teal: #39cccc;
  --green: #2ecc40;
  --olive: #3d9970;
  --lime: #01ff70;
  /* Warm */
  --yellow: #ffdc00;
  --orange: #ff851b;
  --red: #ff4136;
  --fuchsia: #f012be;
  --purple: #b10dc9;
  --maroon: #85144b;
  /* Gray scale */
  --white: #fff;
  --silver: #ddd;
  --gray: #aaa;
  --black: #111;
}

.field-light {
  background-color: white;
  transition: box-shadow .2s ease;
  border-style: solid;
  border-width: var(--border-width);
  border-color: var(--border-color);
  border-radius: var(--border-radius);
}

.field-light:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 2px color(var(--blue) alpha(.5));
}

.field-light:disabled {
  color: var(--mid-gray);
  background-color: var(--darken-2);
}

.field-light:read-only:not(select) {
  background-color: var(--darken-2);
}

.field-light:invalid {
  border-color: var(--red);
}

.field-light.is-success {
  border-color: var(--green);
}

.field-light.is-warning {
  border-color: var(--yellow);
}

.field-light.is-error {
  border-color: var(--red);
}

.radio-light,
.checkbox-light {
  transition: box-shadow .2s ease;
}

.radio-light {
  border-radius: 50%;
}

.radio-light:focus,
.checkbox-light:focus {
  outline: none;
  box-shadow: 0 0 2px color(var(--blue) alpha(.5));
}

Color Forms Dark

basscss-color-forms-dark v0.1.1

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>

CSS Source

9 Rules
9 Selectors
29 Declarations
23 Properties
/* Basscss Color Forms Dark */

/*

   COLOR VARIABLES

   - Cool
   - Warm
   - Gray Scale

*/

:root {
  /* Cool */
  --aqua: #7fdbff;
  --blue: #0074d9;
  --navy: #001f3f;
  --teal: #39cccc;
  --green: #2ecc40;
  --olive: #3d9970;
  --lime: #01ff70;
  /* Warm */
  --yellow: #ffdc00;
  --orange: #ff851b;
  --red: #ff4136;
  --fuchsia: #f012be;
  --purple: #b10dc9;
  --maroon: #85144b;
  /* Gray scale */
  --white: #fff;
  --silver: #ddd;
  --gray: #aaa;
  --black: #111;
}

.field-dark {
  color: white;
  background-color: var(--darken-3);
  border: 1px solid var(--darken-1);
  border-radius: var(--border-radius, 3px);
}

.field-dark::placeholder {
  color: rgba(255,255,255,.75);
}

.field-dark:focus {
  outline: 0;
  border: 1px solid rgba(255,255,255,.5);
}

.field-dark:read-only:not(select) {
  background-color: rgba(255,255,255,.25);
}

.field-dark:invalid {
  border-color: var(--red);
}

.field-dark.is-success {
  border-color: var(--green);
}

.field-dark.is-warning {
  border-color: var(--yellow);
}

.field-dark.is-error {
  border-color: var(--red);
}

Input Range

basscss-input-range v1.1.1

The .range-light style inherits color from its parent. Use color utilities to change the slider thumb color.

<input type="range" class="full-width range-light">
<input type="range" class="full-width blue range-light">

CSS Source

11 Rules
11 Selectors
54 Declarations
31 Properties
/* Basscss Input Range */

input[type=range] {
  vertical-align: middle;
  background-color: transparent;
}

.range-light {
  color: inherit;
  -webkit-appearance: none;
  padding-top: var(--form-field-padding-y);
  padding-bottom: var(--form-field-padding-y);
}

.range-light::-webkit-slider-thumb {
  -webkit-appearance: none;
  position: relative;
  width: var(--range-thumb-width);
  height: var(--range-thumb-height);
  border-radius: var(--border-radius);
  background-color: currentcolor;
  cursor: pointer;
  margin-top: var(--range-thumb-offset);
}

/* Touch screen friendly pseudo element */

.range-light::-webkit-slider-thumb:before {
  content: '';
  display: block;
  position: absolute;
  top: calc( -.5 * var(--range-thumb-pseudo-size) + (.5 * var(--range-thumb-height)) );
  left: calc( (-.5 * var(--range-thumb-pseudo-size)) + (.5 * var(--range-thumb-width)) );
  width: var(--range-thumb-pseudo-size);
  height: var(--range-thumb-pseudo-size);
  opacity: 0;
}

.range-light::-moz-range-thumb {
  width: var(--range-thumb-width);
  height: var(--range-thumb-height);
  border-radius: var(--border-radius);
  border-color: transparent;
  border-width: 0;
  background-color: currentcolor;
  cursor: pointer;
}

.range-light::-webkit-slider-runnable-track {
  height: var(--range-track-height);
  cursor: pointer;
  border-radius: var(--border-radius);
  background-color: var(--darken-3);
}

.range-light::-moz-range-track {
  height: var(--range-track-height);
  cursor: pointer;
  border-radius: var(--border-radius);
  background-color: var(--darken-3);
}

.range-light:focus {
  outline: none;
}

.range-light:focus::-webkit-slider-thumb {
  outline: none;
  border: 0;
  box-shadow: 0 0 1px 2px currentcolor;
}

.range-light:focus::-moz-range-thumb {
  outline: none;
  border: 0;
  box-shadow: 0 0 1px 2px currentcolor;
}

:root {
  --border-radius: var(--border-radius, 3px);
  --form-field-height: var(--form-field-height, 2.25rem);
  --form-field-padding-y: var(--form-field-padding-y, .5rem);
  --form-field-padding-x: var(--form-field-padding-x, .5rem);
  --darken-3: rgba(0,0,0, .25);
  --range-thumb-width: var(--form-field-padding-x);
  --range-thumb-height: calc( var(--form-field-height) - (var(--form-field-padding-y) * 2) );
  --range-track-height: calc( var(--form-field-padding-y) / 2 );
  --range-thumb-offset: calc( var(--range-thumb-height) / -2 + (var(--range-track-height) / 2) );
  --range-thumb-pseudo-size: var(--form-field-height);
}

Progress

basscss-progress v1.0.1

The .progress style inherits color from its parent. Use color utilities to adjust the fill color.

0.375
<progress value="0.375" class="progress">0.375</progress>

CSS Source

5 Rules
5 Selectors
19 Declarations
14 Properties
/* Basscss Progress */

.progress {
  display: block;
  width: 100%;
  height: calc( var(--form-field-height) / 4 );
  margin: var(--form-field-padding-y) 0;
  background-color: var(--darken-2);
  border: 0;
  border-radius: 10000px;
  overflow: hidden;
  -webkit-appearance: none;
  cursor: pointer;
}

.progress::-webkit-progress-bar {
  -webkit-appearance: none;
  background-color: var(--darken-2);
}

.progress::-webkit-progress-value {
  -webkit-appearance: none;
  background-color: currentColor;
}

.progress::-moz-progress-bar {
  background-color: currentColor;
}

:root {
  --form-field-height: var(--form-field-height, 2.25rem);
  --form-field-padding-y: var(--form-field-padding-y, .5rem);
  --form-field-padding-x: var(--form-field-padding-x, .5rem);
  --darken-2: rgba(0,0,0, .125);
}

Color Tables

basscss-color-tables v0.1.0

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>

CSS Source

3 Rules
4 Selectors
7 Declarations
7 Properties
/* Basscss Color Tables */

.table-light th,
.table-light td {
  border-bottom-style: solid;
  border-bottom-width: var(--border-width);
  border-bottom-color: var(--border-color);
}

.table-light tr:last-child td {
  border-bottom: 0;
}

:root {
  --light-gray: #ccc;
  --border-color: var(--light-gray);
  --border-width: 1px;
}

Background Images

basscss-background-images v0.0.5

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>

CSS Source

7 Rules
7 Selectors
7 Declarations
2 Properties
/* Basscss Background Images */

.bg-cover {
  background-size: cover;
}

.bg-contain {
  background-size: contain;
}

.bg-center {
  background-position: center;
}

.bg-top {
  background-position: top;
}

.bg-right {
  background-position: right;
}

.bg-bottom {
  background-position: bottom;
}

.bg-left {
  background-position: left;
}