{% 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.
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.
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.
For forms on dark backgrounds, use the .field-dark
style.
Use the .table-light
style as a starting point,
then apply color utilities to style tables.
Colors styles use the following variables. To alter these defaults, declare new values after importing Basscss with Rework.
{% include 'examples/color-variables.html' %}These basic color styles are also available as a standalone NPM module.
npm install basscss-color-basic