This is a
playground to test code. It runs a full
Node.js environment and already has all of
npm’s 400,000 packages pre-installed, including
accoutrement with all
npm packages installed. Try it out:
accoutrement lists no main file and has no index.js, so it can't be directly required. If this is a mistake, please let us know. It may however contain internal files that you can require manually:
This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.
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`) @import '<path-to>/accoutrement/sass/tools'; // init normalization @import '<path-to>/accoutrement/sass/init'; // individual plugins (core is required) @import '<path-to>/accoutrement/sass/core'; @import '<path-to>/accoutrement/sass/plugin/<name>';
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:
$map: ( 'root': 16px, 'gutter': 1em, );
Using a custom syntax, we can extend maps to handle internal reference, and functional adjustments -- capturing meaningful relationships between design tokens:
$map: ( 'root': 16px, // internal reference & adjustments 'gutter': '#root' ('_major-third': 1, 'convert-units': 'rem'), );
Map storage serves a larger purpose:
The Core module provides the generic (non data-specific) setup and syntax parsing:
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: