General

variables

GLOBAL-BASELINE

$GLOBAL-BASELINE: 0.25rem !default;

Description

Define your baseline grid. Everything sits on this vertical grid. Works best with smaller values (i.e. smaller than one third of 1rem).

Type

`rem` value or `false`

Example

Disable the baseline grid

$GLOBAL-BASELINE: false !default;

Used by

[mixin] fluidms-font-size
[mixin] fluidms-font-size
[mixin] fluidms-font-size
[mixin] fluidms-font-size
[mixin] fluidms-font-size
[function] fluidms-line-height
[function] fluidms-line-height
[function] fluidms-line-height

GLOBAL-LINE-HEIGHT

$GLOBAL-LINE-HEIGHT: 1.5 !default;

Description

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.

Type

Number

Example

Sets the global line-height to 1.35

$GLOBAL-LINE-HEIGHT: 1.35 !default

Used by

[mixin] fluidms-font-size
[mixin] fluidms-font-size
[function] fluidms-line-height
[function] fluidms-line-height

GLOBAL-LINE-HEIGHT-RATIO

$GLOBAL-LINE-HEIGHT-RATIO: 1 !default;

Description

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.

Type

Number

Used by

[function] fluidms-line-height

CONFIG

$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
);

Description

Hold all the relevant settings for Fluid Typography.

Type

Map

Map structure

map key Name	map key Description	map key Type	map key Value
`min-font-size`	Defines the font-size at `min-viewport`.	Length (in `px`)	`16px`
`max-font-size`	Defines the font-size at the `max-viewport`.	Length (in `px`)	`24px`
`min-viewport`	Defines the minimum breakpoint at which the font-size does not decrease any further.	Length (in `px`)	`480px`
`max-viewport`	Defines the maximum breakpoint at which the font-size does not increase any further.	Length (in `px`)	`1280px`
`ratio`	Defines the Modular Scale ratio.	`Number`	`1.1`
`<breakpoint>`	[OPTIONAL] Defines a breakpoint at which the ratio can change. You can nest the new ratio declaration inside of `<breakpoint>`. You can add as many breakpoints as you want.	`Map`	— none
`scales`	List all the Modular Scale entities for which you want to generate the font-sizes for.	`List`	— none

Example

Sets the min font-size at 320px viewport width to 18px, the max font-size at 1420px viewport width to 22px, the Modular Scale ratio to 1.2 and creates scale entities from -1 up to 4.

$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;

The same config as above, but with a larger ratio from 720px viewport width upwards.

$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;

Used by

[mixin] fluidms-font-size
[mixin] fluidms-font-size
[mixin] fluidms-font-size
[mixin] fluidms-font-size
[mixin] fluidms-font-size

mixins

fluidms-font-size

@mixin fluidms-font-size($font-size: 0, $line-height: auto, $line-height-modifier: false, $important: false) { ... }

Description

Generates a font-size declaration and (optionally) an equivalent line-height.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$font-size`	Determine the font-size by using a value of the modular scale.	`Number` or `Length`	`0`
`$line-height`	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 `"normal"`, `"inherit"`, `"none"` and `"false"`.	`Number` or `String`	`auto`
`$line-height-modifier`	Increase and decrease the generated line-height in increments.	`Number`	`false`
`$important`	Output the generated declarations with an `!important`.	`Boolean`	`false`

Example

Default mixin usage with Modular Scale entity value via the ms() function

.foo {
    @include fluidms-font-size(
        $font-size: ms(4)
    );
}

Assign a custom line-height

.foo {
    @include fluidms-font-size(
        $line-height: 50px
    );
}

No line-height output

.foo {
    @include fluidms-font-size(
        $line-height: false
    );
}

Adjust the line-height in increments (integers)

.foo {
    @include fluidms-font-size(
        $line-height-modifier: 2
    );
}

Add !important to generated declarations

.foo {
    @include fluidms-font-size(
        $important: true
    );
}

Output

The mixin outputs a font-size with a CSS calc function using CSS custom properties and an optional line-height declaration.

Throws

$important needs to be true or false.

Requires

[function] fluidms-line-height
[function] fluidms-line-height
[function] fluidms-line-height
[function] fluidms-line-height
[variable] CONFIG
[variable] CONFIG
[variable] GLOBAL-BASELINE
[variable] CONFIG
[variable] CONFIG
[variable] GLOBAL-BASELINE
[variable] CONFIG
[variable] GLOBAL-BASELINE
[variable] GLOBAL-BASELINE
[variable] GLOBAL-LINE-HEIGHT
[variable] GLOBAL-LINE-HEIGHT
[variable] GLOBAL-BASELINE

functions

[private] fluidms-line-height

@function fluidms-line-height($scale, $ratio) { ... }

Description

Helper function to calculate a rem-unit line-height based on a given Modular Scale entity, the font-size ratio and the $GLOBAL-BASELINE.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$scale`	Choose a scale value that is defined under `scales` in `$CONFIG`.	`Integer`	— none
`$ratio`	The Modular Scale ratio.	`Number`	— none

Returns

Length (in `rem`) —

Outputs a rem value that is a multiple of our $GLOBAL-BASELINE.

Example

.foo {
    line-height: fluidms-line-height(3, 1.25);
}

Requires

[variable] GLOBAL-LINE-HEIGHT
[variable] GLOBAL-BASELINE
[variable] GLOBAL-LINE-HEIGHT
[variable] GLOBAL-LINE-HEIGHT-RATIO
[variable] GLOBAL-BASELINE
[variable] GLOBAL-BASELINE

Used by

[mixin] fluidms-font-size
[mixin] fluidms-font-size
[mixin] fluidms-font-size
[mixin] fluidms-font-size