Typography

Usage

Set Typography

This mixin allows you to remap toolkit typography classes.

In this example, the alpha object would compile to a class named c-type-alpha which is 15px by default and then scales upto 20px once the sm breakpoint is hit. Every other property just represent standard CSS properties.

@include set-typography((
	'alpha': (
		'font-family': $global-header-font,
		'white-space': nowrap,
		'font-size': rem(15px),
		'breakpoints': (
			'sm': rem(20px)
		)
	),
	'bravo': (
		'font-size': rem(12px),
		'text-decoration': underline,
		'breakpoints': (
			'md': rem(18px)
		)
	)
));