vertical-rhythm-reset

variables

vr-box-sizing

$vr-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 vr-reset mixin is called. The box-sizing method is also used in the vr mixin to calculate border offset values.

Type

String [border-box or Content-box]

Used by

Author

  • John Hildenbiddle

vr-breakpoints

$vr-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 vr-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 NameMap key DescriptionMap key TypeMap 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 or Length(px or Rem or %) 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 or Length(px or Rem or %) none
[width].modular-scale

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

Number or String none
[width].grid-color

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

Color none

Used by

See

Author

  • John Hildenbiddle

vr-helpers

$vr-helpers: (
    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 helper CSS rules and classes.

Helper rules and 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 $vr-helpers to false to prevent helper classes and rules 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 vr mixin to apply both the offset and the margins to the element instead of CSS class names. The vr mixin accounts for offset elements with margins while classes do not.

Type

Map

Map structure

Map key NameMap key DescriptionMap key TypeMap 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 preceed 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 $vr-helpers map with default settings.
  Showing first iteration only. Pattern will continue for
  each helper 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

See

  • [mixin] vr

Author

  • John Hildenbiddle

vr-font-size

$vr-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 vr-reset mixin is called.

Type

Number or Length(px or Rem or %)

Used by

Author

  • John Hildenbiddle

vr-grid-color

$vr-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 heightlights and detail panel presentation.

Type

Color

Used by

Author

  • John Hildenbiddle

vr-line-height

$vr-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 vr-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 or Length(px or Rem or %)

Used by

Author

  • John Hildenbiddle

vr-modular-scale

$vr-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 vr() mixin and the CSS values generated by the $vr-helper map. See the $vr-modular-scale-map variable for a complete list of modular scale names.

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

Type

Number or String

Used by

See

Author

  • John Hildenbiddle

vr-modular-scale-map

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

mixins

vr

@mixin vr($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 $vr-breakpoints map.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter 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 scale2
    • font-size:3 = 1rem * modular scale3
    • ...
  • 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 Numbernull
$line-height

Sets the line-height to a multiple of vertical rhythm grid rows.

Numbernull
$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 Numbernull
$width

Sets the width to a multiple of vertical rhythm grid row height.

Numbernull
$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 Numbernull
$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 Nullnull
$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 Nullnull
$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 Nullnull
$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 Nullnull
$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 Numbernull
$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 Nullnull
$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 Nullnull
$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 Nullnull
$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 Nullnull
$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 Numbernull
$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 vr mixin call, this value may also be used to adjust the element height and bottom margin for vertical rhythm grid alignment.

Length(px) or Numbernull
$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 vr mixin call, this value may also be used to adjust the element height for vertical rhythm grid alignment.

Length(px) or Numbernull

Example

SCSS

// Example of setting vertical rhythm properties
div {
  @include vr(
    $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(
    $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

Used by

Author

  • John Hildenbiddle

vr-grid

@mixin vr-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 Nameparameter Descriptionparameter Typeparameter Default value
$color

Grid line and element highlight color

Colornull
$lines

Displays vertical rhythm grid lines

Booleantrue
$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.

Booleantrue
$detail

Displays a floating panel with the active breakpoint width, font-size, line-height and modular scale. This is rendered as psuedo content (:before) on the <body> element.

Booleantrue

Example

SCSS

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

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

Author

  • John Hildenbiddle

vr-reset

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

Description

Generates the CSS reset/normalization, vertical rhythm grid and CSS helper rules and 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 $vr-font-size, $vr-line-height, $vr-modular-scale, $vr-grid-color, $vr-breakpoints and $vr-helpers variables. As a convenience, these same global variables can be set using mixin arguments.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$box-sizing

See $vr-box-sizing

String$vr-box-sizing
$font-size

See $vr-font-size

Number or Length(px or Rem or %)$vr-font-size
$line-height

See $vr-line-height

Number or Length(px or Rem or %)$vr-line-height
$modular-scale

See $vr-modular-scale

Number or String$vr-modular-scale
$grid-color

See $vr-grid-color

Color$vr-grid-color
$breakpoints

See $vr-breakpoints

Map or False$vr-breakpoints
$helpers

See $vr-helpers

Map or False$vr-helpers

Example

SCSS: Reset using global variables

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

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

SCSS: Reset using mixin arguments

// 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  : (...),
  $helpers      : (...)
);

Requires

Author

  • John Hildenbiddle