Helper files for fonts and colours in Sass projects.
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';
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';
.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;
}
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;
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
)
);
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)
);
.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
}
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, etcregular
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 onfont-type
.
$fonts: (
merriweather: (
font-type: serif,
regular: 'Merriweather',
fallback: (
'Georgia',
serif
)
)
);
$font-fallbacks
map variable:
$font-fallbacks: (
serif: (
'Georgia',
serif
),
sans-serif: (
'Helvetica Neue',
Helvetica,
Arial,
sans-serif
)
);
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)
);
.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
}