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.
<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>
<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>
<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>
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.
<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>
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>
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;
}
These basic color styles are also available as a standalone NPM module.
npm install basscss-color-basic