gem install typeup
require 'typeup'
@import "typeup"
The base font size.
1em
em
or px
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 em
s. For example, 45 characters -> (45/1,5) * 1em = 30em
.
35em
em
or px
Multiplier for the final line height. Use this to fine tune the baseline.
1
Ratio for Modular Scale. You can find a list of ratios here. You can also use your own ratio such as 10/9
.
fifth()
Multiplier for headings’ spacing above. The value to be multiplied is the calculated line height of the heading.
1
Multiplier for headings’ spacing below. The value to be multiplied is the calculated line height of the heading.
0
The amount of baseline shift for all headings. Will be applied using position: relative
and top: -$headingBaselineShift
0em
em
Multiplier for a specific heading’s spacing above. The value to be multiplied is the calculated line height of the heading.
$headingLinesBefore
Multiplier for a specific heading’s spacing below. The value to be multiplied is the calculated line height of the heading.
$headingLinesAfter
The amount of baseline shift for a specific heading. Will be applied using position: relative
and top: -$headingBaselineShift
$headingBaselineShift
em
A boolean deciding whether the $fontSize value you give TypeUp is pixel snapped.
true
boolean
The browser base font size that TypeUp does its calculations from. You shouldn’t have to change this.
16px
px
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.
0.7
number
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.
false
boolean
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.
4
number
@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.
@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.
@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.
em
s$headingLinesBefore
value$headingLinesAfter
valueem
sThis is how it works:
$size-in-ems
, in half incrementsmargin-top
and after to get margin-bottom
position:relative
and top
$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.
When you @import "typeup"
, the $typeup-lineHeight
variable (line height in em
s) 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.