Robust design systems require meaningful, readable, reusable code. These Sass utilities are designed to help define and manage your design tokens (colors, fonts, sizes, etc.) in a format that can be understood by both humans and parsers -- opening the door for automation, while improving consistency and readability. These tools also integrate with Herman, our automated living pattern-library generator built on SassDoc.
Install the package with npm or yarn
npm install accoutrement [--save-dev]yarn add accoutrement [--dev]
Import what you need:
// core and all plugins (also available with `/index`);// init normalization;// individual plugins (core is required);;
If you're using Eyeglass, you can import the default "tools" (core + plugins) using only:
The accoutrement tools are built around a shared data-storage syntax using Sass "map" objects:
Using a custom syntax, we can extend maps to handle internal reference, and functional adjustments -- capturing meaningful relationships between design tokens:
Map storage serves a larger purpose:
- Related data is grouped explicitly, making the code more readable and maintainable
- The "single source of truth" encourages reusable design patterns
- Meaningful structure allows automation, from automated style guides to automated functionality (provided in the plugins)
The Core module provides the generic (non data-specific) setup and syntax parsing:
- Retrieve & parse map values
with the generic
- Use our built-in math, modular-scale, list, and string utilities
- Register your own first class functions, for reference inside data maps
We provide light-weight browser-normalization,
as a distinct include.
This is not part of the
because it is the only module to produce
direct CSS output.
While the core module handles generic data-management, we also provide plugins for a few common data types: