Open Source
Sass Accoutrement
Manage design tokens & systems in Sass
OddBird’s Accoutrement tools (now merged into a single npm package) are designed around the idea that design systems should be meaningful to both humans and machines – opening the door for automation, while improving readability. These tools integrate with Herman, our automated pattern-library generator.
By storing all our design tokens and patterns in Sass maps, we can improve both organization and automation – making our design systems meaningful to both developers and the Sass language.
# npm npm install accoutrement # yarn yarn add accoutrementGet started
Accoutrement Modules
Core
Generic syntax for managing design tokens and arbitrary patterns in a format that encourages maintenance and automation.
Init
Lightweight browser normalization. This is the only Accoutrement library with direct CSS output when imported.
Plugin: Animate
Manage timing, easing, transitions and animations — with built-in shortcuts for common patterns.
Plugin: Color
Manage your color palettes in one place, and access them from anywhere with optional accessibility guidance from the WCAG.
Plugin: Layout
Layout utilities including named media-queries, shorthand positioning, fluid aspect-ratios, box-sizing, and float-clearing.
Plugin: Scale
Manage a system of consistent sizes to use across your project for typography, spacing, layout, and more. Generate sizes based on modular-scale ratios, and access sizes in any unit you need.
Plugin: Type
Manage your webfonts, import them all with a single command, and access font-stacks on-the-fly, with utilities for generated content and accessibility.
We’re here for you
Ask us anything. We want to answer your questions, and get to know you – your needs, goals, and expertise – so we can provide thoughtful advice, and help guide you to a successful launch of your web project.
Schedule a call with Miriam