Accoutrement-Color
Sass color-palette management by OddBird…
- Organize all your colors into a single map, or set of maps
- Document color relationships directly in the code
- Automate WCAG-appropriate contrast checking
- Generate color-palette documentation with Herman
OddBird's Accoutrement toolkits are designed around the idea that code should be meaningful to both humans and machines – opening the door for automation, while improving or maintaining readability. These tools integrate with Herman, our automated living pattern-library generator built on SassDoc.
Other Accoutrement include…
- Init provides lightweight browser-normalization.
- Scale helps manage scale patterns like font-sizes, margins, and gutters.
- Type provides webfont management tools, and other typography helpers.
- Layout provides layout utilities such as box-sizing, intrinsic ratios, z-index management, named media-queries, and a clearfix.
Quick Start: Colors
Install the package with npm or yarn:
npm install accoutrement-coloryarn add accoutrement-color
Import the library:
;
Establish your color palette:
;
Access your colors from anywhere:
.example
You can also define your colors in smaller maps,
and then add them to the global $colors
variable
using the merge-color()
function,
or add-colors()
mixin.
; ; // merge everything into the main $colors map…
We'll also help you calculate WCAG-appropriate color contrasts:
a:hover