Sass Type Aid
scss mixins to help with typographic rhythms etc.
Installation
bower install --save-dev https://github.com/jsit/sass-type-aid.git
Usage
Font size
When setting font sizes, use the rhythm-font-size mixin, passing a unitless parameter that will increase the font size that number of steps on the modular scale. The line-height will also be set to an amount (not smaller than $min-line-height that maintains vertical rhythm. For instance:
Input
h4 {
@include rhythm-font-size(2);
}
Output
h4 {
font-size: 23.04px;
font-size: 1.44rem;
line-height: 1.80556;
margin: 0;
}
Dependencies
Options
variables
min-line-height
$min-line-height: 1 !default;Description
Minimum line height when automatically set
Type
Number
em-base
$em-base: 16px !default;Description
Base font size in px
Type
Number
Used by
- [mixin]
rhythm-font-size - [mixin]
rhythm-font-size - [mixin]
rhythm
base-line-height
$base-line-height: 1.4 !default;Description
Base line height, unitless
Type
Number
Used by
modular-scale-ratio
$modular-scale-ratio: 1.2 !default;Description
Modular scale ratio
Type
Number
modular-scale-base
$modular-scale-base: em($em-base) !default;Description
Size on which to base modular scale sizes
Type
String
Typography
mixins
rhythm-font-size
@mixin rhythm-font-size($scale: 0, $modular-scale-ratio: 0, $modular-scale-base: 0) { ... }Description
Set font size and line height according to a modular scale.
Line height is set at the smallest line-height greater than $min-line-height.margin is reset to 0. Set with rhythm() or manually.
Parameters
| parameterName | parameterDescription | parameterType | parameterDefault value |
|---|---|---|---|
$scale | Scale | Number | 0 |
$modular-scale-ratio | Modular scale ratio | Number | 0 |
$modular-scale-base | Modular scale base | Number | 0 |
Example
Sass
h4 {
@include rhythm-font-size(2);
}Output
h4 {
font-size: 23.04px;
font-size: 1.44rem;
line-height: 1.80556;
margin: 0;
}Throws
Mixin
Requires
rhythm
@mixin rhythm($property, $steps, $offset) { ... }Description
Set property to some size value based on base line height For instance: @include rhythm(margin-bottom, 1) will add a margin-bottom
Parameters
| parameterName | parameterDescription | parameterType | parameterDefault value |
|---|---|---|---|
$property | Property to set, e.g. | String | —none |
$steps | Number of lines to use in measurement | Number | —none |
$offset | Measurement to subtract from property value (to offset, for instance, border widths) | Number | —none |
Example
Sass
.element {
@include rhythm(padding, 0 1);
@include rhythm(margin-bottom, 1);
@include rhythm(margin-top, 1, -2px);
}Output
.element {
padding: 0px 22.4px;
padding: 0rem 1.4rem;
margin-bottom: 22.4px;
margin-bottom: 1.4rem;
margin-top: calc(22.4px - 2px);
margin-top: calc(1.4rem - 2px);
}Requires
- [variable]
base-line-height - [variable]
em-base - [variable]
base-line-height - [variable]
base-line-height
Debugging
variables
show-baseline-grid
$show-baseline-grid: false !default;Description
Whether to show visible baseline grid
Type
Bool
mixins
highlight
@mixin highlight() { ... }Description
Show highlight behind text
Parameters
None.