To install TypeTuner, download the files in this repo and place them a folder called /typetuner/ in your Sass folder. Add @import 'typetuner/typetuner'; to your primary Sass file before you need to reference any font-sizes generated by this plugin.
To configure TypeTuner for your project, declare the following variables and maps in your Sass project before importing TypeTuner.
The list $fsizes contains a list of names for all the type sizes you'll need for your project. This can be whatever titles you like, just be sure to list them from smallest to largest.
Examples:
$fsizes: (small, medium, large, extra-large);
$fsizes: (alpha, beta, gamma);
$fsizes: (guppy, bluegill, bass, marlin, shark);
$fsizes: (small, p, h6, h5, h4, h3, h2, h1);
Default:
$fsizes: (sm, p, bq, ssh, sh, h, hero);
If you want to add a small type size (one step down from base on the scale in use), set:
$startsmall: true;
This is the default value.
This plugin currently uses three maps to store breakpoint-related data. Please don't get too attached to this: it might change to a single map of nested maps for simplicity's sake. Until further notice, however, please set the following maps
The $breakpoints map contains breakpoint names (entirely up to you) and the measurement to set a min-width media query.
Default:
$breakpoints: (
default: 20em,
medium: 37.5em,
large: 68em,
xlarge: 82em
);
If you'd like to set a different base font size per breakpoint, use the $bp-fs map to connect breakpoint names (the same ones used in $breakpoints) with font sizes.
Default:
$bp-fs: (
default: 16px,
medium: 18px,
large: 21px,
xlarge: 23px
);
Set a musical scale for type to follow at each breakpoint in $bp-scales. This map connects breakpoint names (again, from $breakpoints) to the names of musical scales found in /variables/_musical-scales.scss. As a general rule, select scales with more intervals for smaller screens: scales with fewer intervals will iterate and grow more quickly, creating larger sizes that take advantage of larger screens.
Default:
$bp-scales: (
default: $hexatonic,
medium: $pentatonic,
large: $quad,
xlarge: $major-triad
);
When TypeTuner runs its resp-sizes() mixin (which it does by default in _typetuner.scss, it will generate a series of silent placeholder selectors (%sm {}, %p {}, etc). To use these sizes in your project, @extend them in the appropriate selectors. Remember that font sizes inherit, so be careful not to over-@extend yourself. :)