Output o-typography features.
all o-typography css classes.
@include oTypography();a granular selection of o-typography css classes. See the README for a full list of options.
@include oTypography((
'body': true,
'headings': (1, 2, 3),
'lists': ('unordered'),
));Helper for whitelabel brand variable customisation.
@include oTypographyCustomize((
'heading-level-one': (
'scale': 5,
'scale-s': 7,
'weight': 'semibold'
),
'heading-level-two': (
'scale': 6
),
'heading-level-three': (
'scale': 5
),
'heading-level-four': (
'scale': 4
),
'heading-level-five': (
'scale': 3
),
'heading-level-six': (
'scale': 2
)
));Returns a single list on the scale
Returns a maximum line width based on the given scale
Get font family for o-typography type i.e "sans", "serif", or "display".
Note: we do not recommend setting font-family this way. Instead use
mixins oTypographySans, oTypographySerif, oTypographyDisplay without
any arguments.
Outputs typography styles for the Serif font. Including: family, size, line-height, weight, style, and font sizes for progressive font loading.
a font-family property only for the serif font.
@include oTypographySerif();font-family, font-size, and line-height for the serif font.
@include oTypographySerif($scale: 1);font-family, font-size, and line-height for the serif font. Set a custom line-height of 1.6.
@include oTypographySerif($scale: 1, $line-height: 1.6);font-family, font-size, line-height, and font-weight for the serif font.
@include oTypographySerif($scale: 1, $weight: 'bold');font-family, font-size, line-height, and font-style for the serif font.
@include oTypographySerif($scale: 1, $style: 'italic');serif font properties without font-family.
@include oTypographySerif($scale: 1, $style: 'italic', $include-font-family: false);serif font properties without sizes for the fallback font (without progressive font loading).
@include oTypographySerif($scale: 1, $style: 'italic', $include-progressive: false);Outputs typography styles for the Display font. Including: family, size, line-height, weight, style, and font sizes for progressive font loading.
a font-family property only for the display font.
@include oTypographyDisplay();font-family, font-size, and line-height for the display font.
@include oTypographyDisplay($scale: 1);font-family, font-size, and line-height for the display font. Set a custom line-height of 1.6.
@include oTypographyDisplay($scale: 1, $line-height: 1.6);font-family, font-size, line-height, and font-weight for the display font.
@include oTypographyDisplay($scale: 1, $weight: 'bold');font-family, font-size, line-height, and font-style for the display font.
@include oTypographyDisplay($scale: 1, $style: 'italic');display font properties without font-family.
@include oTypographyDisplay($scale: 1, $style: 'italic', $include-font-family: false);display font properties without sizes for the fallback font (without progressive font loading).
@include oTypographyDisplay($scale: 1, $style: 'italic', $include-progressive: false);Outputs typography styles for the Sans font. Including: family, size, line-height, weight, style, and font sizes for progressive font loading.
a font-family property only for the sans font.
@include oTypographySans();font-family, font-size, and line-height for the sans font.
@include oTypographySans($scale: 1);font-family, font-size, and line-height for the sans font. Set a custom line-height of 1.6.
@include oTypographySans($scale: 1, $line-height: 1.6);font-family, font-size, line-height, and font-weight for the sans font.
@include oTypographySans($scale: 1, $weight: 'bold');font-family, font-size, line-height, and font-style for the sans font.
@include oTypographySans($scale: 1, $style: 'italic');sans font properties without font-family.
@include oTypographySans($scale: 1, $style: 'italic', $include-font-family: false);sans font properties without sizes for the fallback font (without progressive font loading).
@include oTypographySans($scale: 1, $style: 'italic', $include-progressive: false);Set a custom font.
example shows setting a custom font "MySansFont" as the "sans" font.
@include oTypographySetFont($type: 'sans', $family: 'MySansFont, sans');Define the typographic scale for a given font. The font may be an existing or custom font.
example shows defining a custom font scale for a custom font "MySansFont". At scale "0" the font size will be 16px, and the line-height 20px.
@include oTypographyDefineFontScale($family: 'MySansFont, sans', (
-2: (12, 16),
-1: (14, 18),
0: (16, 20),
1: (18, 24),
2: (20, 26),
3: (24, 32),
4: (28, 36),
5: (32, 42),
6: (40, 52),
7: (48, 62),
8: (56, 72),
9: (72, 94),
10: (84, 110)
));When silent mode is active, css classes will not be output
Use relative units (rem) or not (px) when outputting typographic styles.
When true, the user will be able to modify their font size using browser
settings.
For legacy reasons, this defaults to false (outputs px units).
Components and projects may need to be updated to support relative units.
When true, webfonts will be downloaded
The error message to throw if o-typography is used to apply a font face which has not been included by the project. By default no error is thrown.
When true, progressive font fallbacks are output.
Unitless size representing the baseline grid
Output styles for page headings.
heading level 1 styles.
h1 {
@include oTypographyHeading($level: 1);
}heading level 5 styles.
h5 {
@include oTypographyHeading($level: 5);
}Output link styles.
the styles for a standard link.
.my-link {
@include oTypographyLink();
}a custom, claret coloured link to go on the default background colour (paper for the core brand, white otherwise).
.my-claret-link {
@include oTypographyLink($theme: (
'base': 'claret',
'hover': 'claret-30',
));
}a custom, lemon coloured link to go on a slate background.
.my-inverse-link {
@include oTypographyLink($theme: (
'base': 'lemon',
'hover': 'lemon-30',
'context': 'slate',
));
}Output styles for lists.
Styles child li elements. Apply to a
containing list element such as ul or ol.
Does not output font styles, these are
inherited (@see oTypographyBody).
the styles for an unordered list.
.my-unordered-list {
@include oTypographyList('unordered');
}the styles for an ordered and unordered list, sharing base list styles.
.my-list {
@include oTypographyList();
}
.my-list--ordered {
@include oTypographyList('ordered', $include-base-styles: false);
}
.my-list--unordered {
@include oTypographyList('unordered', $include-base-styles: false);
}Styles for photo or video credit/caption
Output o-typography features.
all o-typography css classes.
@include oTypography();a granular selection of o-typography css classes. See the README for a full list of options.
@include oTypography((
'body': true,
'headings': (1, 2, 3),
'lists': ('unordered'),
));