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.
Sets color styles for the body tag, links, pre, code, hr tags, and the .button
utility.
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>
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; }
Use this suite of color, background color, and border color utilities to directly style elements.
<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>
<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>
<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.
<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>
Basic color styles for form elements on a light background.
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>
Color styles for form elements on dark backgrounds.
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>
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>