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

Background Colors

Borders

Forms

Apply the .field-light color style to input, select, and textarea elements to control appearance.

The .field-light style includes states for disabled and read-only fields, as well as success, warning, and error states.

Use color utilities along with .fieldset-reset to style fieldsets.

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.

Tables

Use the .table-light style as a starting point, then apply color utilities to style tables.

Default Variables

Colors styles use the following variables. To alter these defaults, declare new values after importing Basscss with Rework.

NPM

These basic color styles are also available as a standalone NPM module.

npm install basscss-color-basic

Colors Backgrounds Borders Forms Buttons Tables Variables NPM

Learn More