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
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. ``` scss // Import Flask Core. @import '../nodemodules/flask/sass/flask/core/core'; // Import Flask Palette feature. @import '../nodemodules/flask/sass/flask/palette/palette'; ```Palette
Usage
``` scss .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. ``` scss $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 thebase
key. Variants are optional.
``` scss
$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.
``` scss
$palette-aliases: (
brand-primary: teal,
highlight: (teal, light)
);
```
Fonts
Usage
``` scss .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 keymerriweather
.
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.
fallback
A map of fallback fonts for this font family. If set, will override the fallback used from$font-fallbacks
which is based onfont-type
.
font-type: serif,
regular: 'Merriweather',
fallback: (
'Georgia',
serif
)
)
);
```
$font-fallbacks
$font-fallbacks
map variable:
``` scss
$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.
``` scss
$font-aliases: (
primary-serif: merriweather,
primary-sans-serif: open-sans,
heading: (open-sans, special)
);
```