Flask

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
}