Base-Base
Vertical rhythm on fonts is no longer (or at least a little less) painful!
base-base is a sass mix-in which stores all your base-line adjustments for fonts so you don't have to re-create them.
Base-Base Documentation generated with sassdoc
p{
// You write this
@include base-base(24px, "Open Sans", 2);
// And get this
padding-top: 0.5625rem;
margin-bottom: 1.4375rem;
margin-top: 0;
padding-bottom: 0;
font-size: 1.5rem;
line-height: 32px;
font-family: "Open Sans", Helvetica, Arial, Sans-Serif;
}
Dependances
None! (aside from Sass)
Configuration Variables
$fallback-font-stack: Helvetica, Arial, Sans-Serif !default;
$default-font-family: "Open Sans" !default;
$base-line-height: 16px !default;
$base-font-size: 16px !default;
$base-use-rem: true !default;
$base-base-unit: rem !default;
Adding new fonts
The default lines for a given font size is assigned as d where as specific adjustments for other line-heights can be added with an integer for the given base lines.
Example font-face settings (view _font-settings-16.scss for real fonts)
$lh: 16px;
$base-base-fonts-16: (
'adelle': (
12px:('d':p2b(4px,$lh)),
14px:('d':p2b(11px,$lh)),
16px:('d':p2b(11px,$lh), 1:p2b(3px,$lh)),
18px:('d':p2b(10px,$lh)),
20px:('d':p2b(9px,$lh)),
21px:('d':p2b(9px,$lh)),
22px:('d':p2b(9px,$lh)),
24px:('d':p2b(8px,$lh)),
26px:('d':p2b(7px,$lh)),
28px:('d':p2b(7px,$lh)),
30px:('d':p2b(14px,$lh)),
32px:('d':p2b(13px,$lh)),
34px:('d':p2b(13px,$lh)),
36px:('d':p2b(11px,$lh)),
38px:('d':p2b(11px,$lh)),
40px:('d':p2b(10px,$lh)),
42px:('d':p2b(9px,$lh))
)
)
Example font size with different number of lines (line heights)
$base-base-fonts-16: (
'adelle': (
// ... more sizes
16px:('d':p2b(11px,$lh), 1:p2b(3px,$lh)),
// ... more sizes
)
)
base-base
functions
px2bl (aliased as p2b )
@function px2bl($px, $lh: $base-line-height) { ... }Description
Convert pixels to baseline values
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$px | Font size | Pixels | — none |
$lh | Base line height | Pixels | $base-line-height |
Returns
Float —Number of base lines this pixel value represents
Used by
- [function]
p2b
p2b (alias for px2bl)
@function p2b() { ... }Refer to px2bl.
[private] str-replace
@function str-replace($string, $search, $replace) { ... }Description
string replace function, used within base-base
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$string | Original string | | — none |
$search | Needle to find | | — none |
$replace | Value to replace with | | — none |
Returns
String —New string with changes made
Used by
- [function]
get-base
[private] lines-for-font-size
@function lines-for-font-size($font-size: $base-font-size, $lh: $base-line-height) { ... }Description
returns baselines nessasary for this font size given a minimum padding of 2px
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$font-size | Font size to check | | $base-font-size |
$lh | Base line height | | $base-line-height |
Used by
- [mixin]
establish-baseline - [mixin]
base-base - [mixin]
base-base
[private] get-base
@function get-base($font-size: $base-font-size, $font-family: $default-font-family, $lines: lines-for-font-size($font-size), $lh: $base-line-height, $weight: 400) { ... }Description
returns leading baselines of adjustment from base-base database for the given font settings
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$font-size | Font size | | $base-font-size |
$font-family | Font family | | $default-font-family |
$lines | Number of baselines to use for line-height | | lines-for-font-size($font-size) |
$lh | Baseline height | | $base-line-height |
$weight | Font weight | | 400 |
Requires
- [function]
str-replace
Used by
- [mixin]
padding-leader - [mixin]
padding-trailer - [mixin]
margin-leader - [mixin]
margin-trailer - [function]
get-bottom-base - [mixin]
base-base
[private] get-bottom-base
@function get-bottom-base($font-size: $base-font-size, $font-family: $default-font-family, $lines: lines-for-font-size($font-size), $lh: $base-line-height, $weight: 400) { ... }Description
returns trailing baselines of adjustment from base-base database for the given font settings
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$font-size | Font size | | $base-font-size |
$font-family | Font family | | $default-font-family |
$lines | Number of baselines to use for line-height | | lines-for-font-size($font-size) |
$lh | Baseline height | | $base-line-height |
$weight | Font weight | | 400 |
Requires
- [function]
get-base
mixins
padding-leader
@mixin padding-leader($lines: 1, $font-size: $base-font-size, $adjust: false, $font-family: $default-font-family, $line-height: lines-for-font-size($font-size), $weight: $base-line-height) { ... }Description
add $lines of padding to start of this item
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$lines | Number of baselines of padding to add | | 1 |
$font-size | Font size of this item | | $base-font-size |
$adjust | Add baseline adjustments from base-base font database (useful for working with text) | | false |
$font-family | Font familty used for baseline adjustments from database (only used when adjust set to true) | | $default-font-family |
$line-height | Line height used when checking for baseline adjustments (only used when adjust set to true) | | lines-for-font-size($font-size) |
$weight | Font weight used when checking for baseline adjustments (only used when adjust set to true) | | $base-line-height |
Requires
- [function]
get-base
Used by
- [mixin]
base-base
padding-trailer
@mixin padding-trailer($lines: 1, $font-size: $base-font-size, $adjust: false, $font-family: $default-font-family, $line-height: lines-for-font-size($font-size), $weight: $base-line-height) { ... }Description
add $lines of padding to end of this item
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$lines | Number of baselines of padding to add | | 1 |
$font-size | Font size of this item | | $base-font-size |
$adjust | Add baseline adjustments from base-base font database (useful for working with text) | | false |
$font-family | Font familty used for baseline adjustments from database (only used when adjust set to true) | | $default-font-family |
$line-height | Line height used when checking for baseline adjustments (only used when adjust set to true) | | lines-for-font-size($font-size) |
$weight | Font weight used when checking for baseline adjustments (only used when adjust set to true) | | $base-line-height |
Requires
- [function]
get-base
margin-leader
@mixin margin-leader($lines: 1, $font-size: $base-font-size, $adjust: false, $font-family: $default-font-family, $line-height: lines-for-font-size($font-size), $weight: $base-line-height) { ... }Description
add $lines of margin to start of this item
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$lines | Number of baselines of margin to add | | 1 |
$font-size | Font size of this item | | $base-font-size |
$adjust | Add baseline adjustments from base-base font database (useful for working with text) | | false |
$font-family | Font familty used for baseline adjustments from database (only used when adjust set to true) | | $default-font-family |
$line-height | Line height used when checking for baseline adjustments (only used when adjust set to true) | | lines-for-font-size($font-size) |
$weight | Font weight used when checking for baseline adjustments (only used when adjust set to true) | | $base-line-height |
Requires
- [function]
get-base
margin-trailer
@mixin margin-trailer($lines: 1, $font-size: $base-font-size, $adjust: false, $font-family: $default-font-family, $line-height: lines-for-font-size($font-size), $weight: $base-line-height) { ... }Description
add $lines of margin to end of this item
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$lines | Number of baselines of margin to add | | 1 |
$font-size | Font size of this item | | $base-font-size |
$adjust | Add baseline adjustments from base-base font database (useful for working with text) | | false |
$font-family | Font familty used for baseline adjustments from database (only used when adjust set to true) | | $default-font-family |
$line-height | Line height used when checking for baseline adjustments (only used when adjust set to true) | | lines-for-font-size($font-size) |
$weight | Font weight used when checking for baseline adjustments (only used when adjust set to true) | | $base-line-height |
Requires
- [function]
get-base
Used by
- [mixin]
base-base
neutralise
@mixin neutralise($lh: $base-line-height) { ... }Description
remove vertical margin and padding, reset font sizes etc to default
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$lh | Base line height to set this item to | | $base-line-height |
establish-baseline
@mixin establish-baseline($font-size: $base-font-size, $lh: $base-line-height) { ... }Description
Establish default font size and line-height of an item
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$font-size | Base font size | | $base-font-size |
$lh | Base line height | | $base-line-height |
Requires
- [function]
lines-for-font-size
base-base
@mixin base-base($font-size: $base-font-size, $font-family: $default-font-family, $trailer: null, $leader: 0, $lines: null, $ffs: $fallback-font-stack, $lh: $base-line-height, $weight: 400) { ... }Description
returns baselines of adjustment from base-base database for the given font settings
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$font-size | Font size | | $base-font-size |
$font-family | Font family | | $default-font-family |
$trailer | Trailing baselines of whitespace | | null |
$leader | Leading baselines of whitespace | | 0 |
$lines | Number of baselines to use for line-height | | null |
$ffs | Fallback font stack | | $fallback-font-stack |
$lh | Base line height | | $base-line-height |
$weight | Font weight | | 400 |
Example
.example_text {
// all options
@include base-base(24px, 'Open Sans', 2, 0, 'Sans-Serif', 16px, 400);
// minimal call
@include base-base(24px, 'Open Sans', 2);
}Requires
- [mixin]
padding-leader - [mixin]
margin-trailer - [function]
lines-for-font-size - [function]
lines-for-font-size - [function]
get-base
debug_baseline
@mixin debug_baseline($pseudo: false, $lh: $base-line-height, $offset: 0px) { ... }Description
Set the background of an item to a debug grid
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$pseudo | Use a pseudo element instead of this item | | false |
$lh | Baseline height | | $base-line-height |
$offset | Grid offset | | 0px |
Example
.item{
@include debug_baseline(true, 16px, 0px);
// minimal call
@include debug_baseline();
}