A Sass&Compass based typographic kit
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets
.gitignore
Gemfile
Gemfile.lock
LICENSE
README.md
config.rb
index.html

README.md

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.

Demo

A demo is included in the project, clone it and open index.html file in your favourite browser.

Config

The _config.scss consists of basic Compass Vertical Rhythm, font family and Typomatic core settings.

Typomatic 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.

Mixins

type-scale

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

type-scale parameters:

$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.

type-weight

Parameters:

$weight

The type-weight mixin takes one parameter — the font weight as declared in the Sass map $type-weight.

Follow up

I would love to hear your comments!

Follow me on Twitter

Follow me on Medium