Typomatic is an all-purpose, pre-cooked Sass typographic kit for your daily needs fueled by Compass and Sass Maps.
A demo is included in the project, clone it and open index.html file in your favourite browser.
The _config.scss consists of basic Compass Vertical Rhythm, font family and Typomatic core settings.
$type-prefix
A prefix for type placeholders generated by the generator loop function.
$type-scale
Sass Map with the type scale. Use it to modify the scale to match your project.
$type-weight
Sass Map with the type weights. Use it to modify the weights to match your project.
The type-scale mixin takes three parameters - $scale, $extend and $map. Scale is a value from the $type-scale map (eg. tiny, small, base etc). The $extend is a boolean true by default, use false when using the mixin in a media query (since @extend directive does not work in media queries). The $map parameter is the name of the type-scale variable map.
@include type-scale($scale, $extend: true, $map: $type-scale);
Basic usage example (will use the @extend directive):
@include type-scale(small);
Media query usage (will use the @include directive):
@include type-scale(small, false);
$scale
The scale argument takes a value from the list of sizes (small, base, medium...) defined in the $type-scale map.
$extend
The extend argument is a boolean. Default is true, when set to false the mixin outputs the css with the @include instead of @extend for use inside media queries.
$map
The map argument takes a map defined in the $type-scale map, usefull if you have two different typefaces with different styles.
Parameters:
$weight
The type-weight mixin takes one parameter — the font weight as declared in the Sass map $type-weight.
I would love to hear your comments!