Typomatic — a Sass & Compass based typographic kit
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.
A prefix for type placeholders generated by the generator loop function.
Sass Map with the type scale. Use it to modify the scale to match your project.
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):
Media query usage (will use the @include directive):
@include type-scale(small, false);
The scale argument takes a value from the list of sizes (small, base, medium...) defined in the $type-scale map.
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.
The map argument takes a map defined in the $type-scale map, usefull if you have two different typefaces with different styles.
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!