Layout helpers

Usage no npm install needed!

<script type="module">
  import accoutrementLayout from '';



Sass layout utilities by OddBird. Provides layout utilities such as media-query helpers, a float clearfix, global box-sizing, positioning shortcuts, and fluid aspect ratios.

More Accoutrement Tools

  • Init provides light-weight browser-normalization.
  • Color provides color-palette management and contrast-ratio utilities.
  • Scale helps manage scale patterns like font-sizes, margins, and gutters.
  • Type provides webfont management tools, and other typography helpers.

Quick Start

Install the package with npm or yarn

npm install accoutrement-layout
yarn add accoutrement-layout

Import the library:

@import '<path-to>/accoutrement-layout/sass/layout';

Establish your media-query breakpoints, or use sizes from Accoutrement-Scale directly:

$sizes: (
  'page': 36rem,

$breakpoints: (
  'banner-text': 24em,

Access your breakpoints with above(), below(), and between() mixins. When possible em and rem units will be converted to browser-default relative em sizes:

.banner-text {
  display: none;

  @include above('banner-text') {
    display: block;

.container {
  @include below('page') {
    padding: .5em;

We remove .09em or 1px from max-width queries, to account for media-query overlap issues.