Add documentation

This commit is contained in:
Cas Roberts
2018-07-16 15:13:23 -04:00
parent a0fb8fe550
commit ea1518e261
2 changed files with 38 additions and 17 deletions

View File

@@ -1,5 +1,6 @@
/* Overpass Mono */
/* Overpass Mono helper mixins */
//-- This is a map of the current font weights, keyed on their file names
$supported-weights: (
light: 300,
regular: 400,
@@ -7,27 +8,34 @@ $supported-weights: (
bold: 600
);
//-- This simple mixin adds the overpass basic styles to a typography element
@mixin _overpass-monostyles {
font-family: 'overpass-mono';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
//-- This mixins will dynamically print the font-face declarations based on your levels of support
// * Weights can be limited to those your wish to incorporate in your styles; if left with defaults,
// this will add support for all supported font variations
// * The weight map can be customized if you wish to set your own values
// Example: To use `font-weight: bolder` instead of `font-weight: 600`, we create a custom map
// that maps the key bold to the value bolder -> `bold: bolder`
// * The path to dist represents the location of the overpass font files relative to your architecture
@mixin print-overpass-mono-font-face(
$weights: (light regular semibold bold),
$weights: map-keys($supported-weights),
$weight-map: $supported-weights,
$path_to_dist: './'
) {
@each $weight in $weights {
@each $style in $styles {
@font-face {
font-family: 'overpass-mono';
src: url("#{$path_to_dist}overpass-mono-#{$weight}.eot?");
src: url("#{$path_to_dist}overpass-mono-#{$weight}.eot?#iefix") format("embedded-opentype"),
url("#{$path_to_dist}overpass-mono-#{$weight}.woff?") format("woff"),
url("#{$path_to_dist}overpass-mono-#{$weight}.ttf?") format("truetype");
font-weight: map-get($supported-weights, $weight);
font-style: normal;
}
}
@font-face {
font-family: 'overpass-mono';
src: url("#{$path_to_dist}overpass-mono-#{$weight}.eot?");
src: url("#{$path_to_dist}overpass-mono-#{$weight}.eot?#iefix") format("embedded-opentype"),
url("#{$path_to_dist}overpass-mono-#{$weight}.woff?") format("woff"),
url("#{$path_to_dist}overpass-mono-#{$weight}.ttf?") format("truetype");
font-weight: map-get($weight-map, $weight);
font-style: normal;
}
}
}

View File

@@ -1,5 +1,6 @@
/* Overpass */
/* Overpass helper mixins */
//-- This is a map of the current font weights, keyed on their file names
$supported-weights: (
thin: 200,
extralight: 300,
@@ -11,15 +12,27 @@ $supported-weights: (
heavy: 900
);
//-- This is a list of the currently supported font styles
$supported-styles: (normal italic);
//-- This simple mixin adds the overpass basic styles to a typography element
@mixin _overpass-styles {
font-family: 'overpass';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
//-- This mixins will dynamically print the font-face declarations based on your levels of support
// * Weight and style lists can be limited to those your wish to incorporate in your styles,
// if left with defaults, it will add support for all overpass variations
// * The weight map can be customized if you wish to set your own values
// Example: To use `font-weight: bolder` instead of `font-weight: 800`, we create a custom map
// that maps the key extrabold to the value bolder -> `extrabold: bolder`
// * The path to dist represents the location of the overpass font files relative to your architecture
@mixin print-overpass-font-face(
$weights: (thin extralight light regular semibold bold extrabold heavy),
$styles: (normal italic),
$weights: map-keys($supported-weights),
$styles: $supported-styles,
$weight-map: $supported-weights,
$path_to_dist: './'
) {
@each $weight in $weights {
@@ -30,7 +43,7 @@ $supported-weights: (
src: url("#{$path_to_dist}overpass-#{$weight}#{if($style != normal, #{-$style}, "")}.eot?#iefix") format("embedded-opentype"),
url("#{$path_to_dist}overpass-#{$weight}#{if($style != normal, #{-$style}, "")}.woff?") format("woff"),
url("#{$path_to_dist}overpass-#{$weight}#{if($style != normal, #{-$style}, "")}.ttf?") format("truetype");
font-weight: map-get($supported-weights, $weight);
font-weight: map-get($weight-map, $weight);
font-style: $style;
}
}