flask

    0.2.10 • Public • Published

    Flask

    Build Status

    Helper files for fonts and colours in Sass projects.

    Installation

    Install from your preferred package manager:

    • NPM: npm install flask
    • Bower: bower install flask

    Import to your stylesheets:

    // Installed with NPM 
    @import '../node_modules/flask/sass/flask';
     
    // Installed with Bower 
    @import '../bower_components/flask/sass/flask';

    Importing specific features

    If you would like to use one or more features without importing everything, simply import the Flask core followed by the features you need.

    // Import Flask Core. 
    @import '../node_modules/flask/sass/flask/core/core';
     
    // Import Flask Palette feature. 
    @import '../node_modules/flask/sass/flask/palette/palette';

    Palette

    Usage

    .teal-base  {
      color: palette(teal);
      // color: #2ed399; 
    }
     
    .teal-light {
      color: palette(teal, light);
      // color: #43d7a3; 
    }
     
    .teal-alias {
      color: palette(brand-primary);
      // color: #2ed399; 
    }
     
    .teal-alias-with-variant {
      color: palette(brand-primary, light);
      // color: #43d7a3; 
    }
     
    .teal-aliased-variant {
      color: palette(highlight);
      // color: #43d7a3; 
    }

    Setup

    Example

    Begin by defining base colours. You can simply define these inside the palette map instead, but separate base variables make it easier to programmatically define variants.

    $flask-color-teal-base: #2ed399;

    $palettes

    Next create the palette map. This variable will contain all colours and their variants. A colour group is defined by a nested map within the main palette map. The colour group key and any variant keys can be anything you like. However, every colour group needs one colour with the base key. Variants are optional.

    $palettes: (
      teal: (                                      // Colour group key
        base: $flask-color-teal-base,              // Base colour
        dark: darken($flask-color-teal-base, 10),  // Dark Variant
        light: lighten($flask-color-teal-base, 10) // Light Variant
      )
    );

    $palette-aliases

    Optionally, a $palette-aliases map can assign aliases to colour groups. Aliases can be used in place of colour group keys as the first argument to palette(). Additionally, aliases for specific colours may be defined by assigning a map of palette function arguments to the alias key.

    $palette-aliases: (
      brand-primary: teal,
      highlight: (teal, light)
    );

    Fonts

    Usage

    .font-family-function {
      font-family: font-family(open-sans);
      // font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    }
     
    .font-family-mixin {
      @include font-family(open-sans);
      // font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    }
     
    .font-name {
      font-family: font-name(open-sans);
      // font-family: "Open Sans"; 
    }
     
    .font-name-aliased {
      font-family: font-name(primary-sans-serif);
      // font-family: "Open Sans"; 
    }
     
    .font-name-aliased-with-variant {
      font-family: font-name(primary-sans-serif, special);
      // font-family: "Open Sans Special"; 
    }
     
    .font-name-aliased-variant {
      content: font-name(heading);
      // content: "Open Sans Special"; 
    }
     
    .font-type {
      content: font-type(open-sans);
      // content: sans-serif 
    }
     
    .font-fallback {
      content: font-fallback(open-sans);
      // content: "Helvetica Neue", Helvetica, Arial, sans-serif 
    }

    Setup

    Example

    $fonts

    The fonts map contains all font names, variants, and fallbacks (if applicable). Each font should have its own group. For example, if you are using 'Merriweather', you may define a font group under the key merriweather.

    For each font group, required keys are:

    • font-type The font family's type. ie: serif, sans-serif, glyph, etc
    • regular The name of the basic version of the font.

    Optional keys:

    • fallback A map of fallback fonts for this font family. If set, will override the fallback used from $font-fallbacks which is based on font-type.
    $fonts: (
      merriweather: (
        font-type:    serif,
        regular:      'Merriweather',
        fallback: (
          'Georgia',
          serif
        )
      )
    );

    $font-fallbacks

    $font-fallbacks map variable:

    $font-fallbacks: (
      serif: (
        'Georgia',
        serif
      ),
      sans-serif: (
        'Helvetica Neue',
        Helvetica,
        Arial,
        sans-serif
      )
    );

    $font-aliases

    Optionally, a $font-aliases map can assign aliases to fonts. Aliases can be used in place of font group keys in font functions. Additionally, aliases for specific font variants may be defined by assigning a map of font-name function arguments to the alias key.

    $font-aliases: (
      primary-serif: merriweather,
      primary-sans-serif: open-sans,
      heading: (open-sans, special)
    );

    Additional Functions

    .font-name {
      content: font-name(open-sans);
      // content: "Open Sans" 
    }
     
    .font-type {
      content: font-type(merriweather);
      // content: serif 
    }
     
    .font-fallback {
      content: font-fallback(merriweather);
      // content: "Georgia", serif 
    }

    Install

    npm i flask

    DownloadsWeekly Downloads

    230

    Version

    0.2.10

    License

    MIT

    Last publish

    Collaborators

    • jaradlight