Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

TypeTuner

Installation

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.

Usage

Setting Variables

To configure TypeTuner for your project, declare the following variables and maps in your Sass project before importing TypeTuner.

Type Sizes

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);

Add "Small" Size

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.

Breakpoints

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

Media Queries

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
);
Base Font Sizes

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
);
Type Scales

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
);

Extending Output

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. :)

About

No description, website, or topics provided.

Resources

License

Releases

No releases published

Languages

You can’t perform that action at this time.