Typography

Manages typography settings, sizes and provides typography related utilities

Variables

$config

Variable Type: Map

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,
  "space-size":               0.38em
);

File Information

File: _typography.scss
Group: typography
Type: variable
Lines (comments): 15-38
Lines (code): 40-66

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
space-size	CssUnit	0.38em	The size of a space for the site's typography (used when creating faux spaces, like for .flow-inline utility)

$sizes

Variable Type: Map

Default size presets

$sizes: get-default-sizes();

File Information

File: _typography.scss
Group: typography
Type: variable
Lines (comments): 183-192
Lines (code): 194-194

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

set()

Mixin

Change modules $config

File Information

File: _typography.scss
Group: typography
Type: mixin
Lines (comments): 68-70
Lines (code): 72-74

Parameters

Name	Type	Description
$changes	`Map`	Map of changes
@include ulu.typography-set(( "font-size" : 14px ));

Require

$config

word-break()

Mixin

Output CSS Break word strategy

File Information

File: _typography.scss
Group: typography
Type: mixin
Lines (comments): 127-128
Lines (code): 130-134

Parameters

Name	Type	Description
$force	`Boolean`	Force words to break (will have unusual breaks)

set-sizes()

Mixin

Configure the typography sizes

File Information

File: _typography.scss
Group: typography
Type: mixin
Lines (comments): 196-213
Lines (code): 215-217

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

map-merge()
$sizes

font-size-responsive()

Mixin

Print's the responsive type formula

File Information

File: _typography.scss
Group: typography
Type: mixin
Lines (comments): 301-303
Lines (code): 305-307

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

optional-size()

Mixin

Output an optional typography size

If $name is not a string (ie. null, etc) no size will be output
If the size is not defined no size will be output

File Information

File: _typography.scss
Group: typography
Type: mixin
Lines (comments): 310-314
Lines (code): 316-320

Parameters

Name	Type	Description
$name	`*`	Size name
$args...	`*`	All args are passed as-is to size() mixin

Require

size()

Mixin

Print a typography size (font-size, line-height)

File Information

File: _typography.scss
Group: typography
Type: mixin
Lines (comments): 322-325
Lines (code): 327-368

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()

Function

Get a config option

File Information

File: _typography.scss
Group: typography
Type: function
Lines (comments): 76-78
Lines (code): 80-82

Parameters

Name	Type	Description
$changes	`Map`	Map of changes
@include ulu.typography-get(( "font-size" : 14px ));

Require

require-map-get()
$config

scale()

Function

Get scale of the base font-size

File Information

File: _typography.scss
Group: typography
Type: function
Lines (comments): 84-86
Lines (code): 88-90

Parameters

Name	Type	Description
$step	`Number`	Current size in the scale you want to calculate

Returns

Type	Description
Number	Scaled value

Require

ratio-scale-size()
get()

scale-line-height()

Function

Get scale of the line-height

File Information

File: _typography.scss
Group: typography
Type: function
Lines (comments): 92-95
Lines (code): 97-99

Parameters

Name	Type	Description
$step	`Number`	Current size in the scale you want to calculate

Returns

Type	Description
Number	Scaled value

Todos

Setup breakpoints

Require

ratio-scale-size()
get()

rem()

Function

Convert pixel value to rem value based on typography $font-size

File Information

File: _typography.scss
Group: typography
Type: function
Lines (comments): 101-103
Lines (code): 105-111

Parameters

Name	Type	Description
$pixels	`Number`	Pixel value to convert from

Returns

Type	Description
Number	Rem value

Require

get()

em()

Function

Changes pixels to em

File Information

File: _typography.scss
Group: typography
Type: function
Lines (comments): 113-116
Lines (code): 118-125

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

get()

new-size()

Function

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): 136-142
Lines (code): 144-158

Parameters

Name	Type	Description
$font-size	`Number`	Font size
$line-height	`Number`	Line height
$is-headline	`Boolean`	Is a headline

Require

get()

get-default-sizes()

Function

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): 160-163
Lines (code): 165-181

Returns

Type	Description
Map	The default typography sizes

Require

get-size()

Function

Get a specific size's settings map

File Information

File: _typography.scss
Group: typography
Type: function
Lines (comments): 219-221
Lines (code): 223-225

Parameters

Name	Type	Description
$name	`String`	Name of size

Returns

Type
Map

Require

require-map-get()
$sizes

has-size()

Function

Check if a typography size exists

File Information

File: _typography.scss
Group: typography
Type: function
Lines (comments): 227-229
Lines (code): 231-233

Parameters

Name	Type	Description
$name	`String`	Name of size

Returns

Type
Boolean

Require

map-has()
$sizes

unitless-line-height()

Function

Forces conversion to unitless line-height

File Information

File: _typography.scss
Group: typography
Type: function
Lines (comments): 235-237
Lines (code): 239-253

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

strip-unit()
rem()

get-size-converted-value()

Function

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): 255-257
Lines (code): 259-285

Parameters

Name	Type	Description
$size	`Map`	Size's map
$props	`String`	The property to get

Require

get-size-value()

Function

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): 287-290
Lines (code): 292-299

Parameters

Name	Type	Description
$size	`Map`	Size's map
$props	`String`	The property to get

Require

get()

Jump To:

Typography

Variables

$config

Map Properties

$sizes

Map Properties

Mixins

set()

Parameters

Require

word-break()

Parameters

set-sizes()

Examples

Parameters

Require

font-size-responsive()

Parameters

optional-size()

Parameters

Require

size()

Parameters

Require

Functions

get()

Parameters

Require

scale()

Parameters

Returns

Require

scale-line-height()

Parameters

Returns

Todos

Require

rem()

Parameters

Returns

Require

em()

Parameters

Returns

Require

new-size()

Parameters

Require

get-default-sizes()

Returns

Require

get-size()

Parameters

Returns

Require

has-size()

Parameters

Returns

Require

unitless-line-height()

Parameters

Throw

Require

get-size-converted-value()

Parameters

Require

get-size-value()

Parameters

Require