A mixin that applies typographic styles from a map
// A mixin that allows to apply typographic styles from a map | |
// Supports applying a typographic style responsively, based on a map of media queries in a $breakpoints variable | |
@mixin u-set-typography($typeface-name: 'body', $style-name: 'regular') { | |
$this-typeface: map-get($font-styles, $typeface-name); | |
$this-style: map-get($this-typeface, $style-name); | |
@if $typeface-name == 'body' { | |
font-family: $font-body; | |
} | |
@each $property, $value in $this-style { | |
$is-breakpoint: variable-exists('breakpoints') and map-has-key($breakpoints, $property) and type-of($value) == 'map'; | |
@include u-set-breakpoint(if($is-breakpoint, $property, null)) { | |
@if $is-breakpoint { | |
@each $subproperty, $subvalue in $value { | |
#{$subproperty}: $subvalue; | |
} | |
} @else { | |
#{$property}: $value; | |
} | |
} | |
} | |
} | |
@mixin u-set-breakpoint($breakpoint: null) { | |
@if ($breakpoint and variable-exists('breakpoints') and map-has-key($breakpoints, $breakpoint)) { | |
// if we use something like sass-mq we can replace this with package-specific mixin | |
@media (min-width: map-get($breakpoints, $breakpoint)) { | |
@content; | |
} | |
} @else { | |
@content; | |
} | |
} |
// A map containing the typography styles for a project | |
// 2nd level of the map (body-font) corresponds to the main typefaces. | |
// 3rd level of the map corresponds to a typography style which is a group of font properties that frequently go together. Any arbitrary word goes as a group name. The properties are usually font-size and line-height but can be also any other. | |
// 4th level of the map may be a media query name if there is a $breakpoints map variable containing min-width based media queries. | |
// Usage: @include u-set-typography($typeface, $style-name); | |
// E.g.: @include u-set-typography('body-font', 'paragraph-text'); | |
$typographic-styles: ( | |
body-font: ( // eg. Open Sans | |
paragraph-text: ( | |
font-size: 16px, | |
line-height: 1.5, | |
medium: ( | |
font-size: 18px, | |
line-height: 1.4 | |
) | |
), | |
text-banner-heading: ( | |
font-size: 42px, | |
line-height: 1.2, | |
font-weight: bold | |
), | |
), | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment