QuickStart: Layout

Tools for managing CSS layout:

• Organize named z-index values in a list
• Manage all breakpoints in a map, and access with media-query helpers

Import

If you’ve already imported accoutrement you are ready to go. You can also import the layout module on its own:

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

Media Queries

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:

.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.