Returns a single list on the scale
Returns a spacing size in px based on the baseline unit and number of units passed to the function
Returns a maximum line width based on the given scale
Outputs the font size and line height based on the scale, also accepts an override line-height to output and a font adjustment parameter for when outputting styles for progressively loaded fonts
Outputs margin-top and/or margin-bottom based on multiples of the baseline unit passed to the mixin
Outputs padding-top and/or padding-bottom based on multiples of the baseline unit passed to the mixin
Outputs font-weight property for the given font type.
a sans copy bold without outputting the font family again.
.example-text {
@include oTypographySans($scale: 2);
}
.example-text--bold {
@include oTypographyBold('sans');
}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)
));Outputs the progressive font fallback styles based on font and scale if the font has fallback settings
Outputs font-family, size and line-height, and progressive font loading styles for Serif font
Outputs font-family, size and line-height, and progressive font loading styles for Display font
Outputs font-family, size and line-height, and progressive font loading styles for Sans font
Outputs font-family, bold font-weight, size and line-height, and progressive font loading styles for Display font
Outputs font-family, bold font-weight, size and line-height, and progressive font loading styles for Sans font
Outputs font-family, bold font-weight, size and line-height, and progressive font loading styles for Serif font
Outputs font-family, italic font-style, size and line-height, and progressive font loading styles for Serif font
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
Unitless size representing the baseline grid
Prefix for the class used when loading fonts
The default font scale of font-sizes and line-heights. For backward compatibility this scale is used by default when a scale is needed but the font family is not known.
Standard link styles + external link icon.
External link icon.
Styles for <ul> tags
Bullet size and spacing was suited to article font-size (18px at time of writing).
This has since been updated to use em units but maintain that ratio.
Style for <blockquote> tags including p
and footer elements