vertical-rhythm-reset

variables

box-sizing

$box-sizing: border-box !default;

Description

Default box sizing method.

A CSS rule will be generated that sets the box-sizing method of all elements to this value when the reset() mixin is called. The box-sizing method is also used in the set() mixin to calculate border offset values.

Type

String [border-box</code> or <code>Content-box]

Used by

[mixin] reset
[mixin] reset
[mixin] reset
[mixin] set
[mixin] set

Author

John Hildenbiddle

breakpoints

$breakpoints: (
    60em: ( // 960px
        font-size: 16px
    ),
    90em: ( // 1440px
        font-size: 18px
    )
) !default;

Description

A map used to generate media queries and recalculate values for responsive layouts when the reset() mixin is called.

Customization

Make a copy of the default map above as your starting point.
Remove the !default variable declaration if copying-and-pasting map.
Modify the map keys and values as needed (see Map Structure below)
Only settings that change between breakpoints need to be specified.
Breakpoint settings not specified will inherit the value from the previous breakpoint.
Set the value to false to disable responsive typography and vertical rhythm grids.

Type

Map

Map structure

Map key Name	Map key Description	Map key Type	Map key Value
`[width]`	Breakpoint min-width Media queries will be generated for each breakpoint width provided.	`Length`	— none
`[width].font-size`	Root element font-size A `:root` CSS rule will be generated for each breakpoint that sets the root element font size to the specified value.	`Number</code> or <code>Length(px</code> or <code>Rem</code> or <code>%)`	— none
`[width].line-height`	Line-height This value is used to calculate the vertical rhythm row height for each breakpoint by multiplying the font-size by the line height and converting the result to a `rem`-based value. A `*` selector CSS rule is then generated for each breakpoint that sets the default line height for all elements to this value (the equivalent of one vertical rhythm row).	`Number</code> or <code>Length(px</code> or <code>Rem</code> or <code>%)`	— none
`[width].modular-scale`	Modular type scale This value determines the modular type scale used to calculate unitless font-size values passed to the `set()` mixin and the CSS values generated by the `$utilities` map. See the `$modular-scale-map` variable for a complete list of modular scale names.	`Number</code> or <code>String`	— none
`[width].grid-color`	Vertical rhythm grid color This value is used as the base color for the vertical rhythm grid lines, element highlights, and detail panel presentation.	`Color`	— none

Used by

[mixin] reset
[mixin] reset

See

[variable] font-size
[variable] line-height
[variable] grid-color
[variable] modular-scale
[variable] modular-scale-map

Author

John Hildenbiddle

font-size

$font-size: 14px !default;

Description

Default root element font size.

A :root CSS rule will be generated that sets the root element font size to the specified value when the reset() mixin is called.

Type

Number</code> or <code>Length(px</code> or <code>Rem</code> or <code>%)

Used by

[mixin] grid
[mixin] grid
[mixin] grid
[mixin] grid
[mixin] grid
[mixin] grid
[mixin] grid
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] set
[mixin] set
[mixin] set
[mixin] set
[mixin] set

Author

John Hildenbiddle

grid-color

$grid-color: rgb(233, 30, 99) !default;

Description

Default vertical rhythm grid color.

This value is used as the base color for the vertical rhythm grid lines, element highlights, and detail panel presentation.

Type

Color

Used by

[mixin] grid
[mixin] grid
[mixin] grid
[mixin] grid
[mixin] grid
[mixin] grid
[mixin] grid
[mixin] reset
[mixin] reset

Author

John Hildenbiddle

line-height

$line-height: 1.5 !default;

Description

Default line height.

This value is used to calculate the vertical rhythm row height by multiplying the font-size by the line height and converting the result to a rem-based value. A * selector CSS rule is then generated when the reset() mixin is called that sets the default line height for all elements to this value (the equivalent of one vertical rhythm row).

Type

Number</code> or <code>Length(px</code> or <code>Rem</code> or <code>%)

Used by

[mixin] grid
[mixin] grid
[mixin] grid
[mixin] grid
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] set
[mixin] set
[mixin] set
[mixin] set
[mixin] set
[mixin] set

Author

John Hildenbiddle

modular-scale

$modular-scale: minor-third !default;

Description

Default modular type scale.

This value determines the modular type scale used to calculate unitless font-size values passed to the set() mixin and the CSS values generated by the $utilities map. See the $modular-scale-map variable for a complete list of modular scale names.

Set the value of $modular-scale to false to disable modular scale typography.

Type

Number</code> or <code>String

Used by

[mixin] grid
[mixin] grid
[mixin] grid
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] set
[mixin] set
[mixin] set
[mixin] set
[mixin] set
[mixin] set
[mixin] set

See

[variable] modular-scale-map

Author

John Hildenbiddle

modular-scale-map

$modular-scale-map: (
    minor-second    : 1.067, // Ratio = 15:16
    major-second    : 1.125, // Ratio = 8:9
    minor-third     : 1.2,   // Ratio = 5:6
    major-third     : 1.25,  // Ratio = 4:5
    perfect-fourth  : 1.333, // Ratio = 3:4
    augmented-fourth: 1.414, // Ratio = 1:√2
    perfect-fifth   : 1.5,   // Ratio = 2:3
    minor-sixth     : 1.6,   // Ratio = 5:8
    golden          : 1.618, // Ratio = 1:1.618
    major-sixth     : 1.667, // Ratio = 3:5
    minor-seventh   : 1.778, // Ratio = 9:16
    major-seventh   : 1.875, // Ratio = 8:15
    octave          : 2      // Ratio = 1:2
) !default;

Description

A map containing modular type scale names and values graciously borrowed from http://www.modularscale.com

Type

Map

Author

John Hildenbiddle

utilities

$utilities: (
    font-size: (
        count : 5,
        prefix: "vr-font-size-"
    ),
    line-height: (
        count : 10,
        prefix: "vr-line-height-"
    ),
    height: (
        count : 10,
        prefix: "vr-height-"
    ),
    width: (
        count : 10,
        prefix: "vr-width-"
    ),
    margin: (
        count : 5,
        prefix: "vr-margin-"
    ),
    margin-top: (
        count : 5,
        prefix: "vr-margin-top-"
    ),
    margin-bottom: (
        count : 5,
        prefix: "vr-margin-bottom-"
    ),
    padding: (
        count : 5,
        prefix: "vr-padding-"
    ),
    padding-top: (
        count : 5,
        prefix: "vr-padding-top-"
    ),
    padding-bottom: (
        count : 5,
        prefix: "vr-padding-bottom-"
    ),
    offset: (
        count : 5,
        prefix: "vr-offset-"
    ),
    offset-top: (
        count : 5,
        prefix: "vr-offset-top-"
    ),
    offset-bottom: (
        count : 5,
        prefix: "vr-offset-bottom-"
    )
) !default;

Description

A map used to generate vertical rhythm utility classes.

Utility classes provide a convenient way to set typography and vertical rhythm properties using CSS class names and HTML properties. This makes it easy to quickly change the font size, specify the height, or add margins and padding to HTML elements without creating new CSS/SCSS rules.

Customization

Make a copy of the default map above as your starting point.
Remove the !default variable declaration if copying-and-pasting map.
Modify the map keys and values as needed (see Map Structure below)
Set the value of $utilities to false to prevent utility classes from being auto-generated.

Known Issues

Offset classes apply a negative bottom margin to the element. When an offset class is applied to an element that already has a bottom margin defined, the negative bottom margin can override the existing margin setting. There are two solutions to this issues:
1. Wrap the offset element in another HTML tag and apply the margin to the parent element instead.
2. Use the set() mixin to apply both the offset and the margins to the element instead of CSS class names. The set() mixin accounts for offset elements with margins while classes do not.

Type

Map

Map structure

Map key Name	Map key Description	Map key Type	Map key Value
`[property]`	The vertical rhythm property to generate rules and classes for	`String`	— none
`[property].count`	The number of variations to generate	`Number`	— none
`[property].prefix`	The portion of the class name that will precede the numeric value	`String`	— none
`[property].suffix`	The portion of the class name that will proceed the numeric value	`String`	— none

Example

CSS

/*
  Example output from $utilities map with default settings.
  Showing first iteration only. Pattern will continue for
  each utility type based on the $count specified.
*/

/* Font Size */
.vr-font-size-1 {
  font-size: 1.2rem;
  line-height: 1.5rem;
}

/* Line Height */
.vr-line-height-1 {
  line-height: 1.5rem;
}

/* Height */
[height="1"],
select[multiple][size="1"],
textarea[rows="1"],
.vr-height-1 {
  height: 1.5rem;
}

/* Width */
.vr-width-1 {
  width: 1.5rem;
}

/* Margin */
.vr-margin-1 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.vr-margin-top-1 {
  margin-top: 1.5rem;
}
.vr-margin-bottom-1 {
  margin-bottom: 1.5rem;
}

/* Padding */
.vr-padding-1 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.vr-padding-top-1 {
  padding-top: 1.5rem;
}
.vr-padding-bottom-1 {
  padding-bottom: 1.5rem;
}

/* Border Offsets */
.vr-offset-1 {
  -webkit-transform: translateY(-1px);
      -ms-transform: translateY(-1px);
          transform: translateY(-1px);
  margin-bottom: -2px;
}
.vr-offset-top-1 {
  -webkit-transform: translateY(-1px);
      -ms-transform: translateY(-1px);
          transform: translateY(-1px);
  margin-bottom: -1px;
}
.vr-offset-bottom-1 {
  margin-bottom: -1px;
}

HTML

<div class="vr-font-size-1">...</div>
<div class="vr-line-height-1">...</div>
<div class="vr-height-1">...</div>
<div class="vr-width-1">...</div>
<div class="vr-margin-1">...</div>
<div class="vr-margin-top-1">...</div>
<div class="vr-margin-bottom-1">...</div>
<div class="vr-padding-1">...</div>
<div class="vr-padding-top-1">...</div>
<div class="vr-padding-bottom-1">...</div>
<div class="vr-offset-1">...</div>
<div class="vr-offset-top-1">...</div>
<div class="vr-offset-bottom-1">...</div>

Used by

[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset

See

[mixin] set

Author

John Hildenbiddle

mixins

grid

@mixin grid($color: null, $lines: true, $highlight: true, $detail: true) { ... }

Description

Renders the vertical rhythm grid lines as a background image and applies the highlight color as a semi-transparent background to all child elements.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$color`	Grid line and element highlight color	`Color`	`null`
`$lines`	Displays vertical rhythm grid lines	`Boolean`	`true`
`$highlight`	Sets the background color of all elements to a semi-transparent variation of the grid color specified to help verify alignment with the vertical rhythm grid.	`Boolean`	`true`
`$detail`	Displays a floating panel with the active breakpoint width, font-size, line-height and modular scale. This is rendered as pseudo content (`:before`) on the `<body>` element.	`Boolean`	`true`

Example

SCSS

@use "vertical-rhythm-reset" as vr;

// Call the vertical rhythm reset mixin at root
@include vr.reset();

// Call the grid mixin
body {
  @include vr.grid();
}

Requires

[variable] font-size
[variable] line-height
[variable] font-size
[variable] font-size
[variable] modular-scale
[variable] grid-color
[variable] grid-color
[variable] line-height
[variable] font-size
[variable] grid-color
[variable] grid-color
[variable] grid-color
[variable] font-size
[variable] font-size
[variable] line-height
[variable] modular-scale
[variable] grid-color
[variable] font-size
[variable] line-height
[variable] grid-color
[variable] modular-scale

Author

John Hildenbiddle

reset

@mixin reset($box-sizing: $box-sizing, $font-size: $font-size, $line-height: $line-height, $modular-scale: $modular-scale, $grid-color: $grid-color, $breakpoints: $breakpoints, $utilities: $utilities) { ... }

Description

Generates the CSS reset/normalization, vertical rhythm grid and CSS utility classes along with media queries and recalculated breakpoint / values.

This mixin is typically called at the root of your SCSS file without any arguments specified. This allows the mixin to use the default values specified with $font-size, $line-height, $modular-scale, $grid-color, $breakpoints and $utilities variables. As a convenience, these same global variables can be set using mixin arguments.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$box-sizing`	See `$box-sizing`	`String`	`$box-sizing`
`$font-size`	See `$font-size`	`Number` or `Length(px` or `Rem` or `%)`	`$font-size`
`$line-height`	See `$line-height`	`Number` or `Length(px` or `Rem` or `%)`	`$line-height`
`$modular-scale`	See `$modular-scale`	`Number` or `String`	`$modular-scale`
`$grid-color`	See `$grid-color`	`Color`	`$grid-color`
`$breakpoints`	See `$breakpoints`	`Map` or `False`	`$breakpoints`
`$utilities`	See `$utilities`	`Map` or `False`	`$utilities`

Example

SCSS: Reset using global variables

@use "vertical-rhythm-reset" as vr;

// Global variables
$box-sizing   : border-box;
$font-size    : 14px;
$line-height  : 1.5;
$modular-scale: minor-third;
$grid-color   : rgb(233, 30, 99);
$breakpoints  : (...);
$utilities      : (...);

// Call the mixin at root
@include vr.reset();

SCSS: Reset using mixin arguments

@use "vertical-rhythm-reset" as vr;

// Call the mixin at root
// Global variables will be updated with specified values
// Omitted values will default to global variables
@include vr.reset(
  $box-sizing   : border-box,
  $font-size    : 14px,
  $line-height  : 1.5,
  $modular-scale: minor-third,
  $grid-color   : rgb(233, 30, 99),
  $breakpoints  : (...),
  $utilities      : (...)
);

Requires

[mixin] set
[mixin] set
[mixin] set
[mixin] set
[mixin] set
[mixin] set
[mixin] set
[mixin] set
[mixin] set
[mixin] set
[mixin] set
[mixin] set
[mixin] set
[mixin] set
[mixin] set
[mixin] set
[mixin] set
[mixin] set
[mixin] set
[mixin] set
[mixin] set
[mixin] set
[mixin] set
[mixin] set
[mixin] set
[mixin] set
[mixin] set
[mixin] set
[variable] box-sizing
[variable] box-sizing
[variable] font-size
[variable] font-size
[variable] line-height
[variable] line-height
[variable] modular-scale
[variable] modular-scale
[variable] grid-color
[variable] grid-color
[variable] breakpoints
[variable] breakpoints
[variable] utilities
[variable] utilities
[variable] box-sizing
[variable] font-size
[variable] line-height
[variable] font-size
[variable] font-size
[variable] modular-scale
[variable] font-size
[variable] line-height
[variable] modular-scale
[variable] font-size
[variable] line-height
[variable] modular-scale
[variable] font-size
[variable] line-height
[variable] modular-scale
[variable] font-size
[variable] font-size
[variable] font-size
[variable] font-size
[variable] font-size
[variable] font-size
[variable] utilities
[variable] utilities
[variable] modular-scale
[variable] font-size
[variable] line-height
[variable] font-size
[variable] line-height
[variable] modular-scale

Author

John Hildenbiddle

set

@mixin set($font-size: null, $line-height: null, $height: null, $width: null, $margin: null, $margin-top: null, $margin-bottom: null, $margin-right: null, $margin-left: null, $padding: null, $padding-top: null, $padding-bottom: null, $padding-right: null, $padding-left: null, $offset: null, $offset-top: null, $offset-bottom: null) { ... }

Description

Generates CSS rules for vertical rhythm grid alignment and modular scale typography using base values and breakpoint settings specified in the $breakpoints map.

Parameters

parameter Name	parameter Description	parameter Type	parameter Default value
`$font-size`	Accepts both unitless and unit values: Unitless values will be converted to `rem`-based modular type scale equivalent. `font-size:0` = 1rem `font-size:1` = 1rem * modular scale `font-size:2` = 1rem * modular scale² `font-size:3` = 1rem * modular scale³ ... Unit values (`px`, `rem` or `%`) will be converted to `rem`-based values. `font-size:16px` = 1.14285rem (Example when root font-size = 14px) `font-size:0.8rem` = 0.8rem `font-size:80%` = 0.8rem The font-size will be used to determine the line-height required for vertical rhythm grid alignment.	`Length(px` or `%)` or `Number`	`null`
`$line-height`	Sets the line-height to a multiple of vertical rhythm grid rows.	`Number`	`null`
`$height`	Accepts both unitless and `px`-based unit values: Unitless values will be converted to `rem`-based height equivalent of vertical rhythm grid rows. `height:1` = vertical rhythm grid rows * 1 `height:2` = vertical rhythm grid rows * 2 `height:3` = vertical rhythm grid rows * 3 ... Pixel-based values will be applied unchanged with margin values generated to ensure fixed-height element aligns with vertical rhythm grid. `height:100px` = 100px height with top/bottom margins `height:150px` = 150px height with top/bottom margins `height:200px` = 200px height with top/bottom margins	`Length(px)` or `Number`	`null`
`$width`	Sets the width to a multiple of vertical rhythm grid row height.	`Number`	`null`
`$margin`	Shorthand margin setting. Explicit top\|bottom\|right\|left settings will override shorthand values. `margin:1` = top\|bottom\|right\|left: 1 `margin:1 2` = top\|bottom: 1, right\|left: 2 `margin:1 2 3` = top: 1, right\|left: 2, bottom: 3 `margin:1 2 3 4` = top: 1, right: 2, bottom: 3, left: 4	`List` or `Number`	`null`
`$margin-top`	Accepts both unitless and unit values: Unitless values are converted to the equivalent number of vertical rhythm grid rows Unit-based values are applied unchanged	`Length` or `Number` or `Null`	`null`
`$margin-bottom`	Accepts both unitless and unit values: Unitless values are converted to the equivalent number of vertical rhythm grid rows Unit-based values are applied unchanged	`Length` or `Number` or `Null`	`null`
`$margin-right`	Accepts both unitless and unit values: Unitless values are converted to the equivalent number of vertical rhythm grid rows Unit-based values are applied unchanged	`Length` or `Number` or `Null`	`null`
`$margin-left`	Accepts both unitless and unit values: Unitless values are converted to the equivalent number of vertical rhythm grid rows Unit-based values are applied unchanged	`Length` or `Number` or `Null`	`null`
`$padding`	Shorthand padding setting. Explicit top\|bottom\|right\|left settings will override shorthand values. `padding:1` = top\|bottom\|right\|left: 1 `padding:1 2` = top\|bottom: 1, right\|left: 2 `padding:1 2 3` = top: 1, right\|left: 2, bottom: 3 `padding:1 2 3 4` = top: 1, right: 2, bottom: 3, left: 4	`List` or `Number`	`null`
`$padding-top`	Accepts both unitless and unit values: Unitless values are converted to the equivalent number of vertical rhythm grid rows Unit-based values are applied unchanged	`Length` or `Number` or `Null`	`null`
`$padding-bottom`	Accepts both unitless and unit values: Unitless values are converted to the equivalent number of vertical rhythm grid rows Unit-based values are applied unchanged	`Length` or `Number` or `Null`	`null`
`$padding-right`	Accepts both unitless and unit values: Unitless values are converted to the equivalent number of vertical rhythm grid rows Unit-based values are applied unchanged	`Length` or `Number` or `Null`	`null`
`$padding-left`	Accepts both unitless and unit values: Unitless values are converted to the equivalent number of vertical rhythm grid rows Unit-based values are applied unchanged	`Length` or `Number` or `Null`	`null`
`$offset`	Shorthand offset setting. Explicit top\|bottom settings will override shorthand values. `offset:1` = offset-top:1, offset-bottom:1 `offset:2 3` = offset-top:2, offset-bottom:3	`List` or `Number`	`null`
`$offset-top`	Accepts both unitless and `px`-based unit values. Sets the top offset of an element in pixels using a CSS transform rule. Depending on which properties were set in the same `set()` mixin call, this value may also be used to adjust the element height and bottom margin for vertical rhythm grid alignment.	`Length(px)` or `Number`	`null`
`$offset-bottom`	Accepts both unitless and `px`-based unit values. Sets the bottom offset of an element in pixels using a negative bottom margin. Depending on which properties were set in the same `set()` mixin call, this value may also be used to adjust the element height for vertical rhythm grid alignment.	`Length(px)` or `Number`	`null`

Example

SCSS

@use "vertical-rhythm-reset" as vr;

// Example of setting vertical rhythm properties
div {
  @include vr.set(
    $font-size     : 1,
    $height        : 2,
    $margin-top    : 1,
    $margin-bottom : 1,
    $padding-top   : 1,
    $padding-bottom: 1,
    $offset-top    : 3px,
    $offset-bottom : 3px
  );

  border: 3px solid red;
}

// Equivalent example using shorthand arguments
div {
  @include vr.set(
    $font-size: 1,
    $height   : 2,
    $margin   : 1 0, // top|bottom: 1, right|left: 0
    $padding  : 1 0, // top|bottom: 1, right|left: 0
    $offset   : 3    // top|bottom: 3px
  );

  border: 3px solid red;
}

Requires

[variable] modular-scale
[variable] font-size
[variable] font-size
[variable] font-size
[variable] modular-scale
[variable] font-size
[variable] line-height
[variable] line-height
[variable] line-height
[variable] line-height
[variable] line-height
[variable] box-sizing
[variable] box-sizing
[variable] modular-scale
[variable] modular-scale
[variable] modular-scale
[variable] modular-scale
[variable] font-size
[variable] line-height
[variable] modular-scale

Used by

[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset
[mixin] reset

Author

John Hildenbiddle