{% extends 'layouts/docs.html' %} {% set page = pages.color %} {% set isdocs = true %} {% block content %}

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

{{ macros.example('colors.html') }}

Background Colors

{{ macros.example('backgrounds.html') }}

Borders

{{ macros.example('borders.html') }}

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

{{ macros.example('border-radii.html') }}

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

{{ macros.example('not-rounded.html') }}

Forms

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

{{ macros.example('form-basic.html') }}

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

{{ macros.example('form-states.html') }}

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

{{ macros.example('form-fieldset-styled.html') }}

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

{{ macros.example('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.

{{ macros.example('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.

{{ macros.example('nav-basic.html') }}

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

{{ macros.example('nav-basic-dark.html') }}

Tables

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

{{ macros.example('tables.html') }} {{ macros.example('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
{% include 'partials/guides-cta.html' with { heading: 'Learn More' } %} {% endblock %}