accoutrement-layout

Accoutrement-Layout

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

Quick Start

npm install accoutrement-layout

Import the library:

@import 'path/to/accoutrement-layout/sass/layout'

Establish your media-query breakpoints, or use sizes from [Accoutrement-Scale][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;
  }
}