Files

• _typography.scss
• README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/utilities/typography

Module Overview

Believe it or not the typography module is used to control your project's typography. It is where you can import web fonts (e.g. Google Fonts), set your project's typefaces, font sizes and colors.

Default Values

'typefaces': (
    'primary'    : 'Lato',
    'secondary'  : 'Raleway'
),
'colors': (
    'base'       : color('greyscale', 'grey-4'),
    'heading'    : color('greyscale', 'grey-5'),
    'heavy'      : color('greyscale', 'grey-5')
),
'sizes': (
    'base'       : 1em,
    'size-1'     : 0.67em,
    'size-2'     : 0.83em,
    'size-3'     : 1.17em,
    'size-4'     : 1.25em,
    'size-5'     : 1.5em,
    'size-6'     : 2em,
    'size-7'     : 2.4em,
    'size-8'     : 3em,
    'size-9'     : 3.4em
)

Mixins

typography($group, $key)

.foo {
    font-family: typography('typefaces', 'primary');
    color: typography('colors', 'heading');
    font-size: typography('sizes', 'size-4');
}

font-size($size, $rem: false)

.foo {
    font-size: font-size('size-4');
}
.bar {
    font-size: font-size('size-4', $rem: true);
}

Customizing

If you want to modify any of the above values, pass your new value(s) to the typography() mixin in your theme file (e.g. assets/themes/Kayzen/_kayzen.scss).

@include typography((
    'typefaces': (
        'primary'    : 'Comic Sans MS',
    ),
    'colors': (
        'heading'    : #000000
    ),
    'sizes': (
        'size-3'     : 17px,
        'size-7'     : 30px
    )
));