fluidms
Version:
A font-size system based on Modular Scale and Fluid Typography built with Sass and CSS custom properties.
193 lines (185 loc) • 31.9 kB
HTML
<html lang="en"><head><meta charset="utf-8"><title>Fluidms - v1.0.0</title><link rel="stylesheet" href="assets/css/main.css"><link href="https://fonts.googleapis.com/css?family=Open+Sans:400,500,700" rel="stylesheet" type="text/css"><meta name="viewport" content="width=device-width"><meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible"><!-- Open Graph tags --><meta property="og:title" content="Fluidms - SassDoc"><meta property="og:type" content="website"><meta property="og:description" content="<p>A font-size system based on Modular Scale and Fluid Typography built with Sass and CSS custom properties.</p>
"><!-- Thanks to Sass-lang.com for the icons --><link href="assets/images/favicon.png" rel="shortcut icon"></head><body><aside class="sidebar" role="nav"><div class="sidebar__header"><h1 class="sidebar__title"><a href="https://github.com/csshugs/FluidMS#readme">Fluidms - v1.0.0</a></h1></div><div class="sidebar__body"><button type="button" class="btn-toggle js-btn-toggle" data-alt="Open all">Close all</button><p class="sidebar__item sidebar__item--heading" data-slug="undefined"><a href="#undefined">General</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="undefined-variable"><a href="#undefined-variable">variables</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="GLOBAL-BASELINE" data-type="variable"><a href="#undefined-variable-GLOBAL-BASELINE">GLOBAL-BASELINE</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="GLOBAL-LINE-HEIGHT" data-type="variable"><a href="#undefined-variable-GLOBAL-LINE-HEIGHT">GLOBAL-LINE-HEIGHT</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="GLOBAL-LINE-HEIGHT-RATIO" data-type="variable"><a href="#undefined-variable-GLOBAL-LINE-HEIGHT-RATIO">GLOBAL-LINE-HEIGHT-RATIO</a></li><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="CONFIG" data-type="variable"><a href="#undefined-variable-CONFIG">CONFIG</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="undefined-mixin"><a href="#undefined-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="fluidms-font-size" data-type="mixin"><a href="#undefined-mixin-fluidms-font-size">fluidms-font-size</a></li></ul><p class="sidebar__item sidebar__item--sub-heading" data-slug="undefined-function"><a href="#undefined-function">functions</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="undefined" data-name="fluidms-line-height" data-type="function"><a href="#undefined-function-fluidms-line-height">fluidms-line-height</a></li></ul></div></div></aside><article class="main" role="main"><header class="header" role="banner"><div class="container"><div class="sassdoc__searchbar searchbar"><label for="js-search-input" class="visually-hidden">Search</label><div class="searchbar__form" id="js-search"><input name="search" type="search" class="searchbar__field" autocomplete="off" autofocus id="js-search-input" placeholder="Search"><ul class="searchbar__suggestions" id="js-search-suggestions"></ul></div></div></div></header><section class="main__section"><h1 class="main__heading" id="undefined"><div class="container">General</div></h1><section class="main__sub-section" id="undefined-variable"><h2 class="main__heading--secondary"><div class="container">variables</div></h2><section class="main__item container item" id="undefined-variable-GLOBAL-BASELINE"><h3 class="item__heading"><a class="item__name" href="#variable-GLOBAL-BASELINE">GLOBAL-BASELINE</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$GLOBAL-BASELINE: 0.25rem !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Define your baseline grid. Everything sits on this vertical grid. Works best with smaller values (i.e. smaller than one third of 1rem).</p></div><h3 class="item__sub-heading">Type</h3><p><code>`rem` value or `false`</code></p><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Disable the baseline grid</p></div><pre class="example__code language-scss"><code>$GLOBAL-BASELINE: false !default;</code></pre></div><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#undefined-mixin-fluidms-font-size"><code>fluidms-font-size</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#undefined-mixin-fluidms-font-size"><code>fluidms-font-size</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#undefined-mixin-fluidms-font-size"><code>fluidms-font-size</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#undefined-mixin-fluidms-font-size"><code>fluidms-font-size</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#undefined-mixin-fluidms-font-size"><code>fluidms-font-size</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#undefined-function-fluidms-line-height"><code>fluidms-line-height</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#undefined-function-fluidms-line-height"><code>fluidms-line-height</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#undefined-function-fluidms-line-height"><code>fluidms-line-height</code></a></li></ul></section><section class="main__item container item" id="undefined-variable-GLOBAL-LINE-HEIGHT"><h3 class="item__heading"><a class="item__name" href="#variable-GLOBAL-LINE-HEIGHT">GLOBAL-LINE-HEIGHT</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$GLOBAL-LINE-HEIGHT: 1.5 !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Define your optimal line-height (unit-less). The final line-height will be calculated to sit exactly on the baseline grid and may be lower than this defined value.</p></div><h3 class="item__sub-heading">Type</h3><p><code>Number</code></p><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Sets the global line-height to <code>1.35</code></p></div><pre class="example__code language-scss"><code>$GLOBAL-LINE-HEIGHT: 1.35 !default</code></pre></div><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#undefined-mixin-fluidms-font-size"><code>fluidms-font-size</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#undefined-mixin-fluidms-font-size"><code>fluidms-font-size</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#undefined-function-fluidms-line-height"><code>fluidms-line-height</code></a></li><li><span class="item__cross-type">[function]</span> <a href="#undefined-function-fluidms-line-height"><code>fluidms-line-height</code></a></li></ul></section><section class="main__item container item" id="undefined-variable-GLOBAL-LINE-HEIGHT-RATIO"><h3 class="item__heading"><a class="item__name" href="#variable-GLOBAL-LINE-HEIGHT-RATIO">GLOBAL-LINE-HEIGHT-RATIO</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$GLOBAL-LINE-HEIGHT-RATIO: 1 !default;</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Define the ratio with which the line-height is decreased relatively for larger font-sizes. That is, the calculated line-height value is getting smaller in ralation to the font-size, the bigger the font-size gets.</p></div><h3 class="item__sub-heading">Type</h3><p><code>Number</code></p><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[function]</span> <a href="#undefined-function-fluidms-line-height"><code>fluidms-line-height</code></a></li></ul></section><section class="main__item container item" id="undefined-variable-CONFIG"><h3 class="item__heading"><a class="item__name" href="#variable-CONFIG">CONFIG</a></h3><div class="item__code-wrapper"><pre class="item__code language-scss"><code>$CONFIG: map-merge(
(
min-font-size: 15px,
max-font-size: 20px,
min-viewport: 480px,
max-viewport: 1280px,
ratio: 1.15,
scales: (
6,
5,
4,
3,
2,
1,
0,
-1,
-2,
),
),
$CONFIG
);</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Hold all the relevant settings for Fluid Typography.</p></div><h3 class="item__sub-heading">Type</h3><p><code>Map</code></p><h3 class="item__sub-heading">Map structure</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">map key </span>Name</th><th scope="col"><span class="visually-hidden">map key </span>Description</th><th scope="col"><span class="visually-hidden">map key </span>Type</th><th scope="col"><span class="visually-hidden">map key </span>Value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>min-font-size</code></th><td data-label="desc"><p>Defines the font-size at <code>min-viewport</code>.</p></td><td data-label="type"><code>Length (in `px`)</code></td><td data-label="default"><code>16px</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>max-font-size</code></th><td data-label="desc"><p>Defines the font-size at the <code>max-viewport</code>.</p></td><td data-label="type"><code>Length (in `px`)</code></td><td data-label="default"><code>24px</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>min-viewport</code></th><td data-label="desc"><p>Defines the minimum breakpoint at which the font-size does not decrease any further.</p></td><td data-label="type"><code>Length (in `px`)</code></td><td data-label="default"><code>480px</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>max-viewport</code></th><td data-label="desc"><p>Defines the maximum breakpoint at which the font-size does not increase any further.</p></td><td data-label="type"><code>Length (in `px`)</code></td><td data-label="default"><code>1280px</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>ratio</code></th><td data-label="desc"><p>Defines the <a href="https://www.modularscale.com/">Modular Scale</a> ratio.</p></td><td data-label="type"><code>Number</code></td><td data-label="default"><code>1.1</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code><breakpoint></code></th><td data-label="desc"><p>[OPTIONAL] Defines a breakpoint at which the ratio can change. You can nest the new ratio declaration inside of <code><breakpoint></code>. You can add as many breakpoints as you want.</p></td><td data-label="type"><code>Map</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>scales</code></th><td data-label="desc"><p>List all the Modular Scale entities for which you want to generate the font-sizes for.</p></td><td data-label="type"><code>List</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Sets the min font-size at <code>320px</code> viewport width to <code>18px</code>, the max font-size at <code>1420px</code> viewport width to <code>22px</code>, the Modular Scale ratio to <code>1.2</code> and creates scale entities from <code>-1</code> up to <code>4</code>.</p></div><pre class="example__code language-scss"><code>$CONFIG: (
min-font-size: 18px,
max-font-size: 22px,
min-viewport: 320px,
max-viewport: 1420px,
ratio: 1.2,
scales: (
4,
3,
2,
1,
0,
-1,
),
) !default;</code></pre></div><div class="item__example example"><div class="example__description"><p>The same config as above, but with a larger ratio from <code>720px</code> viewport width upwards.</p></div><pre class="example__code language-scss"><code>$CONFIG: (
min-font-size: 18px,
max-font-size: 22px,
min-viewport: 320px,
max-viewport: 1420px,
ratio: 1.2,
720px: (
ratio: 1.3,
),
scales: (
4,
3,
2,
1,
0,
-1,
),
) !default;</code></pre></div><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#undefined-mixin-fluidms-font-size"><code>fluidms-font-size</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#undefined-mixin-fluidms-font-size"><code>fluidms-font-size</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#undefined-mixin-fluidms-font-size"><code>fluidms-font-size</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#undefined-mixin-fluidms-font-size"><code>fluidms-font-size</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#undefined-mixin-fluidms-font-size"><code>fluidms-font-size</code></a></li></ul></section></section><section class="main__sub-section" id="undefined-mixin"><h2 class="main__heading--secondary"><div class="container">mixins</div></h2><section class="main__item container item" id="undefined-mixin-fluidms-font-size"><h3 class="item__heading"><a class="item__name" href="#mixin-fluidms-font-size">fluidms-font-size</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin fluidms-font-size($font-size: 0, $line-height: auto, $line-height-modifier: false, $important: false) {
// Enable/disable `!important` output.
@if ($important == true) {
$important: !important;
} @else if ($important == false) {
$important: null;
} @else {
@error "`$important` needs to be `true` or `false`.";
}
// Only execute when `$font-size` is a unitless number.
@if (type-of($font-size) == number and unitless($font-size)) {
// Calculate the font-size.
font-size: 1rem * (math.pow(map.get($CONFIG, ratio), $font-size)) $important;
// If multiple ratios are defined for different breakpoints.
@each $key, $value in $CONFIG {
@if (type-of($key) == number) {
@if (unit($key) == "px") {
@media screen and (min-width: $key) {
// Exclude all the scales that are smaller than the
// base font-size, so that small type will not get
// smaller on larger viewports.
@if not (str-index(#{$font-size}, "-")) {
font-size: 1rem * (math.pow(map.get($value, ratio), $font-size)) $important;
}
}
}
}
}
@if ($line-height == auto) {
@if $GLOBAL-BASELINE {
// Calculate the line-height at runtime by using the generated
// `--ms<n>-line-height` CSS custom properties.
$_line-height: fluidms-line-height($font-size, map.get($CONFIG, ratio));
// If the line-height is modified, add/subtract that from the
// calculated line-height.
@if $line-height-modifier {
$_line-height: calc((#{fluidms-line-height($font-size, map.get($CONFIG, ratio))}) + #{$line-height-modifier * $GLOBAL-BASELINE});
}
line-height: $_line-height $important;
// If multiple ratios are defined for different breakpoints.
@each $key, $value in $CONFIG {
@if (type-of($key) == number) {
@if (unit($key) == "px") {
@media screen and (min-width: $key) {
// Exclude all the scales that are smaller than the
// base font-size, so that small type will not get
// smaller on larger viewports.
@if not (str-index(#{$font-size}, "-")) {
// Calculate the line-height at runtime by using the generated
// `--ms<n>-line-height` CSS custom properties.
$_line-height: fluidms-line-height($font-size, map.get($value, ratio));
// If the line-height is modified, add/subtract that from the
// calculated line-height.
@if $line-height-modifier {
$_line-height: calc((#{fluidms-line-height($font-size, map.get($value, ratio))}) + #{$line-height-modifier * $GLOBAL-BASELINE});
}
line-height: $_line-height $important;
}
}
}
}
}
} @else {
@if $line-height-modifier {
@warn _lineHeightModifierHasNoEffect();
}
}
} @else {
line-height: _validateLineHeight($line-height) $important;
}
}
// If `$font-size` is anything but a unitless number.
@else {
// Just output the passed in font-size value.
font-size: $font-size $important;
@if ($line-height == auto) {
@if $GLOBAL-BASELINE {
// If the font-size is custom, just output the
// `$GLOBAL-LINE-HEIGHT` as `em` value, so we can use `calc`
// with it when a line-height modifier is used.
$_line-height: $GLOBAL-LINE-HEIGHT * 1em;
// If the line-height is modified, add/subtract that from the
// calculated line-height.
@if $line-height-modifier {
$_line-height: calc(#{$_line-height} + #{$line-height-modifier * $GLOBAL-BASELINE});
}
line-height: $_line-height $important;
} @else {
@if $line-height-modifier {
@warn _lineHeightModifierHasNoEffect();
}
}
} @else {
line-height: _validateLineHeight($line-height) $important;
}
}
}" data-collapsed="@mixin fluidms-font-size($font-size: 0, $line-height: auto, $line-height-modifier: false, $important: false) { ... }"><code>@mixin fluidms-font-size($font-size: 0, $line-height: auto, $line-height-modifier: false, $important: false) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Generates a font-size declaration and (optionally) an equivalent line-height.</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$font-size</code></th><td data-label="desc"><p>Determine the font-size by using a value of the modular scale.</p></td><td data-label="type"><code>Number</code> or <code>Length</code></td><td data-label="default"><code>0</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$line-height</code></th><td data-label="desc"><p>By default, the line-height will be automatically calculated, so it sits in the vertical grid. You can override that with a custom value. Allowed keywords are <code>"normal"</code>, <code>"inherit"</code>, <code>"none"</code> and <code>"false"</code>.</p></td><td data-label="type"><code>Number</code> or <code>String</code></td><td data-label="default"><code>auto</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$line-height-modifier</code></th><td data-label="desc"><p>Increase and decrease the generated line-height in increments.</p></td><td data-label="type"><code>Number</code></td><td data-label="default"><code>false</code></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$important</code></th><td data-label="desc"><p>Output the generated declarations with an <code>!important</code>.</p></td><td data-label="type"><code>Boolean</code></td><td data-label="default"><code>false</code></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Default mixin usage with Modular Scale entity value via the <code>ms()</code> function</p></div><pre class="example__code language-scss"><code>.foo {
@include fluidms-font-size(
$font-size: ms(4)
);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Assign a custom line-height</p></div><pre class="example__code language-scss"><code>.foo {
@include fluidms-font-size(
$line-height: 50px
);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>No line-height output</p></div><pre class="example__code language-scss"><code>.foo {
@include fluidms-font-size(
$line-height: false
);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Adjust the line-height in increments (integers)</p></div><pre class="example__code language-scss"><code>.foo {
@include fluidms-font-size(
$line-height-modifier: 2
);
}</code></pre></div><div class="item__example example"><div class="example__description"><p>Add <code>!important</code> to generated declarations</p></div><pre class="example__code language-scss"><code>.foo {
@include fluidms-font-size(
$important: true
);
}</code></pre></div><h3 class="item__sub-heading">Output</h3><div class="item__description"><p>The mixin outputs a <code>font-size</code> with a CSS <code>calc</code> function using CSS custom properties and an optional <code>line-height</code> declaration.</p></div><h3 class="item__sub-heading">Throws</h3><ul class="list-unstyled"><li><p><code>$important</code> needs to be <code>true</code> or <code>false</code>.</p></li></ul><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#undefined-function-fluidms-line-height"><code>fluidms-line-height</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#undefined-function-fluidms-line-height"><code>fluidms-line-height</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#undefined-function-fluidms-line-height"><code>fluidms-line-height</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[function]</span> <a href="#undefined-function-fluidms-line-height"><code>fluidms-line-height</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#undefined-variable-CONFIG"><code>CONFIG</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#undefined-variable-CONFIG"><code>CONFIG</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#undefined-variable-GLOBAL-BASELINE"><code>GLOBAL-BASELINE</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#undefined-variable-CONFIG"><code>CONFIG</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#undefined-variable-CONFIG"><code>CONFIG</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#undefined-variable-GLOBAL-BASELINE"><code>GLOBAL-BASELINE</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#undefined-variable-CONFIG"><code>CONFIG</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#undefined-variable-GLOBAL-BASELINE"><code>GLOBAL-BASELINE</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#undefined-variable-GLOBAL-BASELINE"><code>GLOBAL-BASELINE</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#undefined-variable-GLOBAL-LINE-HEIGHT"><code>GLOBAL-LINE-HEIGHT</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#undefined-variable-GLOBAL-LINE-HEIGHT"><code>GLOBAL-LINE-HEIGHT</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#undefined-variable-GLOBAL-BASELINE"><code>GLOBAL-BASELINE</code></a></li></ul></section></section><section class="main__sub-section" id="undefined-function"><h2 class="main__heading--secondary"><div class="container">functions</div></h2><section class="main__item container item" id="undefined-function-fluidms-line-height"><h3 class="item__heading"><span class="item__access">[private]</span> <a class="item__name" href="#function-fluidms-line-height">fluidms-line-height</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@function fluidms-line-height($scale, $ratio) {
$_optimal-line-height: $GLOBAL-LINE-HEIGHT;
@if $GLOBAL-BASELINE {
// Calculate the default line-height (in `rem`).
$_default-line-height: (math.pow($ratio, $scale)) * (math.div($GLOBAL-LINE-HEIGHT, math.pow($GLOBAL-LINE-HEIGHT-RATIO, $scale)));
// Get the “offset” of the vertical grid.
$_remainder: $_default-line-height;
@while ($_remainder >= fluidms-strip-unit($GLOBAL-BASELINE)) {
$_remainder: $_remainder - $GLOBAL-BASELINE;
}
// Subtract the “offset” so we stay in the exact vertical grid.
$_optimal-line-height: $_default-line-height - $_remainder;
}
@return $_optimal-line-height;
}" data-collapsed="@function fluidms-line-height($scale, $ratio) { ... }"><code>@function fluidms-line-height($scale, $ratio) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Helper function to calculate a <code>rem</code>-unit line-height based on a given Modular Scale entity, the font-size ratio and the <code>$GLOBAL-BASELINE</code>.</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$scale</code></th><td data-label="desc"><p>Choose a scale value that is defined under <code>scales</code> in <code>$CONFIG</code>.</p></td><td data-label="type"><code>Integer</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr><tr class="item__parameter"><th scope="row" data-label="name"><code>$ratio</code></th><td data-label="desc"><p>The Modular Scale ratio.</p></td><td data-label="type"><code>Number</code></td><td data-label="default">—<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Returns</h3><div class="item__description item__description--inline"><code>Length (in `rem`)</code> —<p>Outputs a <code>rem</code> value that is a multiple of our <code>$GLOBAL-BASELINE</code>.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><pre class="example__code language-scss"><code>.foo {
line-height: fluidms-line-height(3, 1.25);
}</code></pre></div><h3 class="item__sub-heading">Requires</h3><ul class="list-unstyled"><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#undefined-variable-GLOBAL-LINE-HEIGHT"><code>GLOBAL-LINE-HEIGHT</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#undefined-variable-GLOBAL-BASELINE"><code>GLOBAL-BASELINE</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#undefined-variable-GLOBAL-LINE-HEIGHT"><code>GLOBAL-LINE-HEIGHT</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#undefined-variable-GLOBAL-LINE-HEIGHT-RATIO"><code>GLOBAL-LINE-HEIGHT-RATIO</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#undefined-variable-GLOBAL-BASELINE"><code>GLOBAL-BASELINE</code></a></li><li class="item__description item__description--inline"><span class="item__cross-type">[variable]</span> <a href="#undefined-variable-GLOBAL-BASELINE"><code>GLOBAL-BASELINE</code></a></li></ul><h3 class="item__sub-heading">Used by</h3><ul class="list-unstyled"><li><span class="item__cross-type">[mixin]</span> <a href="#undefined-mixin-fluidms-font-size"><code>fluidms-font-size</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#undefined-mixin-fluidms-font-size"><code>fluidms-font-size</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#undefined-mixin-fluidms-font-size"><code>fluidms-font-size</code></a></li><li><span class="item__cross-type">[mixin]</span> <a href="#undefined-mixin-fluidms-font-size"><code>fluidms-font-size</code></a></li></ul></section></section></section><footer class="footer" role="contentinfo"><div class="container"><div class="footer__project-info project-info"><!-- Name and URL --> <a class="project-info__name" href="https://github.com/csshugs/FluidMS#readme">Fluidms</a><!-- Version --> <span class="project-info__version">- v1.0.0</span><!-- License --> <span class="project-info__license">, under MIT</span></div><a class="footer__watermark" href="http://sassdoc.com"><img src="assets/images/logo_light_inline.svg" alt="SassDoc Logo"></a></div></footer></article><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script><script src="assets/js/main.min.js"></script></body></html>