Jump To:

  1. Variables
    1. $config
    2. $sizes
  2. Mixins
    1. set()
    2. word-break()
    3. set-sizes()
    4. font-size-responsive()
    5. size()
  3. Functions
    1. get()
    2. scale()
    3. scale-line-height()
    4. rem()
    5. em()
    6. new-size()
    7. get-default-sizes()
    8. get-size()
    9. has-size()
    10. unitless-line-height()
    11. get-size-converted-value()
    12. get-size-value()

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,
);
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

$sizes

Variable Type: Map

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

set()

Mixin

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

word-break()

Mixin

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)

set-sizes()

Mixin

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

font-size-responsive()

Mixin

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

size()

Mixin

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

Function

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

scale()

Function

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

  • 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): 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

  • 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): 99-101
  • Lines (code): 103-109

Parameters

Name Type Description
$pixels Number Pixel value to convert from

Returns

Type Description
Number Rem value

Require

em()

Function

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

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

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): 158-161
  • Lines (code): 163-179

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): 217-219
  • Lines (code): 221-223

Parameters

Name Type Description
$name String Name of size

Returns

Type
Map

Require

has-size()

Function

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

Type
Boolean

Require

unitless-line-height()

Function

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

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): 253-255
  • Lines (code): 257-283

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): 285-288
  • Lines (code): 290-297

Parameters

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

Require