Typography
Manages typography settings, sizes and provides typography related utilities
Variables
Module Settings
$config: (
"letter-spacing-uppercase": 0.04em,
"margin-bottom": 1em,
"margin-top": null,
"responsive-change": 0.05vw,
"scale-steps": 5,
"size-ratio": 1.8,
"size-line-height-ratio": 0.97,
"font-family": (ui-sans-serif, "Open Sans", Helvetica, Arial, sans-serif),
"font-family-monospace": (Menlo, Consolas, Monaco, monospace),
"font-family-sans": (ui-sans-serif, "Open Sans", Helvetica, Arial, sans-serif),
"font-family-serif": (Cambria, Georgia, serif),
"font-size": 16px,
"font-weight": inherit,
"font-weight-bold": bold,
"font-weight-light": 300,
"font-weight-normal": normal,
"font-weight-semibold": 600,
"line-height": 1.5,
"line-height-dense": 1.3,
"line-height-densest": 1.1,
"line-height-spaced": 1.75,
"max-width": 60em,
"max-width-large": 75em,
"max-width-small": 45em,
);
File Information
- File: _typography.scss
- Group: typography
- Type: variable
- Lines (comments): 15-37
- Lines (code): 39-64
Map Properties
Name |
Type |
Default |
Description |
letter-spacing-uppercase |
Dimension |
0.04em |
|
margin-bottom |
Number |
1em |
Default margin for typography (like paragraphs) |
margin-top |
Number |
null |
Default margin for typography (like paragraphs) |
responsive-change |
Number |
0.05vw |
Amount to scale typography by browser's width (use viewport units) |
scale-steps |
Number |
5 |
|
size-ratio |
Number |
1.8 |
Font size scale when using preset sizes, ratio mixin) |
size-line-height-ratio |
Number |
0.97 |
Default line height scaling (when using preset sizes, ratio mixin). Can shrink line-height as size increase if desirable |
font-family |
Number |
(ui-sans-serif, "Open Sans", Helvetica, Arial, sans-serif) |
Default font family |
font-family-monospace |
Number |
(Menlo, Consolas, Monaco, monospace) |
Base font-family for monospace |
font-family-sans |
CssValue |
(ui-sans-serif, "Open Sans", Helvetica, Arial, sans-serif) |
|
font-family-serif |
CssValue |
(Cambria, Georgia, serif |
|
font-size |
Number |
16px |
Default font size (use pixels, converted, is used for rem base) |
font-weight |
CssValue |
inherit |
|
font-weight-bold |
CssValue |
bold |
|
font-weight-light |
CssValue |
300 |
|
font-weight-normal |
CssValue |
normal |
|
font-weight-semibold |
CssValue |
600 |
|
line-height |
Number |
1.5 |
Default line height |
line-height-dense |
Number |
1.3 |
Default dense line height |
line-height-densest |
Number |
1.1 |
|
line-height-spaced |
Number |
1.75 |
|
Default size presets
$sizes: get-default-sizes();
File Information
- File: _typography.scss
- Group: typography
- Type: variable
- Lines (comments): 181-190
- Lines (code): 192-192
Map Properties
Name |
Type |
Description |
$size.name |
Number |
Name of size |
$size.name.font-size |
Number |
Font size in rems or pixels |
$size.name.line-height |
Number |
Line height (unitless) |
$size.name.responsive |
Number |
Apply responsive sizes |
$size.name.breakpoints |
Number |
Map of breakpoints where each key is breakpoint with map of changes (ie. font-size, etc) |
$size.name.breakpoints.breakpoint.direction |
Number |
Direction the breakpoint should be applied to (ie. min/max) |
$size.name.base-class |
Boolean |
This style should be included in the base (top can be overridden) |
$size.name.helper-class |
Boolean |
This style should be included in the helpers (overrides) |
Mixins
Change modules $config
File Information
- File: _typography.scss
- Group: typography
- Type: mixin
- Lines (comments): 66-68
- Lines (code): 70-72
Parameters
Name |
Type |
Description |
$changes |
Map |
Map of changes |
@include ulu.typography-set(( "font-size" : 14px )); |
|
|
Require
Output CSS Break word strategy
File Information
- File: _typography.scss
- Group: typography
- Type: mixin
- Lines (comments): 125-126
- Lines (code): 128-132
Parameters
Name |
Type |
Description |
$force |
Boolean |
Force words to break (will have unusual breaks) |
Configure the typography sizes
File Information
- File: _typography.scss
- Group: typography
- Type: mixin
- Lines (comments): 194-211
- Lines (code): 213-215
Examples
Adjusting the h1 and h2 sizes while keeping pre-existing sizes by using deep merge
@include ulu.typography-set-sizes((
"h1" : (
"color" : "accent",
"font-size": 50px,
"margin-top" : null,
"margin-bottom" : 0.5em
),
"h2" : (
"font-size": 38px,
"color" : blue,
"margin-top" : 2.5em,
"margin-bottom" : 1em,
),
), "deep");
Parameters
Name |
Type |
Description |
Default |
$changes |
Map |
A map to merge into the color palette |
|
$merge-mode |
Map |
Merge strategy see, utils.map-merge options |
null |
Require
Print's the responsive type formula
File Information
- File: _typography.scss
- Group: typography
- Type: mixin
- Lines (comments): 299-301
- Lines (code): 303-305
Parameters
Name |
Type |
Description |
$font-size |
String |
Name to retrieve from sizes map or a unique size map that follows the API |
$changes |
Map |
Modifications to be merged into size before using |
Print a typography size (font-size, line-height)
File Information
- File: _typography.scss
- Group: typography
- Type: mixin
- Lines (comments): 307-310
- Lines (code): 312-353
Parameters
Name |
Type |
Description |
$nameOrMap |
String |
Name to retrieve from sizes map or a unique size map that follows the API |
$changes |
Map |
Modifications to be merged into size before output |
$only-font-size |
Boolean |
Only output the font size |
Require
Functions
Get a config option
File Information
- File: _typography.scss
- Group: typography
- Type: function
- Lines (comments): 74-76
- Lines (code): 78-80
Parameters
Name |
Type |
Description |
$changes |
Map |
Map of changes |
@include ulu.typography-get(( "font-size" : 14px )); |
|
|
Require
Get scale of the base font-size
File Information
- File: _typography.scss
- Group: typography
- Type: function
- Lines (comments): 82-84
- Lines (code): 86-88
Parameters
Name |
Type |
Description |
$step |
Number |
Current size in the scale you want to calculate |
Returns
Type |
Description |
Number |
Scaled value |
Require
Get scale of the line-height
File Information
- File: _typography.scss
- Group: typography
- Type: function
- Lines (comments): 90-93
- Lines (code): 95-97
Parameters
Name |
Type |
Description |
$step |
Number |
Current size in the scale you want to calculate |
Returns
Type |
Description |
Number |
Scaled value |
Todos
Require
Convert pixel value to rem value based on typography $font-size
File Information
- File: _typography.scss
- Group: typography
- Type: function
- Lines (comments): 99-101
- Lines (code): 103-109
Parameters
Name |
Type |
Description |
$pixels |
Number |
Pixel value to convert from |
Returns
Type |
Description |
Number |
Rem value |
Require
Changes pixels to em
File Information
- File: _typography.scss
- Group: typography
- Type: function
- Lines (comments): 111-114
- Lines (code): 116-123
Parameters
Name |
Type |
Description |
$value |
Number |
Pixel value to convert from |
$base |
Number |
Conversion base (defaults to font-size) |
Returns
Type |
Description |
Number |
Rem value |
Require
Creates a size map
- This is just an accelerator for creating a size map
- This is opinionated about how sizes are setup, headlines get (margins, bold, headline color) and are base classes while non-headlines are added as helper classes and do not get (margins, bold, color)
- You can pass your own size maps using set-sizes()
File Information
- File: _typography.scss
- Group: typography
- Type: function
- Lines (comments): 134-140
- Lines (code): 142-156
Parameters
Name |
Type |
Description |
$font-size |
Number |
Font size |
$line-height |
Number |
Line height |
$is-headline |
Boolean |
Is a headline |
Require
Function that returns default sizes
- Used to set the sizes initially and
- You can use this if you've reconfigured typography settings and want to update the default sizes with the new settings
File Information
- File: _typography.scss
- Group: typography
- Type: function
- Lines (comments): 158-161
- Lines (code): 163-179
Returns
Type |
Description |
Map |
The default typography sizes |
Require
Get a specific size's settings map
File Information
- File: _typography.scss
- Group: typography
- Type: function
- Lines (comments): 217-219
- Lines (code): 221-223
Parameters
Name |
Type |
Description |
$name |
String |
Name of size |
Returns
Require
Check if a typography size exists
File Information
- File: _typography.scss
- Group: typography
- Type: function
- Lines (comments): 225-227
- Lines (code): 229-231
Parameters
Name |
Type |
Description |
$name |
String |
Name of size |
Returns
Require
Forces conversion to unitless line-height
File Information
- File: _typography.scss
- Group: typography
- Type: function
- Lines (comments): 233-235
- Lines (code): 237-251
Parameters
Name |
Type |
Description |
$line-height |
Number |
Line height size in px, em, or rem |
$font-size |
Number |
Font size in px, em, or rem |
Throw
- ULU: Unable to convert to unitless line-height for: #{ $line-height }
Require
Print a value from the size and convert it (to appropriate unit for framework)
File Information
- File: _typography.scss
- Group: typography
- Type: function
- Lines (comments): 253-255
- Lines (code): 257-283
Parameters
Name |
Type |
Description |
$size |
Map |
Size's map |
$props |
String |
The property to get |
Require
Get a sizes property value that doesn't need conversion
- Reason: Will map to default if user set's size prop to true
File Information
- File: _typography.scss
- Group: typography
- Type: function
- Lines (comments): 285-288
- Lines (code): 290-297
Parameters
Name |
Type |
Description |
$size |
Map |
Size's map |
$props |
String |
The property to get |
Require