{% extends '../../layouts/default.html' %} {% block content %}
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

{% include '../../partials/_example.html' with { file: 'colors.html' } %}

Background Colors

{% include '../../partials/_example.html' with { file: 'backgrounds.html' } %}

Borders

{% include '../../partials/_example.html' with { file: 'borders.html' } %}

Utility styles for border radii can be used to style images and other elements.

{% include '../../partials/_example.html' with { file: 'border-radii.html' } %}

The .not-rounded utility can be used to override default radii. This is useful for things like input and button groups.

{% include '../../partials/_example.html' with { file: 'not-rounded.html' } %}

Forms

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

{% include '../../partials/_example.html' with { file: 'form-basic.html' } %}

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

{% include '../../partials/_example.html' with { file: 'form-states.html' } %}

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

{% include '../../partials/_example.html' with { file: 'form-fieldset-styled.html' } %}

For forms on dark backgrounds, use the .field-dark style.

{% include '../../partials/_example.html' with { file: 'form-dark.html' } %}

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.

{% include '../../partials/_example.html' with { file: 'buttons.html' } %}

Button styles can be used for navigation. The .button-nav-light style adds a subtle hover effect for links on a light background.

{% include '../../partials/_example.html' with { file: 'nav-basic.html' } %}

For dark backgrounds, use the .button-nav-dark style.

{% include '../../partials/_example.html' with { file: 'nav-basic-dark.html' } %}

Tables

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

{% include '../../partials/_example.html' with { file: 'tables.html' } %} {% include '../../partials/_example.html' with { file: 'table-color-utilities.html' } %}

Default Variables

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

{% include '../../../examples/color-variables.html' %}

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

{% endblock %}