Comment on page
Typography
CivicTheme UI kit provides a system for easily consuming and extending typography mixins and variables.
The default font-families are defined in a map
$ct-fonts-default
:$ct-fonts-default: (
'primary': (
'family': '"Lexend", sans-serif',
'types': (
(
'uri': 'https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&display=swap',
),
),
),
// ...
);
This map can be extended using
$ct-fonts
map (fonts can be stored with the library or linked to a remote location):$ct-fonts: (
'tertiary': (
'family': 'Roboto, sans-serif',
'types': (
(
'uri': (
'#{$ct-assets-directory}fonts/Roboto/Roboto-Regular.ttf',
'#{$ct-assets-directory}fonts/Roboto/Roboto-Regular.woff',
'#{$ct-assets-directory}fonts/Roboto/Roboto-Regular.eot',
),
),
(
'italic': true,
'uri': (
'#{$ct-assets-directory}fonts/Roboto/Roboto-Italic.ttf',
'#{$ct-assets-directory}fonts/Roboto/Roboto-Italic.woff',
'#{$ct-assets-directory}fonts/Roboto/Roboto-Italic.eot',
),
),
(
'weight': 'bold',
'uri': (
'#{$ct-assets-directory}fonts/Roboto/Roboto-Bold.ttf',
'#{$ct-assets-directory}fonts/Roboto/Roboto-Bold.woff',
'#{$ct-assets-directory}fonts/Roboto/Roboto-Bold.eot',
),
),
(
'italic': true,
'weight': 'bold',
'uri': (
'#{$ct-assets-directory}fonts/Roboto/Roboto-BoldItalic.ttf',
'#{$ct-assets-directory}fonts/Roboto/Roboto-BoldItalic.woff',
'#{$ct-assets-directory}fonts/Roboto/Roboto-BoldItalic.eot',
),
),
(
'weight': 300,
'uri': (
'#{$ct-assets-directory}fonts/Roboto/Roboto-Thin.ttf',
'#{$ct-assets-directory}fonts/Roboto/Roboto-Thin.woff',
'#{$ct-assets-directory}fonts/Roboto/Roboto-Thin.eot',
),
),
(
'weight': 700,
'uri': (
'#{$ct-assets-directory}fonts/Roboto/Roboto-Black.ttf',
'#{$ct-assets-directory}fonts/Roboto/Roboto-Black.woff',
'#{$ct-assets-directory}fonts/Roboto/Roboto-Black.eot',
),
),
),
),
// ...
);
The default typography is set in a map
$ct-typography-default
:$ct-typography-default: (
// Headings.
'heading-1': (
'xxs': ($ct-font-base-size * 2, $ct-font-base-line-height * 2.5, 700, 'primary', -0.6px),
'm': ($ct-font-base-size * 3, $ct-font-base-line-height * 3.75, 700, 'primary', -1px)
),
// ...
);
This can be extended using
$ct-typography
map:$ct-typography: (
'body-extra-large': (
'xxs': ($ct-font-base-size * 2, $ct-font-base-line-height * 2.5, 700, 'primary', -0.6px),
'm': ($ct-font-base-size * 3, $ct-font-base-line-height * 3.75, 700, 'primary', -1px)
),
);
Typography can be set for elements using the
ct-typography()
mixin with a pre-defined mapping:h1 {
@include ct-typography('heading-l');
}
Last modified 8mo ago