Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jdsteinbach/typetuner
https://github.com/jdsteinbach/typetuner
Last synced: 15 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/jdsteinbach/typetuner
- Owner: jdsteinbach
- License: mit
- Created: 2015-02-22T23:59:00.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2020-10-01T06:04:59.000Z (about 4 years ago)
- Last Synced: 2024-10-04T16:53:58.028Z (about 1 month ago)
- Language: CSS
- Size: 23.4 KB
- Stars: 11
- Watchers: 3
- Forks: 3
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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. :)