Node Package Manager

    accoutrement-type

    4.0.2 • Public • Published

    Accoutrement-Type

    Sass typography and webfont helpers by OddBird. Gather all your fonts into a single map, access them by name, and easily import the webfonts. Also includes helpers for accessibility and pseudo-elements.

    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.
    • Layout provides layout utilities such as box-sizing, intrinsic ratios, z-index management, named media-queries, and a clearfix.

    Quick Start

    Install the package with npm or yarn:

    npm install accoutrement-type
    yarn add accoutrement-type

    Import the library:

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

    Configure your font settings:

    // Define what webfont formats need importing 
    $font-formats: 'woff' 'ttf';
     
    // Set the a path to your fonts directory 
    $font-path: '../fonts/';
     
    $fonts: (
      // describe locally-hosted font files for import and access
      'heading': (
        'name''maven',
        'stack': ('helvetica''arial'sans-serif),
        'normal''maven/maven_pro_regular-webfont',
        'bold''maven/maven_pro_bold-webfont',
      ),
     
      // describe CDN fonts for access
      'body': (
        'name''Source Sans Pro',
        'stack': ('Helvetica Neue''Helvetica''Arial'sans-serif),
      ),
     
      // provide aliases for any font you need
      'alias''body', // create aliases when useful
    );

    Import one font at a time with font-face() or all your local webfonts with import-webfonts():

    // Import one font by configuration key, with custom formats 
    @include font-face('body', 'otf' 'svg');
     
    // Import all local fonts 
    @include import-webfonts;

    Set your font-family anywhere, using the semantic names you defined earlier:

    html {
      @include font-family('body');
    }
     
    h1h2h3 {
      @include font-family('heading');
    }

    Install

    npm i accoutrement-type

    DownloadsWeekly Downloads

    170

    Version

    4.0.2

    License

    MIT

    Last publish

    Collaborators

    • jgerigmeyer
    • mirisuzanne