Documentation

Installation

  1. Install the gem with gem install typeup
  2. Require TypeUp in your config.rb file with require 'typeup'
  3. Import TypeUp in your stylesheet with @import "typeup"

Settings

$fontSize

The base font size.

$lineLength

The line length or measure. If you want to measure in characters, I suggest you divide the amount of characters you want with 1,5 and turn that into ems. For example, 45 characters -> (45/1,5) * 1em = 30em.

$xHeight

Multiplier for the final line height. Use this to fine tune the baseline.

$ratio

Ratio for Modular Scale. You can find a list of ratios here. You can also use your own ratio such as 10/9.

$headingLinesBefore

Multiplier for headings’ spacing above. The value to be multiplied is the calculated line height of the heading.

$headingLinesAfter

Multiplier for headings’ spacing below. The value to be multiplied is the calculated line height of the heading.

$headingBaselineShift

The amount of baseline shift for all headings. Will be applied using position: relative and top: -$headingBaselineShift

$h1-6LinesBefore

Multiplier for a specific heading’s spacing above. The value to be multiplied is the calculated line height of the heading.

$h1-6LinesAfter

Multiplier for a specific heading’s spacing below. The value to be multiplied is the calculated line height of the heading.

$h1-6BaselineShift

The amount of baseline shift for a specific heading. Will be applied using position: relative and top: -$headingBaselineShift

$pixelSnapBaseSize

A boolean deciding whether the $fontSize value you give TypeUp is pixel snapped.

$baseFontSize

The browser base font size that TypeUp does its calculations from. You shouldn’t have to change this.

$minimumLineHeight

The minimum line height that TypeUp sets for any element. Unless you’re working with some funky typesetting, you don’t need to change this.

$doubleStrandedHeadingClasses

If true, will clone each headings styles into a corresponding .headingN cllass using @extend. This would get you classes like .heading2, .heading3 that you can use to style text without giving it a semantic heading element type.

$startModularScaleAt

The modular scale number that is assigned to h1. Next one gets 3, next one gets 2, etc. The modular scale cuts off at 0, so with the default settings h5 and h6 get a modular scale number of 0.

Mixins

typeup-body()

@include typeup-body($fontSize, $lineLength, $xHeight);

The typeup-body mixin should be included by itself, not under any selector. If you do not supply any arguments, they will be fetched from the settings variables.

typeup-container()

@include typeup-container($fontSize, $lineLength, $xHeight);

The typeup-container mixin should be used when you want the rules to apply only inside a specific element. It should be included inside a selector. This mixin also establishes the width of the element with $lineLength.

If you do not supply any arguments, they will be fetched from the settings variables.

typeup-spacer()

@include typeup-spacer(
    $size-in-ems,

    $before: $headingLinesBefore,
    // uses default value if not supplied

    $after: $headingLinesAfter,
    // uses default value if not supplied

    $baselineShift: $headingBaselineShift,
    // optional

    $overrideSpacingWithBaseline: $overrideSpacingWithBaseline
    // uses default value if not supplied
);

The spacer mixin is used to give vertical rhythm to headings inside TypeUp, but you can use it for other things.

This is how it works:

  1. See how many baselines are needed to meet $size-in-ems, in half increments
  2. Multiply by the global line height, pixel snap it
  3. Multiply that number with before to get margin-top and after to get margin-bottom
  4. Apply baseline shift if larger than 0 em with position:relative and top
  5. If $overrideSpacingWithBaseline is true (default is false), the before and after values are multiplied by the global line height instead of the calculated one.

You could use the mixin to make simple paragraphs: @include typeup-spacer($fontSize, 0, 1, 0, false); which would apply a line-height and some margin to the bottom. Or any other element where you have a differing font size - line height will be adjusted correctly.

Public Variables

$typeup-lineHeight

When you @import "typeup", the $typeup-lineHeight variable (line height in ems) is put in the global namespace. You can use it to establish spacing for other elements. When you @include typeup-container() or @include typeup-body() the variable is overwritten with the new calculated lineHeight.