Open Source

Accoutrement-Layout

Layout utilities for Sass projects

Accoutrement-Layout provides essential layout utilities – including media-query helpers, a clearfix for floated elements, global box-sizing, positioning shortcuts, and fluid aspect ratios.

‘npm package’ ‘build status’

Organize named media-query breakpoints in a single map, or integrate with existing accoutrement-scale sizes. Position elements using a shorthand mixin, set box-sizing for any nested context, establish intrinsic ratios, use our micro-clearfix, and organize named z-index values with nesting for extra contextual control.

npm install accoutrement-layout

Accoutrement Modules

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 readability. These tools integrate with Herman, our automated pattern-library generator.

Init

Lightweight browser normalization. This is the only Accoutrement library with direct CSS output when imported.

Color

Manage your color palettes in one place, and access them from anywhere with optional accessibility guidance from the WCAG.

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.

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.

Layout

Layout utilities including named media-queries, shorthand positioning, fluid aspect-ratios, box-sizing, and float-clearing.


Start the conversation…

Interested in a chat with Miriam to find out more? Ask us anything; we’re happy to answer your questions, big or small. If your business is a good fit, we’ll offer a free in-depth project assessment!

Schedule a call with Miriam