Naphthalene Possum Management

    accoutrement-layout

    3.0.3 • Public • Published

    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.

    Install

    npm i accoutrement-layout

    DownloadsWeekly Downloads

    76

    Version

    3.0.3

    License

    MIT

    Last publish

    Collaborators

    • jgerigmeyer
    • mirisuzanne