Accoutrement-Layout

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.