diff --git a/Gruntfile.js b/Gruntfile.js index 9cb65298c..2d34e6d66 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -25,7 +25,6 @@ module.exports = function(grunt) { autofill: ['requires', 'throws'], exclude: [ 'vendors/*', - 'base/*' ], display: { sort: [ @@ -35,6 +34,33 @@ module.exports = function(grunt) { 'file', ], }, + groups: { + '_variables|__decanter': 'Decanter Settings', + '_variables|_bourbon': 'Bourbon Settings', + '_variables|_neat': 'Neat Settings', + '_variables|animations': 'Animation & Transition Variables', + '_variables|borders': 'Border Variables', + '_variables|breakpoint-boundaries': 'Breakpoint Variables', + '_variables|grid-media': 'Grid Media Variables', + '_variables|buttons': 'Button Variables', + '_variables|colors': 'Color Variables', + '_variables|containers': 'Container Variables', + '_variables|forms': 'Form Variables', + '_variables|typography': 'Typography Variables', + '_variables|vertical-rhythm': 'Vertical Rhythm Variables', + 'font-management': 'Font Loading & Management', + 'functions': 'Functions', + 'mixins': 'Mixins', + 'base|_documentation': 'Documentation for Base', + 'base|box-model': 'Box Model', + 'base|body': 'Body', + 'base|typography': 'Typography', + 'base|forms': 'Forms', + 'base|lists': 'Lists', + 'base|tables': 'Tables', + 'base|media-elements': 'Media Elements', + 'base|buttons': 'Buttons', + }, }, }, base: { @@ -52,7 +78,15 @@ module.exports = function(grunt) { ], }, groups: { + 'base|_documentation': 'Documentation for Base', + 'base|box-model': 'Box Model', + 'base|body': 'Body', 'base|typography': 'Typography', + 'base|forms': 'Forms', + 'base|lists': 'Lists', + 'base|tables': 'Tables', + 'base|media-elements': 'Media Elements', + 'base|buttons': 'Buttons', }, }, }, diff --git a/core/base/_body.scss b/core/base/_body.scss index 269871ebf..6d9c452e8 100644 --- a/core/base/_body.scss +++ b/core/base/_body.scss @@ -3,46 +3,117 @@ //// /// Root html element styles for the body and main elements. /// Style placement and basic settings for the top level html elements. +/// /// @group base|body +/// +/// @type map +/// +/// @see $group__element--default +/// @see $group__element //// +// --------------------------------------------------------------------------------------------------------------------- +/// - Default body element styling /// -/// Body defaults -/// +/// @example scss - Used in `base/_body.scss` by the `body` element +/// body { +/// @include properties($body__body--default, $body__body); +/// } +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body +$body__body--default: ( + min-height: 100vh, + display: flex, + flex-direction: column, + overflow-x: hidden, + margin: 0, +) !default; + +$body__body: () !default; + body { - min-height: 100vh; - display: flex; - flex-direction: column; - overflow-x: hidden; - margin: 0; + @include properties($body__body--default, $body__body); +} + +// --------------------------------------------------------------------------------------------------------------------- +/// - Set up source order for mobile first approach +/// +/// @example scss - Used in `base/_body.scss` by the `body > header` element +/// body > header { +/// @include properties($body__body-header--default, $body__body-header); +/// } +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header +$body__body-header--default: ( + order: -50 +) !default; + +$body__body-header: () !default; + +body > header { + @include properties($body__body-header--default, $body__body-header); } -/// We rely on source order for mobile-first approach -/// in this case: +// --------------------------------------------------------------------------------------------------------------------- +/// - Set up source order for mobile first approach /// -/// -50 header -/// -40 nav -/// 1 main -/// 50 footer +/// @example scss - Used in `base/_body.scss` by the `body > nav` element +/// body > nav { +/// @include properties($body__body-nav--default, $body__body-nav); +/// } /// -body > header { order: -50; } +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav +$body__body-nav--default: ( + order: -40, +) !default; -/// Nav html element. -body > nav { order: -40; } +$body__body-nav: () !default; -/// Main html element of body. -body > main { order: 1; } +body > nav { + @include properties($body__body-nav--default, $body__body-nav); +} + +// --------------------------------------------------------------------------------------------------------------------- +/// - Set up source order for mobile first approach +/// - Set up basic properties for the `main` element +/// +/// @example scss - Used in `base/_body.scss` by the `body > main, body > #main` elements +/// body > main { +/// @include properties(body__body-main--default, body__body-main); +/// } +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main +$body__body-main--default: ( + order: 1, + overflow: hidden, + background-color: color(background), + flex: 1, + + '@media print': ( + background: transparent, + ), +) !default; -// footer html element of body. -body > footer { order: 50; } +$body__body-main: () !default; + +body > main, +body > #main { + @include properties( $body__body-main--default, $body__body-main ); +} + +// --------------------------------------------------------------------------------------------------------------------- +/// - Set up source order for mobile first approach +/// +/// @example scss - Used in `base/_body.scss` by the `body > footer` element +/// body > main { +/// @include properties(body__body-footer--default, body__body-footer); +/// } +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer +$body__body-footer--default: ( + order: 50, +) !default; -/// Main html element. -main { - overflow: hidden; - background-color: color(background); - flex: 1; +$body__body-footer: () !default; - @media print { - background: transparent; - } +body > footer { + @include properties($body__body-footer--default, $body__body-footer ); } diff --git a/core/base/_box-model.scss b/core/base/_box-model.scss index 7d4836ff1..ecf0ead8e 100644 --- a/core/base/_box-model.scss +++ b/core/base/_box-model.scss @@ -2,29 +2,52 @@ //// /// Box model default styles. +/// /// @group base|box-model +/// +/// @type map +/// +/// @see $group__element--default +/// @see $group__element //// -/// Set up a decent box model on the root element. +// --------------------------------------------------------------------------------------------------------------------- +/// - Set up box model for the root element +/// +/// @example scss - Used in `base/_box-model.scss` by the `html` root element +/// html { +/// box-sizing: border-box; +/// } +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html +$box-model__html--default: ( + box-sizing: border-box, +)!default; + +$box-model__html: ()!default; html { - font-size: 62.5%; // 1rem = 10px; - box-sizing: border-box; + @include properties( $box-model__html--default, $box-model__html ); } -/// Make all elements from the DOM inherit from the parent box-sizing -/// Since `*` has a specificity of 0, it does not override the `html` value -/// making all elements inheriting from the root box-sizing value -/// See: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ +// --------------------------------------------------------------------------------------------------------------------- +/// - Make all elements from the DOM inherit from the parent box-sizing +/// - Since `*` has a specificity of 0, it does not override the `html` value, +/// making all elements inheriting from the root box-sizing value +/// +/// @example scss - Used in `base/_box-model.scss` by the `*, *::before, *::after` elements +/// *, *::before, *::after { +/// @include properties(box-model__box-sizing--default, box-model__box-sizing); +/// } +/// +/// @link https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ +/// +$box-model__box-sizing--default: ( + box-sizing: inherit, +) !default; -*, *::before, *::after { - box-sizing: inherit; -} +$box-model__box-sizing: ()!default; -/// Set the base body font size. -/// @require {function} em Relative unit function -/// @require {variable} $base-font-size Base font size - -body { - @include font-size($base-font-size, $root-font-size); +*, *::before, *::after { + @include properties($box-model__box-sizing--default, $box-model__box-sizing); } diff --git a/core/base/_buttons.scss b/core/base/_buttons.scss index 784b31fa8..741664107 100644 --- a/core/base/_buttons.scss +++ b/core/base/_buttons.scss @@ -3,104 +3,37 @@ //// /// Button base styles. /// @group base|buttons +/// @group buttons +/// +/// @type map +/// +/// @see $group__element--default +/// @see $group__element //// /// Generic Button Styles. -/// @require {function} color Returns a color from the color map. -/// @require {function} em normalized relative values. -/// @require {mixin} material-shadow adds a shadow. -/// @require {variable} $base-font-family The default base font styles. -/// @require {variable} $base-line-height Base line height setting. -/// @require {variable} $base-transition Base transition setting. -/// @require {variable} $small-spacing Base small space setting. +/// @require button +/// @require $base-button %button__generic { - $_font-family: $base-font-family; - $_line-height: $base-line-height; - $_transition: $base-transition; - $_spacing: $small-spacing; - - @include material-shadow(flat); - - appearance: none; - background-color: color(action); - border: none; - color: color(reverse-text); - cursor: pointer; - display: inline-block; - font-family: $_font-family; - font-size: inherit; - -webkit-font-smoothing: antialiased; - font-weight: inherit; - line-height: $_line-height; - padding: em(6px) em($_spacing) em(7px); - text-align: center; - text-decoration: none; - user-select: none; - vertical-align: middle; - transition: $_transition; - - &:hover, - &:focus, - &:active { - background-color: color(action--active); - color: color(reverse-text--active); - text-decoration: none; - } - - &:disabled, - &.disabled { - background-color: color(action); - color: color(reverse-text); - cursor: not-allowed; - opacity: .5; - - &:hover { - cursor: not-allowed; - } - } + @include button($base-button); } /// Primary Button Styles. -/// @require {function} em normalized relative values. -/// @require {function} color Returns a color from the color map. -/// @require {placeholder} button__generic -/// @require {variable} $base-spacing +/// @require %button__generic +/// @require button +/// @require $primary-button %button__primary { - $_spacing: $base-spacing; - @extend %button__generic; - - background-color: color(action); - color: color(reverse-text); - font-weight: 600; - padding: em(10px) em($_spacing) em(12px); - - @include on-event { - background-color: color(action--active); - color: color(reverse-text); - } + @include button($primary-button); } /// Secondary Button Styles. -/// @require {function} em normalized relative values. -/// @require {function} color Returns a color from the color map. -/// @require {placeholder} button__generic -/// @require {variable} $base-spacing +/// @require %button__generic +/// @require button +/// @require $secondary-button %button__secondary { - $_spacing: $base-spacing; - @extend %button__generic; - background-color: inherit; - border: $base-border; - color: color(text); - font-weight: 600; - padding: em(7px) em($_spacing) em(9px); - - @include on-event { - background-color: inherit; - border-color: color(action); - color: color(action); - } + @include button($secondary-button); } /// Apply all button styles. diff --git a/core/base/_decanter-base.scss b/core/base/_decanter-base.scss index 46420d784..5284c8832 100644 --- a/core/base/_decanter-base.scss +++ b/core/base/_decanter-base.scss @@ -13,12 +13,12 @@ //// @import - 'body', - 'box-model', - 'buttons', - 'fonts', - 'forms', - 'lists', - 'media-elements', - 'tables', - 'typography'; + 'box-model' +, 'body' +, 'typography' +, 'forms' +, 'lists' +, 'tables' +, 'media-elements' +, 'buttons' +; diff --git a/core/base/_documentation.scss b/core/base/_documentation.scss new file mode 100644 index 000000000..97945b28a --- /dev/null +++ b/core/base/_documentation.scss @@ -0,0 +1,132 @@ +@charset "UTF-8"; + +//// +/// Documentation for all Base variable maps +/// +/// @ignore +/// This file is not actually built by the CSS system, it is here to provide top-level documentation for the `base` css scaffold +/// +/// @group base|_documentation +/// +/// @type map +/// +/// @see {mixin} properties +//// + +// --------------------------------------------------------------------------------------------------------------------- +/// # Default Element Map +/// This map generates the default `property`: `value` pairs for a given CSS element. +/// +/// In Decanter, the intended use case for the `base/` `--default` variables is to output a set of normalized HTML properties. +/// +/// To change the output of `base`, modify it's corresponding `group__element` map in your own project, which will be merged with the default map so you don't have to re-declare properties. +/// +/// There may be some cases in which you want to completely override the `group__element--default` map, if that's the case, you should also do this in your own project's variables. +/// +/// **Note:** *Due to the way `key:value` pairs work in SCSS maps, you can only declare one property per map. This means edge cases where you want to output fallbacks for a property should probably be handled in a different way.* +/// +/// **Second Note:** When merging nested maps, the map merge will replace the value of the entire nested map. This is a limitation of Sass's implementation. This means if you want to replace a single property in a :before nested declaration, for example, you'll have to redeclare the entire element in the override map. +/// +/// This pattern applies to all default variable maps in `base/` +/// +/// @example scss - SCSS - Default element map +/// group__element--default: ( +/// property1: value1, +/// property2: value2, +/// property3: value3, +/// // etc... +/// )!default; +/// +/// @example css - CSS - Default Output +/// element { +/// property1: value1; +/// property2: value2; +/// property3: value3; +/// // etc... +/// } +/// +$group__element--default: ( + property1: value1, + property2: value2, + property3: value3, + // etc... +)!default; + +// --------------------------------------------------------------------------------------------------------------------- +/// # Element Map +/// This map generates `property`: `value` overrides for it's corresponding `--default` map. +/// +/// In `base.scss`, the intended use case for this map is to serve as a hook to modify the base styling generated by decanter, so you would declare this variable in your own project before importing `base` +/// +/// You will notice that on the base decanter project, all of these are empty placeholder maps. This is by design. +/// +/// This pattern applies to all variable maps in `base/` +/// +/// @example scss - Default element map +/// group__element--default: ( +/// property1: value1, +/// property2: value2, +/// property3: value3, +/// // etc... +/// )!default; +/// +/// @example scss - Element map +/// $group__element: ( +/// property1: my-value1, +/// property3: null, // By explicitly declaring a +/// // null value in the merged map, +/// // we can suppress this property +/// my-new-property: my-new-value, +/// // etc... +/// } +/// +/// @example scss - Merged SCSS Output +/// element { +/// property1: my-value1; +/// property2: value2; +/// my-new-property: my-new-value; +/// // etc... +/// } +/// +$group__element: ( + property1: my-value1, + property3: null, + my-new-property: my-new-value, + // ... +)!default; + +/// `CSS Elements` in `base` are generated via the `properties()` mixin, which merges the above maps and outputs the corresponding css +/// +/// @example scss - In use throughout `base/`: +/// element { +/// @include properties($group__element--default, $group__element); +/// } +/// +/// @require {mixin} properties> +%element { + @include properties($group__element--default, $group__element); +} + +// --------------------------------------------------------------------------------------------------------------------- +/// - Base documentation cut & paste template. +/// - Base styles for the `eelement` element +/// +/// @example scss - Used in `base/_lists.scss` by the `eelement` element +/// eelement { +/// @include properties($lists__eelement--default, $typography__eelement); +/// } +/// +/// @require -- +/// +/// @todo -- +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/eelement +/// + +$lists__eelement--default: () !default; + +$lists__eelement: () !default; + +eelement { + @include properties($lists__eelement--default, $lists__eelement); +} diff --git a/core/base/_fonts.scss b/core/base/_fonts.scss deleted file mode 100644 index d463b538f..000000000 --- a/core/base/_fonts.scss +++ /dev/null @@ -1,9 +0,0 @@ -@charset "UTF-8"; -//// -/// Base font styles. -/// This file contains all @font-face declarations, if any. -/// @group base|fonts -//// - -//// Load the font-face declarations. -@include load-fonts($decanter-default-fonts); diff --git a/core/base/_forms.scss b/core/base/_forms.scss index c695de551..0bb0c3f33 100644 --- a/core/base/_forms.scss +++ b/core/base/_forms.scss @@ -2,119 +2,266 @@ //// /// Form base styles. /// @group base|forms +/// +/// @type map +/// @see $group__element--default +/// @see $group__element //// -/// Fieldset defaults. +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styles for the `fieldset` element +/// +/// @example scss - Used in `base/_forms.scss` by the `fieldset` element +/// fieldset { +/// @include properties($forms__fieldset--default, $typography__fieldset); +/// } +/// +/// @require -- +/// +/// @todo -- +/// +/// link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset +/// +$forms__fieldset--default: ( +background-color: transparent, +border: 0, +margin: 0, +padding: 0, +) !default; + +$forms__fieldset: () !default; + fieldset { - background-color: transparent; - border: 0; - margin: 0; - padding: 0; + @include properties($forms__fieldset--default, $forms__fieldset); } -/// Legend defaults. -/// @require {variable} $small-spacing +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styles for the `legend` element +/// +/// @example scss - Used in `base/_forms.scss` by the `legend` element +/// legend { +/// @include properties($forms__legend--default, $typography__legend); +/// } +/// +/// @require $small-spacing +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend +/// +$forms__legend--default: ( + font-weight: 600, + margin-bottom: $small-spacing / 2, + padding: 0, +) !default; + +$forms__legend: () !default; + legend { - $_spacing: $small-spacing; - font-weight: 600; - margin-bottom: $_spacing / 2; - padding: 0; + @include properties($forms__legend--default, $forms__legend); } -/// Label defaults. -/// @require {variable} $small-spacing + +// --------------------------------------------------------------------------------------------------------------------- +/// - Base documentation cut & paste template. +/// - Base styles for the `label` element +/// +/// @example scss - Used in `base/_forms.scss` by the `label` element +/// label { +/// @include properties($forms__label--default, $typography__label); +/// } +/// +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label +/// @require $small-spacing +/// +$forms__label--default: ( + display: block, + font-weight: 600, + margin-bottom: $small-spacing / 2, +) !default; + +$forms__label: () !default; + label { - $_spacing: $small-spacing; - display: block; - font-weight: 600; - margin-bottom: $_spacing / 2; + @include properties($forms__label--default, $forms__label); } -/// Input defaults. -/// @require {variable} $base-font-family +// --------------------------------------------------------------------------------------------------------------------- +/// - Base documentation cut & paste template. +/// - Base styles for the `input`, `select` and `textarea` elements +/// +/// @example scss - Used in `base/_forms.scss` by the `input` element +/// input, +/// select, +/// textarea { +/// @include properties($forms__input--default, $typography__input); +/// } +/// +/// @require $base-font-family +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea +/// +$forms__input--default: ( + display: block, + font-family: $base-font-family, +) !default; + +$forms__input: () !default; + input, select, textarea { - $_font-family: $base-font-family; - display: block; - font-family: $_font-family; + @include properties($forms__input--default, $forms__input); } -/// All Text Input defaults. +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styles for the `#{}all-text-inputs}` element +/// +/// @example scss - Used in `base/_forms.scss` by all text inputs element +/// #{$all-text-inputs} { +/// @include properties($forms__all-text-inputs--default, $typography__all-text-inputs); +/// } +/// /// @require bourbon -/// @require {function} color -/// @require {mixin} on-event -/// @require {variable} $base-border -/// @require {variable} $base-border-radius -/// @require {variable} $form-box-shadow -/// @require {variable} $base-spacing -/// @require {variable} $base-duration -/// @require {variable} $base-timing -/// @group base +/// @require color +/// @require hokus on-event +/// @require $base-border +/// @require $base-border-radius +/// @require $form-box-shadow +/// @require $base-spacing +/// @require $base-duration +/// @require $base-timing +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input +/// +$forms__all-text-inputs--default: ( + appearance: none, + background-color: color(background), + border: $base-border, + border-radius: $base-border-radius, + box-shadow: $form-box-shadow, + box-sizing: border-box, + margin-bottom: $base-spacing, + padding: $base-spacing / 3, + transition: border-color $base-duration $base-timing, + width: 100%, + + #{$hocus}: ( + border-color: shade(color(border), 20%), + ), + '&:disabled': ( + background-color: shade(color(background), 5%), + cursor: not-allowed, + + '&:hover': ( + border: $base-border, + ), + ), + + '&::placeholder': ( + color: tint(color(text), 40%), + ), +) !default; + +$forms__all-text-inputs: () !default; + #{$all-text-inputs} { - $_border: $base-border; - $_border-radius: $base-border-radius; - $_box-shadow: $form-box-shadow; - $_spacing: $base-spacing; - $_small-spacing: $base-spacing; - $_duration: $base-duration; - $_timing: $base-timing; - - appearance: none; - background-color: color(background); - border: $_border; - border-radius: $_border-radius; - box-shadow: $_box-shadow; - box-sizing: border-box; - margin-bottom: $_small-spacing; - padding: $_spacing / 3; - transition: border-color $_duration $_timing; - width: 100%; - - @include on-event { - border-color: shade(color(border), 20%); - } - - &:disabled { - background-color: shade(color(background), 5%); - cursor: not-allowed; - - &:hover { - border: $_border; - } - } - - &::placeholder { - color: tint(color(text), 40%); - } + @include properties($forms__all-text-inputs--default, $forms__all-text-inputs); } -/// Text area styles. +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styles for the `textarea` element +/// +/// @example scss - Used in `base/_forms.scss` by the `textarea` element +/// textarea { +/// @include properties($forms__textarea--default, $typography__textarea); +/// } +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea +/// + +$forms__textarea--default: ( + resize: vertical, +) !default; + +$forms__textarea: () !default; + textarea { - resize: vertical; + @include properties($forms__textarea--default, $forms__textarea); } -/// Checkboxes and radios -/// @require {variable} $small-spacing +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styles for the `[type="checkbox"]` and `[type="radio"]` input elements +/// +/// @example scss - Used in `base/_forms.scss` by the `[type="checkbox"]` and `[type="radio"]` elements +/// [type="checkbox"], +/// [type="radio"] { +/// +/// @include properties($forms__radiocheck--default, $typography__radiocheck); +/// } +/// +/// @require $small-spacing +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input +/// + +$forms__radiocheck--default: ( + display: inline, + margin-right: $small-spacing / 2, +) !default; + +$forms__radiocheck: () !default; + [type="checkbox"], [type="radio"] { - $_spacing: $small-spacing; - display: inline; - margin-right: $_spacing / 2; + @include properties($forms__radiocheck--default, $forms__radiocheck); } -/// File fields. -/// @require {variable} $small-spacing +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styles for the `[type="file"]` input element +/// +/// @example scss - Used in `base/_forms.scss` by the `[type="file"]` element +/// [type="file"] { +/// @include properties($forms__input-file--default, $typography__input-file); +/// } +/// +/// @require $small-spacing +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input +/// + +$forms__input-file--default: ( + margin-bottom: $small-spacing, + width: 100%, +) !default; + +$forms__input-file: () !default; + [type="file"] { - $_spacing: $small-spacing; - margin-bottom: $_spacing; - width: 100%; + @include properties($forms__input-file--default, $forms__input-file); } -/// Select styles. -/// @require {variable} $small-spacing +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styles for the `select` element +/// +/// @example scss - Used in `base/_forms.scss` by the `select` element +/// select { +/// @include properties($forms__select--default, $typography__select); +/// } +/// +/// @require $small-spacing +/// +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select +/// +$forms__select--default: ( + margin-bottom: $small-spacing, + width: 100%, +) !default; + +$forms__select: () !default; + select { - $_spacing: $small-spacing; - margin-bottom: $_spacing; - width: 100%; + @include properties($forms__select--default, $forms__select); } diff --git a/core/base/_lists.scss b/core/base/_lists.scss index f2f49f989..bce0a1e20 100644 --- a/core/base/_lists.scss +++ b/core/base/_lists.scss @@ -5,92 +5,231 @@ //// -/// List classes. +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styles for `plain` lists +/// +/// @example scss - Used in `base/_lists.scss` by the `.plain` class +/// ul.plain, +/// ol.plain, +/// dl.plain, +/// dt.plain { +/// @include properties($lists__plain--default, $typography__plain); +/// } +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl +/// + +$lists__plain--default: ( + font-weight: normal, + list-style-type: none, + margin: 0, + padding: 0, +) !default; + +$lists__plain: () !default; + ul.plain, -ol.plain { - list-style-type: none; - margin: 0; - padding: 0; +ol.plain, +dl.plain, +dt.plain, +%plain { + @include properties($lists__plain--default, $lists__plain); } -/// plain -dl.plain { - margin: 0; -} -/// plain -dt.plain { - font-weight: 600; - margin: 0; -} -/// plain -dd.plain { - margin: 0; -} -/// List styles. -/// @require {function} modular-scale +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styles for the `ul` and `ol` elements +/// +/// @example scss - Used in `base/_lists.scss` by the `ul` and `ol` elements +/// ul, +/// ol { +/// @include properties($lists__lists--default, $typography__lists); +/// } +/// +/// @todo implement vertical rhythm +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol +/// + +$lists__lists--default: ( + margin: 0 0 modular-scale(0) modular-scale(1), + padding-left: 0, + li: ( + margin-bottom: modular-scale(-5), + ), +) !default; + +$lists__lists: () !default; + ul, ol { - margin: 0 0 modular-scale(0) modular-scale(1); - padding-left: 0; - li { - margin-bottom: modular-scale(-5); - } + @include properties($lists__lists--default, $lists__lists); } -/// uls + +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styles for the `ul` element +/// +/// @example scss - Used in `base/_lists.scss` by the `ul` element +/// ul { +/// @include properties($lists__ul--default, $typography__ul); +/// } +/// +/// @todo implement vertical rhythm +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul +/// + +$lists__ul--default: ( + list-style: disc, + ul: ( + list-style: circle, + ul: ( + list-style: square, + ), + ), +) !default; + +$lists__ul: () !default; + ul { - list-style: disc; - ul { - list-style: circle; - ul { - list-style: square; - } - } + @include properties($lists__ul--default, $lists__ul); } -/// Ordered List styles -/// @require {function} em +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styles for the `ol` element +/// +/// @example scss - Used in `base/_lists.scss` by the `ol` element +/// ol { +/// @include properties($lists__ol--default, $typography__ol); +/// } +/// +/// @require em +/// @todo implement vertical rhythm +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol +/// + +$lists__ol--default: ( + list-style: decimal, + + li: ( + padding-left: em(4px), + margin-left: em(-4px), + ), + + ol: ( + list-style: upper-alpha, + ol: ( + list-style: lower-roman, + ol: ( + list-style: lower-alpha, + ), + ), + ), +) !default; + +$lists__ol: () !default; + ol { - list-style: decimal; - - li { - padding-left: em(4px); - margin-left: em(-4px); - } - - ol { - list-style: upper-alpha; - ol { - list-style: lower-roman; - ol { - list-style: lower-alpha; - } - } - } + @include properties($lists__ol--default, $lists__ol); } -/// Nested list styles. -/// @require modular-scale +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styles for nested-lists +/// +/// @example scss - Used in `base/_lists.scss` by the `li > ul` and `li > ol` elements +/// li > ul, +/// li > ol { +/// @include properties($lists__nested-lists--default, $typography__nested-lists); +/// } +/// + +$lists__nested-lists--default: ( + margin-top: modular-scale(-5), + margin-bottom: modular-scale(-5), + margin-left: modular-scale(1), +) !default; + +$lists__nested-lists: () !default; + li > ul, li > ol { - margin-top: modular-scale(-5); - margin-bottom: modular-scale(-5); - margin-left: modular-scale(1); + @include properties($lists__nested-lists--default, $lists__nested-lists); } -/// Definition list styles. -/// @require {function} modular-scale +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styles for the `dl` element +/// +/// @example scss - Used in `base/_lists.scss` by the `dl` element +/// dl { +/// @include properties($lists__dl--default, $typography__dl); +/// } +/// +/// todo implement vertical rhythm +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl +/// + +$lists__dl--default: ( + margin: 0 0 modular-scale(-5), +) !default; + +$lists__dl: () !default; + dl { - margin: 0 0 modular-scale(-5); + @include properties($lists__dl--default, $lists__dl); } -/// dt + +// --------------------------------------------------------------------------------------------------------------------- +/// - Base documentation cut & paste template. +/// - Base styles for the `dt` element +/// +/// @example scss - Used in `base/_lists.scss` by the `dt` element +/// dt { +/// @include properties($lists__dt--default, $typography__dt); +/// } +/// +/// @todo implement vertical rhythm +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dt +/// + +$lists__dt--default: ( + font-weight: 600, +) !default; + +$lists__dt: () !default; + dt { - font-weight: 600; + @include properties($lists__dt--default, $lists__dt); } -/// DD list styles. -/// @require {variable} $base-spacing +// --------------------------------------------------------------------------------------------------------------------- +/// - Base documentation cut & paste template. +/// - Base styles for the `dd` element +/// +/// @example scss - Used in `base/_lists.scss` by the `dd` element +/// dd { +/// @include properties($lists__dd--default, $typography__dd); +/// } +/// +/// @require $base-spacing +/// +/// @todo implement vertical rhythm +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dd +/// + +$lists__dd--default: ( + margin: 0 0 $base-spacing, +) !default; + +$lists__dd: () !default; + dd { - margin: 0 0 $base-spacing; + @include properties($lists__dd--default, $lists__dd); } diff --git a/core/base/_media-elements.scss b/core/base/_media-elements.scss index 7d365e919..ef4b8a2cb 100644 --- a/core/base/_media-elements.scss +++ b/core/base/_media-elements.scss @@ -2,16 +2,43 @@ //// /// Meida base styles. -/// @group base|media +/// @group base|media-elements +/// +/// @type map +/// @see $group__element--default +/// @see $group__element //// // @import '../utilities/settings/settings'; +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styles for the `img`, `picture`, `figure` elements +/// +/// @example scss - Used in `base/_media-elements.scss` by the `img`, `picture`, `figure` elements +/// img, +/// picture, +/// figure { +/// @include properties($media-elements__images--default, $typography__images); +/// } +/// +/// @todo implement vertical rhythm +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/image +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure +/// + +$media-elements__images--default: ( + width: auto, + max-width: 100%, + height: auto, + margin: 0, +) !default; + +$media-elements__images: () !default; + img, picture, figure { - width: auto; - max-width: 100%; - height: auto; - margin: 0; + @include properties($media-elements__images--default, $media-elements__images); } diff --git a/core/base/_tables.scss b/core/base/_tables.scss index 59f3a2ddc..59736b672 100644 --- a/core/base/_tables.scss +++ b/core/base/_tables.scss @@ -2,40 +2,115 @@ //// /// Media base styles. /// @group base|tables +/// +/// @type map +/// @see $group__element--default +/// @see $group__element //// //@import '../utilities/settings/settings'; -/// Table styles. -/// @require {variable} $small-spacing +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styles for the `table` element +/// +/// @example scss - Used in `base/_tables.scss` by the `table` element +/// table { +/// @include properties($tables__table--default, $typography__table); +/// } +/// +/// @require $small-spacing +/// +/// @todo - Implement vertical rhytm +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table +/// +$tables__table--default: ( + border-collapse: collapse, + margin: $small-spacing 0, + table-layout: fixed, + width: 100%, +) !default; + +$tables__table: () !default; + table { - border-collapse: collapse; - margin: $small-spacing 0; - table-layout: fixed; - width: 100%; + @include properties($tables__table--default, $tables__table); } -/// TH Styles. -/// @require {function} shade -/// @require {function} color -/// @require {variable} $small-spacing +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styles for the `th` element +/// +/// @example scss - Used in `base/_tables.scss` by the `th` element +/// th { +/// @include properties($tables__th--default, $typography__th); +/// } +/// +/// @require bourbon +/// @require color +/// @require $small-spacing +/// +/// @link http://neat.bourbon.io Bourbon documentation +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th +/// +$tables__th--default: ( + border-bottom: 1px solid shade(color(border), 25%), + font-weight: 600, + padding: $small-spacing 0, + text-align: left, +) !default; + +$tables__th: () !default; + th { - border-bottom: 1px solid shade(color(border), 25%); - font-weight: 600; - padding: $small-spacing 0; - text-align: left; + @include properties($tables__th--default, $tables__th); } -/// TD styles. -/// @require {variable} $base-border -/// @require {variable} $small-spacing +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styles for the `td` element +/// +/// @example scss - Used in `base/_tables.scss` by the `td` element +/// td { +/// @include properties($tables__td--default, $typography__td); +/// } +/// +/// @require $base-border +/// @require $small-spacing +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td +/// +$tables__td--default: ( + border-bottom: $base-border, + padding: $small-spacing 0, +) !default; + +$tables__td: () !default; + td { - border-bottom: $base-border; - padding: $small-spacing 0; + @include properties($tables__td--default, $tables__td); } +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styles shared by the `tr`, `td`, `th` elements +/// +/// @example scss - Used in `base/_tables.scss` by the `tr`, `td`, `th` elements +/// tr, +/// td, +/// th { +/// @include properties($tables__tr-td-th--default, $typography__tr-td-th); +/// } +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th +/// +$tables__tr-td-th--default: ( + vertical-align: middle, +) !default; + +$tables__tr-td-th: () !default; + tr, td, th { - vertical-align: middle; + @include properties($tables__tr-td-th--default, $tables__tr-td-th); } diff --git a/core/base/_typography.scss b/core/base/_typography.scss index 1de9a8486..5fe05ad82 100644 --- a/core/base/_typography.scss +++ b/core/base/_typography.scss @@ -1,198 +1,657 @@ @charset "UTF-8"; + //// /// This file contains Site-wide typography base styles. /// @group base|typography +/// +/// @type map +/// @see $group__element--default +/// @see $group__element //// -// @import '../utilities/settings/settings'; -/// Body font styles. -/// @require {function} color -/// @require {function} font-size -/// @require {variable} $base-font-family -/// @require {variable} $base-line-height +// --------------------------------------------------------------------------------------------------------------------- +/// - Set the root body font size +/// - Since most browsers default their `normal` font size to 16px, +/// we use that as the basis for our percentage calculation, using +/// the declared `$root-font-size` variable. +/// +/// +/// @example scss - Used in `base/_typography.scss` by the `html` root element +/// html { +/// @include properties($typography__html--default, $typography__html); +/// } +/// +/// @require {variable} $root-font-size Root font size +/// +$typography__html--default: ( + font-size: percentage($root-font-size/16px), +) !default; + +$typography__html: () !default; + +html { + @include properties($typography__html--default, $typography__html); +} + + +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styling for `body` (line-height, font-family, font-size) +/// +/// @example scss - Used in `base/_typography.scss` by the `body` element +/// body { +/// @include properties($typography__body--default, $typography__body); +/// } +/// +/// @require em() +/// @require $base-font-size +/// @require $root-font-size +/// @require $base-font-family +/// @require $base-line-height +/// @todo +/// - Implement vertical rhythm +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body +$typography__body--default: ( + line-height: $base-line-height, + font-family: $base-font-family, + font-size: em($base-font-size, $root-font-size), +) !default; + +$typography__body: () !default; + body { - color: color(text); - font-family: $base-font-family; - @include font-size($base-font-size, $root-font-size); - line-height: $base-line-height; + @include properties($typography__body--default, $typography__body); } -/// Heading base styles. -/// @require {variable} $heading-font-family -/// @require {variable} $heading-line-height -/// @require {variable} $small-spacing + +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styling for all heading levles +/// +/// @example scss - Used in `base/_typography.scss` by the `#{all-headlines}` variable +/// #{$all-headlines} { +/// @include properties($typography__headlines--default, $typography__headlines); +/// } +/// +/// @require $all-headlines +/// @require $heading-font-family +/// @require $heading-line-height +/// @require modular-scale() +/// @todo +/// - Implement vertical rhythm +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements +$typography__headlines--default: ( + font-family: $heading-font-family, + font-weight: 700, + line-height: $heading-line-height, + margin: modular-scale(-1) 0 modular-scale(-3), +) !default; + +$typography__headlines: () !default; + #{$all-headlines} { - font-family: $heading-font-family; - line-height: $heading-line-height; - margin: modular-scale(-1) 0 modular-scale(-3); - font-weight: 700; + @include properties($typography__headlines--default, $typography__headlines); } -/// @require {function} font-size -/// @require {function} modular-scale +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styling for Heading 1 +/// +/// @example scss - Used in `base/_typography.scss` by the `h1` element +/// h1 { +/// @include properties($typography__h1--default, $typography__h1); +/// } +/// +/// @require modular-scale() +/// @todo +/// - Implement vertical rhythm +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements +$typography__h1--default: ( + font-size: modular-scale(5), +) !default; + +$typography__h1:() !default; + +h1 { + @include properties($typography__h1--default, $typography__h1); +} + +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styling for Heading 2 +/// +/// @example scss - Used in `base/_typography.scss` by the `h2` element +/// h2 { +/// @include properties($typography__h2--default, $typography__h2); +/// } +/// +/// @require modular-scale() +/// @todo +/// - Implement vertical rhythm +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements +$typography__h2--default: ( + font-size: modular-scale(4), +) !default; + +$typography__h2:() !default; + h2 { - @include font-size(modular-scale(4)); + @include properties($typography__h2--default, $typography__h2); } -/// @require {function} font-size -/// @require {function} modular-scale +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styling for Heading 3 +/// +/// @example scss - Used in `base/_typography.scss` by the `h3` element +/// h3 { +/// @include properties($typography__h3--default, $typography__h3); +/// } +/// +/// @require modular-scale() +/// @todo +/// - Implement vertical rhythm +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements +$typography__h3--default: ( + font-size: modular-scale(3), +) !default; + +$typography__h3:() !default; + h3 { - @include font-size(modular-scale(3)); + @include properties($typography__h2--default, $typography__h2); } -/// @require {function} font-size -/// @require {function} modular-scale +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styling for Heading 4 +/// +/// @example scss - Used in `base/_typography.scss` by the `h4` element +/// h4 { +/// @include properties($typography__h4--default, $typography__h4); +/// } +/// +/// @require modular-scale() +/// @todo +/// - Implement vertical rhythm +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements +$typography__h4--default: ( + font-size: modular-scale(2), +) !default; + +$typography__h4:() !default; + h4 { - @include font-size(modular-scale(2)); + @include properties($typography__h4--default, $typography__h4); } -/// @require {function} font-size -/// @require {function} modular-scale +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styling for Heading 5 +/// +/// @example scss - Used in `base/_typography.scss` by the `h5` element +/// h5 { +/// @include properties($typography__h5--default, $typography__h5); +/// } +/// +/// @require modular-scale() +/// @todo +/// - Implement vertical rhythm +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements +$typography__h5--default: ( + font-size: modular-scale(2), +) !default; + +$typography__h5:() !default; + h5 { - @include font-size(modular-scale(1)); + @include properties($typography__h5--default, $typography__h5); } -/// @require {function} font-size -/// @require {function} modular-scale +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styling for Heading 6 +/// +/// @example scss - Used in `base/_typography.scss` by the `h6` element +/// h6 { +/// @include properties($typography__h6--default, $typography__h6); +/// } +/// +/// @require modular-scale() +/// @todo +/// - Implement vertical rhythm +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements +$typography__h6--default: ( + font-size: modular-scale(2), +) !default; + +$typography__h6:() !default; + h6 { - @include font-size(modular-scale(0)); + @include properties($typography__h6--default, $typography__h6); } -/// @require {variable} $small-spacing +// --------------------------------------------------------------------------------------------------------------------- +/// - Set up base typography for paragraphs +/// +/// @example scss - Used in `base/_typography.scss` by the `p` element +/// p { +/// @include properties($typography__p--default, $typography__p); +/// } +/// +/// @require modular-scale() +/// @todo +/// - Implement vertical rhythm +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p +/// +$typography__p--default: ( + margin: 0 0 modular-scale(1), +) !default; + +$typography__p:() !default; + p { - margin: 0 0 modular-scale(1); + @include properties($typography__p--default, $typography__p); } +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styling for emphasis elements +/// +/// @example scss - Used in `base/_typography.scss` by the `dfn, cite, em, i` elements +/// dfn, cite, em, i { +/// @include properties($typography__emphasis--default, $typography__emphasis); +/// } +/// +/// @require modular-scale() +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dfn +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i +$typography__emphasis--default: ( + font-style: italic, +) !default; + +$typography__emphasis:() !default; + dfn, cite, em, i { - font-style: italic; + @include properties($typography__emphasis--default, $typography__emphasis); } -/// @require {function} modular-scale -// see https://css-tricks.com/almanac/properties/q/quotes/ -blockquote { - margin: 0 modular-scale(2); - quotes: "\201c" "\201d" "\2018" "\2019"; +// --------------------------------------------------------------------------------------------------------------------- +/// - Base quote styles and spacing for blockquotes +/// +/// @example scss - Used in `base/_typography.scss` by the `blockquote` element +/// blockquote { +/// @include properties($typography__blockquote--default, $typography__blockquote); +/// } +/// +/// @require modular-scale() +/// @link https://css-tricks.com/almanac/properties/q/quotes/ +/// @todo +/// - Implement vertical rhythm +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote +/// +$typography__blockquote--default: ( + margin: 0 modular-scale(2), + quotes: '"\201c" "\201d" "\2018" "\2019"', + + '&::before': ( + content: open-quote, + ), + '&::after': ( + content: close-quote, + ), +) !default; - &::before { - content: open-quote; - } - &::after { - content: close-quote; - } +$typography__blockquote:() !default; + +blockquote { + @include properties($typography__blockquote--default, $typography__blockquote); } -// see https://css-tricks.com/almanac/properties/q/quotes/ -q { - margin: 0; - quotes: "\201c" "\201d" "\2018" "\2019"; +// --------------------------------------------------------------------------------------------------------------------- +/// - Base typography for quotations +/// +/// @example scss - Used in `base/_typography.scss` by the `q` element +/// q { +/// @include properties($typography__q--default, $typography__q); +/// } +/// +/// @require modular-scale() +/// @link https://css-tricks.com/almanac/properties/q/quotes/ +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q +/// +$typography__q--default: ( + quotes: '"\201c" "\201d" "\2018" "\2019"', + + '&::before': ( + content: open-quote, + ), + '&::after': ( + content: close-quote, + ), +) !default; + +$typography__q:() !default; - &::before { - content: open-quote; - } - &::after { - content: close-quote; - } +q { + @include properties($typography__q--default, $typography__q); } -/// @require {variable} $base-spacing + +// --------------------------------------------------------------------------------------------------------------------- +/// - Base typography for address elements +/// +/// @example scss - Used in `base/_typography.scss` by the `address` element +/// address { +/// @include properties($typography__address--default, $typography__address); +/// } +/// +/// @require modular-scale() +/// +/// @todo +/// - Implement vertical rhythm +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address +/// +$typography__address--default: ( + margin: 0 0 modular-scale(2), +) !default; + +$typography__address:() !default; + address { - margin: 0 0 modular-scale(2); + @include properties($typography__address--default, $typography__address); } -/// @require {function} shade -/// @require {function} color -/// @require {variable} $monospace-font-family -/// @require {variable} $base-line-height +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styling for preformatted text +/// +/// @example scss - Used in `base/_typography.scss` by the `pre` element +/// pre { +/// @include properties($typography__pre--default, $typography__pre); +/// } +/// +/// @require rgba +/// @require color +/// @require $monospace-font-family +/// @require $base-line-height +/// @require modular-scale +/// @require em +/// @todo +/// - Implement vertical rhythm +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre +/// +$typography__pre--default: ( + background: rgba(color(light-grey), .6), + font-family: $monospace-font-family, + font-size: em(16px), + line-height: $base-line-height, + margin-bottom: modular-scale(2), + max-width: 100%, + overflow: auto, + padding: 1.6em, + border: 1px solid color(grey), + white-space: pre-wrap, +) !default; + +$typography__pre: () !default; + pre { - background: rgba(color(light-grey), .6); - font-family: $monospace-font-family; - @include font-size(16px); - line-height: $base-line-height; - margin-bottom: modular-scale(2); - max-width: 100%; - overflow: auto; - padding: 1.6em; - border: 1px solid color(grey); - white-space: pre-wrap; + @include properties($typography__pre--default, $typography__pre); } + +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styling for phrase tags +/// +/// @example scss - Used in `base/_typography.scss` by the `code`, `kbd`, `tt`, `var`, `samp` elements +/// code, kbd, tt, var, samp { +/// @include properties($typography__code--default, $typography__code); +/// } +/// /// @require {variable} $monospace-font-family /// @require {function} font-size -code, kbd, tt, var { - font-family: $monospace-font-family; - @include font-size(16px); - padding: modular-scale(-10) modular-scale(-5); - position: relative; - background-color: rgba(color(light-grey), .6); - border: 1px solid color(grey); +/// *Note:* the HTML tag `tt` (teletype) was deprecated in HTML 5. +/// - for computer code, consider the `code` element; +/// - For keyboard input, consider the `kbd` element; +/// - for variables, consider the `var` element; +/// - and for computer output, consider the `samp` element +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/samp +/// +$typography__code--default: ( + font-family: $monospace-font-family, + font-size: em(16px), + padding: modular-scale(-10) modular-scale(-5), + position: relative, + background-color: rgba(color(light-grey), .6), + border: 1px solid color(grey), +) !default; + +$typography__code: () !default; + +code, kbd, var, samp { + @include properties($typography__code--default, $typography__code); } -/// @require {function} color +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styling for abbreviation and acronym tags +/// +/// @example scss - Used in `base/_typography.scss` by the `abbr`, `acronym` elements +/// base, acronym { +/// @include properties($typography__abbr--default, $typography__abbr); +/// } +/// +/// @require color +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr +/// +$typography__abbr--default: ( + border-bottom: 1px dotted color(border), + cursor: help, +) !default; + +$typography__abbr: () !default; + abbr, acronym { - border-bottom: 1px dotted color(border); - cursor: help; + @include properties($typography__abbr--default, $typography__abbr); } +// --------------------------------------------------------------------------------------------------------------------- +/// - Shared styling for document markup (insert, delete, mark). +/// +/// @example scss - Used in `base/_typography.scss` by the `mark`, `ins`, `del` elements +/// mark, ins, del { +/// @include properties($typography__edits--default, $typography__edits); +/// } +/// +$typography__edits--default: ( + padding: 0 .25em .15em, +) !default; + +$typography__edits: () !default; + mark, ins, del { - padding: 0 .25em .15em + @include properties($typography__edits--default, $typography__edits); } -/// @require {function} color +// --------------------------------------------------------------------------------------------------------------------- +/// - Base documentation cut & paste template. +/// +/// @example scss - Used in `base/_typography.scss` by the `del` element +/// del { +/// @include properties($typography__del--default, $typography__del); +/// } +/// +/// @require color +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del +/// +$typography__del--default: ( + color: color(text), + background: color(light-red), + text-decoration: line-through, + text-decoration-color: color(red), +) !default; + +$typography__del: () !default; + del { - color: color(text); - background: color(light-red); - text-decoration: line-through; - text-decoration-color: color(light-red); + @include properties($typography__del--default, $typography__del); } -/// @require {function} color +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styles for the `ins` element +/// +/// @example scss - Used in `base/_typography.scss` by the `ins` ins +/// ins { +/// @include properties($typography__ins--default, $typography__ins); +/// } +/// +/// @require color +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/ins/ins +/// + +$typography__ins--default: ( + color: color(text), + background: color(light-green), + text-decoration: none, +) !default; + +$typography__ins: () !default; + ins { - color: color(text); - background: color(light-green); - text-decoration: none; + @include properties($typography__ins--default, $typography__ins); } -/// @require {function} color +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styles for the `mark` element +/// +/// @example scss - Used in `base/_typography.scss` by the `mark` mark +/// mark { +/// @include properties($typography__mark--default, $typography__mark); +/// } +/// +/// @require color +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark +/// +$typography__mark--default: ( + color: color(text), + background: color(light-yellow), + text-decoration: none, +) !default; + +$typography__mark: () !default; + mark { - color: color(text); - background: color(light-yellow); - text-decoration: none; + @include properties($typography__mark--default, $typography__mark); } -/// @require {function} font-size -/// @require {function} modular-scale -/// @require {variable} $ratio -small, -.small-text { - @include font-size(modular-scale(-1, $ratio: 1.125)); +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styles for the `small` and `.text-text` elements +/// +/// @example scss - Used in `base/_typography.scss` by the `small' and `.small-text` elements +/// text, .small-text { +/// @include properties($typography__small-text--default, $typography__small-text); +/// } +/// +/// @require modular-scale +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small +$typography__small-text--default: ( + font-size: modular-scale(-1, $ratio: 1.125), +) !default; + +$typography__small-text: () !default; + +small, .small-text { + @include properties($typography__small-text--default, $typography__small-text); } -/// @require {function} font-size -/// @require {function} modular-scale -big, + +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styles for the `.large-text` element +/// +/// **Note**: *The `big` element has been deprecated from the HTML spec. Use the `.large-text` class instead.* +/// +/// @example scss - Used in `base/_typography.scss` by the `.large-text` selector +/// .large-text { +/// @include properties($typography__large-text--default, $typography__large-text); +/// } +/// +/// @require modular-scale +/// @deprecated +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/big +/// +$typography__large-text--default: ( + font-size: modular-scale(1), +) !default; + +$typography__large-text: () !default; + .large-text { - @include font-size(modular-scale(1)); + @include properties($typography__large-text--default, $typography__large-text); } -/// @require {function} color -/// @require {mixin} on-event -a { - color: color(action); - text-decoration: none; +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styles for the `hr` element +/// +/// @example scss - Used in `base/_typography.scss` by the `hr` element +/// hr { +/// @include properties($typography__hr--default, $typography__hr); +/// } +/// +/// @require $base-border +/// @require $base-spacing +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr +/// +/// @todo +/// - Implement vertical rhythm +$typography__hr--default: ( + border-top: 0, + border-right: 0, + border-bottom: $base-border, + border-left: 0, + margin: modular-scale(1) 0, +) !default; - @include on-event { - color: color(action-active); - text-decoration: underline; - } -} +$typography__hr: () !default; -// @require {variable} $base-border -// @require {variable} $base-spacing hr { - border-top: 0; - border-right: 0; - border-bottom: $base-border; - border-left: 0; - margin: modular-scale(1) 0; + @include properties($typography__hr--default, $typography__hr); +} + +// --------------------------------------------------------------------------------------------------------------------- +/// - Base styles for the `a` element +/// +/// @example scss - Used in `base/_typography.scss` by the `a` element +/// a { +/// @include properties($typography__a--default, $typography__a); +/// } +/// +/// @require color +/// @require $hocus +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a +/// +$typography__a--default: ( + color: color(action), + text-decoration: none, + + #{$hocus}: ( + color: color(action-active), + text-decoration: underline, + ), +) !default; + +$typography__a: () !default; + +a { + @include properties($typography__a--default, $typography__a); } diff --git a/core/components/breakpoint-helper/_breakpoint-helper.scss b/core/components/breakpoint-helper/_breakpoint-helper.scss index 817067bc5..0f39da1fa 100644 --- a/core/components/breakpoint-helper/_breakpoint-helper.scss +++ b/core/components/breakpoint-helper/_breakpoint-helper.scss @@ -14,7 +14,7 @@ $breakpoint-helper-map: ( @mixin breakpoint-helper($selector: '#breakpoint-helper', $map: $breakpoint-helper-map ) { #{$selector} { - @include material-shadow(flat); + box-shadow: material-shadow(flat); background-color: transparentize(color(dark-grey), .2); border-radius: $base-border-radius; border-top-right-radius: 0; @@ -32,8 +32,8 @@ $breakpoint-helper-map: ( white-space: nowrap; z-index: 9999; - @include on-event { - @include material-shadow(medium); + #{$hocus} { + box-shadow: material-shadow(medium); right: 0; overflow: hidden; font-size: .75em; diff --git a/core/components/helpers/_helpers.scss b/core/components/helpers/_helpers.scss index e945631fb..8a4be3fb0 100644 --- a/core/components/helpers/_helpers.scss +++ b/core/components/helpers/_helpers.scss @@ -6,8 +6,8 @@ } -/// Helper classes -/// These all have corresponding placeholders in utilities/placeholders. +// Helper classes +// These all have corresponding placeholders in utilities/placeholders. .sr-only-text { @extend %hide-text; diff --git a/core/utilities/functions/_color.scss b/core/utilities/functions/_color.scss index 0a843000c..848918011 100644 --- a/core/utilities/functions/_color.scss +++ b/core/utilities/functions/_color.scss @@ -1,13 +1,12 @@ @charset 'UTF-8'; //// -/// File comment here +/// Color function +/// @group functions //// /// Return a color from the color map. /// -/// @group core functions -/// /// @name color /// /// @arg {color} color [null] - The color returned by the function diff --git a/core/utilities/functions/_decanter-functions.scss b/core/utilities/functions/_decanter-functions.scss index 08f79cb46..92ace31b6 100644 --- a/core/utilities/functions/_decanter-functions.scss +++ b/core/utilities/functions/_decanter-functions.scss @@ -5,9 +5,12 @@ //// @import -'color' -, 'unitconversion' + 'unitconversion' +, 'color' , 'fonts/check-loaded-font' , 'fonts/log-loaded-font' , 'layout/set-container-padding' -, 'layout/adjust-container-margin'; +, 'layout/adjust-container-margin' +, 'material-shadow' +, 'smart-merge' +; diff --git a/core/utilities/functions/_material-shadow.scss b/core/utilities/functions/_material-shadow.scss new file mode 100644 index 000000000..071d24b6a --- /dev/null +++ b/core/utilities/functions/_material-shadow.scss @@ -0,0 +1,49 @@ +//// +/// Material Shadow +/// @group functions +/// @author Kevin Garcia +//// + +/// Returns a material-design style shadow. +/// +/// May be flat, shallow, medium, or deep, or a number between 1-12 +/// +/// @param {keyword (flat|shallow|medium|deep) | number(unitless, 1-12)} Depth - How deep the shadow appears to be. +/// +/// @example - scss SCSS +/// .element { +/// box-shadow: material-shadow(shallow) +/// } +/// +/// @example - css CSS +/// .element { +/// box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15), 0px 3px 3px rgba(0, 0, 0, 0.15); +/// } +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow +/// @link http://sass-lang.com/documentation/Sass/Script/Functions.html +/// +/// @ignore •Note• the `rgba`, `round`, `floor` functions are core Sass functions. +/// +@function material-shadow($depth) { + // Keyword depths + @if type_of($depth) == number { + @if $depth == 0 { + @return 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1); + // Programatic shadows from 0 through 10 + } @else if ($depth > 0) and ($depth < 13) { + @return 0px 0px floor(10px + ($depth / 5) ) rgba(0, 0, 0, (.1 + ($depth / 66.66666667))), 0px round(2px + ($depth - ($depth / 7))) round(2px + ($depth - ($depth / 20))) rgba(0, 0, 0, (.1 + ($depth / 66.66666667))) + } + } @else if $depth == 'flat' { + // Box Shadow: offset-x | offset-y | blur-radius | spread-radius | color + @return 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1); + } @else if $depth == 'shallow' { + @return 0px 0px 10px rgba(0, 0, 0, 0.15), 0px 3px 3px rgba(0, 0, 0, 0.15); + } @else if $depth == 'medium' { + @return 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2); + } @else if $depth == 'deep' { + @return 0px 0px 12px rgba(0, 0, 0, 0.25), 0px 11px 12px rgba(0, 0, 0, 0.25); + } + @warn 'Material shadow supports a range from 1-12, or the keywords "flat, shallow, medium deep"'; + @return false +} \ No newline at end of file diff --git a/core/utilities/functions/_smart-merge.scss b/core/utilities/functions/_smart-merge.scss new file mode 100644 index 000000000..e0399eaab --- /dev/null +++ b/core/utilities/functions/_smart-merge.scss @@ -0,0 +1,59 @@ +@charset 'UTF-8'; + +//// +/// Smart merge +/// @group functions +/// @author Kevin Garcia +//// + +/// Returns a merged map, a single map, or a null value, depending on the results of the function's operations +/// +/// **Limitations:** When merging nested maps, the map merge will replace the value of the entire nested map. This is a limitation of Sass's implementation. This means if you want to replace a single property in a :before nested declaration, for example, you'll have to redeclare the entire element in the override map. +/// +/// @param {map} default-map - The default map the mixin consumes +/// @param {map} map [null] - The optional override map to merge in +/// +/// @example scss - SCSS +/// $map--default: ( +/// property1: value1, +/// property2: value2, +/// property3: value3, +/// // etc... +/// )!default; +/// +/// $my-new-map: ( +/// property1: my-value1, +/// property3: null, // By explicitly declaring a +/// // null value in the merged map, +/// // we can suppress this property +/// my-new-property: my-new-value, +/// // etc... +/// ); +/// +/// $merged-map: smart-merge($map--default, $my-new-map); +/// +/// +/// @example scss - Merged SCSS Map +/// $merged-map: ( +/// property1: my-value1, +/// property2: value2, +/// my-new-property: my-new-value, +/// // etc... +/// ); +/// +@function smart-merge($default-map, $map) { + @if $map { + @if $default-map { + @return map-merge($default-map, $map); + } @else { + @return $map; + } + } @else { + @if $default-map { + @return $default-map; + } @else { + @warn 'Could not return map.'; + @return false; + } + } +} diff --git a/core/utilities/functions/_unitconversion.scss b/core/utilities/functions/_unitconversion.scss index 39ee95f2c..e90178e22 100644 --- a/core/utilities/functions/_unitconversion.scss +++ b/core/utilities/functions/_unitconversion.scss @@ -1,7 +1,10 @@ // ____________________________________________________________________________ -// -// Unit Conversion v.2.1.3 -// https://github.com/jakob-e/unitconversion +//// +/// Unit Conversion v.2.1.3 +/// @author Jakob Eriksen +/// @link https://github.com/jakob-e/unitconversion +/// @group functions +//// // ____________________________________________________________________________ // // Function Input units @@ -95,6 +98,8 @@ @function khz($input){ @return to-unit(khz, $input); } // Relative lengths +/// Returns em relative units +/// @require to-unit @function em($input...){ $em: to-unit(em, nth($input,1)); // Adjust for compounds (visual size) @@ -105,6 +110,9 @@ } @return $em; } + +/// Returns REM root units +/// @require to-unit @function rem($input){ @return to-unit(rem, $input); } // Inconvertible relative lengths – depends on font @@ -138,6 +146,9 @@ // Conversion function +/// Conversion function +/// @require $base-font-size +/// @require $root-font-size @function to-unit($unit, $input){ // Test against valid CSS units $to-unit: map-get(( diff --git a/core/utilities/functions/fonts/_check-loaded-font.scss b/core/utilities/functions/fonts/_check-loaded-font.scss index d6d4df7ca..e1d9bfc07 100644 --- a/core/utilities/functions/fonts/_check-loaded-font.scss +++ b/core/utilities/functions/fonts/_check-loaded-font.scss @@ -1,7 +1,12 @@ @charset "UTF-8"; -/// @access private +//// +/// Font loading function. +/// @group font-management +//// + /// Checks the global variable for loaded fonts +/// @require $loaded-fonts @function _check-loaded-font($url) { $_value: index($loaded-fonts, $url); @if type-of($_value) == number { diff --git a/core/utilities/functions/fonts/_log-loaded-font.scss b/core/utilities/functions/fonts/_log-loaded-font.scss index 687208190..0e9b21b28 100644 --- a/core/utilities/functions/fonts/_log-loaded-font.scss +++ b/core/utilities/functions/fonts/_log-loaded-font.scss @@ -1,8 +1,13 @@ @charset "UTF-8"; -/// @access private +//// +/// Font loading function. +/// @group font-management +//// + /// Internal function to keep track of loaded fonts /// so we don't duplicate calls. +/// @require $loaded-fonts @function _log-loaded-font($url) { $loaded-fonts: append($loaded-fonts, $url, comma) !global; @return true; diff --git a/core/utilities/functions/layout/_adjust-container-margin.scss b/core/utilities/functions/layout/_adjust-container-margin.scss index fe64f8eb8..013489a11 100644 --- a/core/utilities/functions/layout/_adjust-container-margin.scss +++ b/core/utilities/functions/layout/_adjust-container-margin.scss @@ -1,11 +1,14 @@ @charset "UTF-8"; - +//// /// Adjust Container Margin +/// @group functions +//// + /// Adjusts the margin of a container by growing or shrinking it by a certain number of columns. /// This is a companion function to set-container-padding, which allows a container to break out /// of it's own boundaries. /// -/// todo: Documentation +/// @todo: Documentation @function _adjust-container-margin( $columns, diff --git a/core/utilities/functions/layout/_set-container-padding.scss b/core/utilities/functions/layout/_set-container-padding.scss index be63c74bb..d2585ddca 100644 --- a/core/utilities/functions/layout/_set-container-padding.scss +++ b/core/utilities/functions/layout/_set-container-padding.scss @@ -1,5 +1,10 @@ @charset "UTF-8"; +//// +/// Padding +/// @group functions +//// + /// Set Container padding /// Creates a fluid container of a certain number of columns. /// Can be constrained to a specific max width, or to the project's global `$max-container-width`. @@ -12,7 +17,6 @@ @function _set-container-padding( $columns: null, $grid: $neat-grid, - $v-space: 1em, $max-width: false ) { @@ -24,17 +28,17 @@ // Checks to see if we need to calculate a gutter @if $_grid-columns >= $_columns { $_column-multiplier: $_grid-columns - $_columns; - @return $v-space calc(((50% /#{$_grid-columns}) * #{$_column-multiplier}) + #{$_grid-gutter}); + @return calc(((50% /#{$_grid-columns}) * #{$_column-multiplier}) + #{$_grid-gutter}); } @else { - @return $v-space $_grid-gutter; + @return $_grid-gutter; } // Otherwise we calculate the max width in pixels } @else if type_of($max-width) == number { $_container-width: (((px($max-width / 2)) / $_grid-columns) * $_columns); - @return $v-space calc(50% - (#{$_container-width} - #{$_grid-gutter})); + @return calc(50% - (#{$_container-width} - #{$_grid-gutter})); // Finally, if max width is set to true, we use the project's "max-container-width" configuration option. } @else if ($max-width == true) { $_container-width: ((($max-container-width / 2) / $_grid-columns) * $_columns); - @return $v-space calc(50% - (#{$_container-width} - #{$_grid-gutter})); + @return calc(50% - (#{$_container-width} - #{$_grid-gutter})); } } diff --git a/core/utilities/mixins/__nested-properties.scss b/core/utilities/mixins/__nested-properties.scss new file mode 100644 index 000000000..b4baef888 --- /dev/null +++ b/core/utilities/mixins/__nested-properties.scss @@ -0,0 +1,39 @@ +@charset "UTF-8"; + +//// +/// Nested properties +/// @author Kevin Garcia +/// @group mixins +//// + +/// +/// Returns a list of recursively nested `$property`: `$value` pairs. +/// The mixin will continue to iterate as long as any map value is a nested map. +/// +/// @param {css property} $_property - The CSS Property +/// @param {css value | map} $_value - The CSS Value the property contains, or, if a map, the properties of the nested selector. +/// +/// @access private + +@mixin _nested-properties($_property, $_value) { + // Checks for nested maps + @if type-of($_value) == map { + // Uses map key as element selector + #{$_property} { + // Iterates over property:value pairs + @each $_nested-property, $_nested-value in $_value { + // Recursive check for nested maps + @if type-of($_nested-value) == map { + // If nested map, call self and restart loop + @include _nested-properties($_nested-property, $_nested-value); + } @else { + // Outputs property:value CSS + #{$_nested-property}: #{$_nested-value}; + } + } + } + } @else { + // Outputs property:value CSS + #{$_property}: #{$_value}; + } +} diff --git a/core/utilities/mixins/_button.scss b/core/utilities/mixins/_button.scss new file mode 100644 index 000000000..56d713f97 --- /dev/null +++ b/core/utilities/mixins/_button.scss @@ -0,0 +1,16 @@ +@charset "UTF-8"; + +/// +/// The button mixin is a functional alias of the `properties` mixin, however, it's there to provide a semantic +/// demarcation for it's intended purpose. Namely, we are using it to mimic the `extend` functionality for cases +/// where CSS inheritance causes unintended cascading of button properties. In those cases, +/// you can `@include button($base-button, $secondary-button)`, and have this mixin provide all the computed +/// values that would normally be overriden if we had used %extend +/// +@mixin button($default-settings, $settings: null) { + $_settings: smart-merge($default-settings, $settings); + + @each $_property, $_value in $_settings { + @include _nested-properties($_property, $_value); + } +} diff --git a/core/utilities/mixins/_center-block.scss b/core/utilities/mixins/_center-block.scss index 05f2ea1de..d738eb00c 100644 --- a/core/utilities/mixins/_center-block.scss +++ b/core/utilities/mixins/_center-block.scss @@ -1,5 +1,6 @@ @charset "UTF-8"; +/// @group mixins /// Center block @mixin center-block { display: block; diff --git a/core/utilities/mixins/_decanter-mixins.scss b/core/utilities/mixins/_decanter-mixins.scss index 1e0dc167d..9fa904975 100644 --- a/core/utilities/mixins/_decanter-mixins.scss +++ b/core/utilities/mixins/_decanter-mixins.scss @@ -16,9 +16,12 @@ , 'theme/color-theme' , 'theme/color-themes' // Misc helpers +, '_nested-properties' +, 'properties' +, 'button' , 'center-block' , 'material-shadow' -, 'font-size' -, 'on-event' +, 'font-size' // deprecated +, 'on-event' // deprecated , 'load-fonts' ; diff --git a/core/utilities/mixins/_font-size.scss b/core/utilities/mixins/_font-size.scss index 21f78fa77..c3cc789ee 100644 --- a/core/utilities/mixins/_font-size.scss +++ b/core/utilities/mixins/_font-size.scss @@ -4,12 +4,13 @@ /// FILE COMMENT HERE //// -/// -/// Function font-size -/// - @import '../functions/unitconversion'; +/// +/// Mixin font-size +/// @group mixins +/// @deprecated +/// @require em @mixin font-size($_size: 16px, $_base: null) { @if $_base == null { font-size: em($_size); diff --git a/core/utilities/mixins/_load-fonts.scss b/core/utilities/mixins/_load-fonts.scss index 2d86c3b31..895826efd 100644 --- a/core/utilities/mixins/_load-fonts.scss +++ b/core/utilities/mixins/_load-fonts.scss @@ -2,7 +2,7 @@ //// /// Font loading function. -/// @group functions +/// @group font-management //// /// Global default fonts. @@ -13,6 +13,11 @@ $loaded-fonts: () !default; /// Load a collection of @font-face fonts /// +/// @require $fonts +/// @require $loaded-fonts +/// @require log-loaded-fonts +/// @require _check-loaded-font +/// @require _log-loaded-font @mixin load-fonts($load: $fonts) { // String @@ -20,12 +25,12 @@ $loaded-fonts: () !default; // Cast the item to a string to be sure we don't pass // strange variables to the loader. $_item_string: '#{$load}'; - @if (_is-loaded_font($_item_string) != true) { + @if _check-loaded_font($_item_string) { + @debug "Font: #{$_item_string} already loaded."; + } @else { $_tmp: _log-loaded-font($_item_string); $_item_string: quote($_item_string); @import url($_item_string); - } @else { - @debug "Font: #{$_item_string} already loaded."; } // List } @else if type-of($load) == list { @@ -34,14 +39,13 @@ $loaded-fonts: () !default; // Cast the item to a string to be sure we don't pass // strange variables to the loader. $_item_string: '#{$_item}'; - @if (_is-loaded_font($_item_string) != true) { + @if _check-loaded-font($_item_string) { + @debug "Font: #{$_item_string} already loaded."; + } @else { $_tmp: _log-loaded-font($_item_string); $_item_string: quote($_item_string); @import url($_item_string); } - @else { - @debug "Font: #{$_item_string} already loaded."; - } } // Map } @else if type-of($load) == map { @@ -51,14 +55,13 @@ $loaded-fonts: () !default; // Cast the item to a string to be sure we don't pass // strange variables to the loader. $_item_string: '#{$_font}'; - @if (_is-loaded_font($_item_string) != true) { + @if _check-loaded-font($_item_string) { + @debug "Font: #{$_item_string} already loaded."; + } @else { $_tmp: _log-loaded-font($_item_string); $_item_string: quote($_item_string); @import url($_item_string); } - @else { - @debug "Font: #{$_item_string} already loaded."; - } } } } diff --git a/core/utilities/mixins/_material-shadow.scss b/core/utilities/mixins/_material-shadow.scss index ab8611683..037289ff1 100644 --- a/core/utilities/mixins/_material-shadow.scss +++ b/core/utilities/mixins/_material-shadow.scss @@ -3,7 +3,6 @@ /// Creates a material-design style shadow. May be flat, shallow, medium, or deep. /// /// @author Kevin Garcia -/// @group mixins /// /// @arg {string} Depth [shallow] - How deep the shadow appears to be. Default is Shallow. /// @require {function} rgba @@ -17,21 +16,15 @@ /// .element { /// box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.10), 2px 4px 7px 0px rgba(0,0,0,0.15); /// } -@mixin material-shadow -( - $depth: shallow -) { -// Depths: flat | shallow | medium | deep - @media screen { - @if $depth == 'flat' { - // Box Shadow: offset-x | offset-y | blur-radius | spread-radius | color - box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05); - } @else if $depth == 'shallow' { - box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05), 0px 3px 3px 1px rgba(0, 0, 0, 0.05); - } @else if $depth == 'medium' { - box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15); - } @else if $depth == 'deep' { - box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.10), 0px 11px 12px 0px rgba(0, 0, 0, 0.2); - } +/// +/// @group mixins +/// +/// @deprecated +/// This mixin is deprecated in favor of the `material-shadow` function +/// +/// @see {function} material-shadow +@mixin material_shadow( $depth: shallow ) { + @media only screen { + box-shadow: material-shadow($depth); } } diff --git a/core/utilities/mixins/_on-event.scss b/core/utilities/mixins/_on-event.scss index 87d2da997..f338ebe61 100644 --- a/core/utilities/mixins/_on-event.scss +++ b/core/utilities/mixins/_on-event.scss @@ -1,7 +1,11 @@ /// Event wrapper +/// @group mixins /// @author Harry Roberts /// @param {Bool} $self [false] - Whether or not to include current selector /// @link https://twitter.com/csswizardry/status/478938530342006784 Original tweet from Harry Roberts +/// @deprecated in favor of the `$hocus` and `$pocus` variables +/// @see $hocus +/// @see $pocus @mixin on-event($self: false) { @if $self { &, diff --git a/core/utilities/mixins/_properties.scss b/core/utilities/mixins/_properties.scss new file mode 100644 index 000000000..2a86b275c --- /dev/null +++ b/core/utilities/mixins/_properties.scss @@ -0,0 +1,119 @@ +@charset 'UTF-8'; + +//// +/// Properties +/// @author Kevin Garcia +/// @group mixins +//// + +/// Returns a list of `$property`: `$value` pairs +/// +/// @param {map} default-settings - The default map the mixin consumes +/// @param {map} settings [null] - The optional override map to merge in +/// +/// @example scss - source SCSS +/// $default-map: ( +/// color: blue, +/// margin: 0 auto, +/// ); +/// +/// $map-override: ( +/// color: red, +/// overflow: hidden, +/// ); +/// +/// .default-element { +/// @include properties($default-map); +/// } +/// +/// .override-element { +/// @include properties($map-override); +/// } +/// +/// .merged-element { +/// @include properties($default-map, $map-override); +/// } +/// +/// @example css - output CSS +/// +/// .default-element { +/// color: blue; +/// margin: 0 auto; +/// } +/// +/// .override-element: { +/// color: red; +/// overflow: hidden; +/// }; +/// +/// .merged-element { +/// color: red; +/// margin: 0 auto; +/// overflow: hidden; +/// } +/// +/// @example scss - When to use default + merged elements (scss) +/// +/// // The main use case is when one wants to output variations of an element. +/// +/// $default-button: ( +/// background-color: #333333, +/// color: white, +/// margin: 0 auto, +/// padding: 1em, +/// ); +/// +/// $blue-button: ( +/// background-color: blue, +/// ); +/// +/// // You can pass it a default map +/// .button { +/// @include element-properties($default-button); +/// } +/// +/// // You can pass it a named map +/// .button--blue { +/// @include element-properties($default-button, $blue-button); +/// } +/// +/// // You may also pass it an inline map +/// .button--green { +/// @include element-properties($default-button, (font-size: 1.125em, background-color: green, color: inherit, margin: null, )); +/// } +/// +/// @example css - When to use default + merged elements (output) +/// +/// .button: { +/// background-color: #333333; +/// color: white; +/// margin: 0 auto; +/// padding: 1em; +/// }; +/// +/// .button--blue: ( +/// background-color: blue; +/// color: white; +/// margin: 0 auto; +/// padding: 1em; +/// ); +/// +/// /* Notice that explicitly null values in overrides are removed from the output */ +/// .button--green: ( +/// background-color: green; /* <- overriden value */ +/// color: inherit; /* <- overriden value */ +/// padding: 1em; /* <- Notice that the margin property is gone. */ +/// font-size: 1.125em /* <- values not present in the default map are amended to the end */ +/// ); +/// +/// +/// @requires [function] smart-merge +/// @requires [mixin] _nested-properties +/// +@mixin properties($default-settings, $settings: null) { + $_settings: smart-merge($default-settings, $settings); + + @each $_property, $_value in $_settings { + @include _nested-properties($_property, $_value); + } +} \ No newline at end of file diff --git a/core/utilities/mixins/layout/_adjust-container-width.scss b/core/utilities/mixins/layout/_adjust-container-width.scss index c04275644..41e7d3c49 100644 --- a/core/utilities/mixins/layout/_adjust-container-width.scss +++ b/core/utilities/mixins/layout/_adjust-container-width.scss @@ -1,8 +1,8 @@ @charset "UTF-8"; -// Adjust the current container by insetting or breaking out by X columns -// Can accept negative numbers -// todo: documentation. - +/// Adjust the current container by insetting or breaking out by X columns +/// Can accept negative numbers +/// todo: documentation. +/// @mixin adjust-container-width ( $columns: 2, diff --git a/core/utilities/mixins/layout/_centered-container.scss b/core/utilities/mixins/layout/_centered-container.scss index 5acc55c60..00131d2b2 100644 --- a/core/utilities/mixins/layout/_centered-container.scss +++ b/core/utilities/mixins/layout/_centered-container.scss @@ -4,7 +4,10 @@ /// centered-container mixin /// Creates a wrapper-less centered container using padding /// Depends on Neat. We use the global neat-grid variable for grid default, but you may pass it any value. - +/// @require _set-container-padding +/// @require $neat-grid +/// +/// @link http://neat.bourbon.io Neat @mixin centered-container( $columns: null, $v-space: 1em, @@ -17,10 +20,15 @@ $_grid-columns: _retrieve-neat-setting($grid, columns); // Retrieves the number of max columns from the specified grid $_grid-gutter: _retrieve-neat-setting($grid, gutter); // Retrieves the gutter from the specified grid - padding: _set-container-padding($columns, $grid, $v-space, $max-width); - @include grid-container; @if $grid-collapse == true { @include grid-collapse; } + + @if $v-space { + padding: $v-space _set-container-padding($columns, $grid, $max-width); + } @else { + padding-left: _set-container-padding($columns, $grid, $max-width); + padding-right: _set-container-padding($columns, $grid, $max-width); + } } diff --git a/core/utilities/mixins/theme/_color-theme.scss b/core/utilities/mixins/theme/_color-theme.scss index 48554725f..7a7962fa5 100644 --- a/core/utilities/mixins/theme/_color-theme.scss +++ b/core/utilities/mixins/theme/_color-theme.scss @@ -1,4 +1,8 @@ @charset "UTF-8"; +//// +/// Color themes +/// @group mixins|color +//// // Dependency on the $colors variable. @import '../../variables/colors'; @@ -20,7 +24,7 @@ /// the `$selector` argument allows you to specify a different class than the current. It's /// especially useful when used with the `render-color-themes` mixin. /// -/// @example SCSS +/// @example scss - SCSS /// $green-theme: ( /// brand: #2c853c, /// action: #00992b, @@ -40,24 +44,26 @@ /// } /// } /// -/// @example CSS +/// @example css - CSS output /// .card { /// background-color: #fff; /// color: #121111; /// } /// -/// @example SCSS +/// @example scss - SCSS /// @include color-theme($green-theme, '.card') { /// background-color: color(background); /// color: color(text-active); /// } /// -/// @example CSS +/// @example css - CSS output /// .card { /// background-color: #fff; /// color: #121111; /// } /// +/// @require color +/// @require $colors @mixin color-theme($palette, $selector: '&') { $_default-color-palette: $colors; diff --git a/core/utilities/mixins/theme/_color-themes.scss b/core/utilities/mixins/theme/_color-themes.scss index a7f668dd2..3cd29b195 100644 --- a/core/utilities/mixins/theme/_color-themes.scss +++ b/core/utilities/mixins/theme/_color-themes.scss @@ -2,13 +2,12 @@ //// /// Color Themes mixin -/// @group mixins|theme +/// @group functions|color //// // Dependency on the $colors variable. @import '../../variables/colors'; -/// /// $default-theme-group: ( default: ( palette: $colors, selector: '&' ), @@ -29,7 +28,7 @@ $default-theme-group: ( /// has ended, the default color map will revert to its original state as defined by `$color`. /// /// -/// @example SCSS +/// @example scss - SCSS /// $green-theme: ( /// brand: #2c853c, /// action: #00992b, @@ -67,7 +66,7 @@ $default-theme-group: ( /// } /// } /// -/// @example CSS +/// @example css - CSS Output /// .card { /// background-color: #fff; /// color: #808080; @@ -81,6 +80,9 @@ $default-theme-group: ( /// color: #297C85; /// } /// +/// @require color +/// @require $colors +/// @require color-theme @mixin color-themes($theme-group: null) { @each $_theme, $_map in $theme-group { diff --git a/core/utilities/variables/_borders.scss b/core/utilities/variables/_borders.scss index f80978421..26ff0b3fb 100644 --- a/core/utilities/variables/_borders.scss +++ b/core/utilities/variables/_borders.scss @@ -2,11 +2,12 @@ //// /// Borders -/// @group variables|borders +/// @group _variables|borders //// /// Base border radius. $base-border-radius: 3px !default; /// Base Border. +/// @require color $base-border: 1px solid color(border) !default; diff --git a/core/utilities/variables/_breakpoints.scss b/core/utilities/variables/_breakpoints.scss index 461c7bc43..aa55ec57e 100644 --- a/core/utilities/variables/_breakpoints.scss +++ b/core/utilities/variables/_breakpoints.scss @@ -2,64 +2,56 @@ //// /// Breakpoints +/// @type variable //// // Breakpoint Boundaries /// Lower Boundary for extra small screens -/// @group variables|breakpoint-boundaries -/// @type variable +/// @group _variables|breakpoint-boundaries $screen-xs-min: 0px !default; /// Lower boundary for small screens -/// @group variables|breakpoint-boundaries -/// @type variable +/// @group _variables|breakpoint-boundaries $screen-sm-min: 576px !default; /// Lower boundary for medium screens -/// @group variables|breakpoint-boundaries -/// @type variable +/// @group _variables|breakpoint-boundaries $screen-md-min: 768px !default; /// Lower boundary for large screens -/// @group variables|breakpoint-boundaries -/// @type variable +/// @group _variables|breakpoint-boundaries $screen-lg-min: 992px !default; /// Lower boundary for extra large screens -/// @group variables|breakpoint-boundaries -/// @type variable +/// @group _variables|breakpoint-boundaries $screen-xl-min: $max-container-width !default; /// Upper boundary for extra small screens -/// @group variables|breakpoint-boundaries +/// @group _variables|breakpoint-boundaries /// @requires $screen-xs-min -/// @type variable $screen-xs-max: $screen-sm-min - 1px !default; /// Upper boundary for small screens -/// @group variables|breakpoint-boundaries +/// @group _variables|breakpoint-boundaries /// @requires $screen-sm-min -/// @type variable $screen-sm-max: $screen-md-min - 1px !default; /// Upper boundary for medium screens -/// @group variables|breakpoint-boundaries +/// @group _variables|breakpoint-boundaries /// @requires $screen-lg-min -/// @type variable $screen-md-max: $screen-lg-min - 1px !default; /// Upper boundary for large screens -/// @group variables|breakpoint-boundaries +/// @group _variables|breakpoint-boundaries /// @requires $screen-xl-min -/// @type variable $screen-lg-max: $screen-xl-min - 1px !default; // Neat Media Queries -/// @group variables|grid-media +/// @group _variables|grid-media /// @link http://neat.bourbon.io/docs/latest/#grid-media Neat Docs - Grid Media /// @type map /// @@ -78,7 +70,7 @@ $media-xs: ( media: $screen-xs-min, ) !default; -/// @group variables|grid-media +/// @group _variables|grid-media /// @link http://neat.bourbon.io/docs/latest/#grid-media Neat Docs - Grid Media /// @type map /// @@ -97,7 +89,7 @@ $media-xs-only: ( media: 'only screen and (max-width: #{$screen-xs-max})', ) !default; -/// @group variables|grid-media +/// @group _variables|grid-media /// @link http://neat.bourbon.io/docs/latest/#grid-media Neat Docs - Grid Media /// @type map /// @@ -116,7 +108,7 @@ $media-xs-max: ( media: 'only screen and (max-width: #{$screen-xs-max})', ) !default; -/// @group variables|grid-media +/// @group _variables|grid-media /// @link http://neat.bourbon.io/docs/latest/#grid-media Neat Docs - Grid Media /// @type map /// @@ -135,7 +127,7 @@ $media-sm: ( media: $screen-sm-min, ) !default; -/// @group variables|grid-media +/// @group _variables|grid-media /// @link http://neat.bourbon.io/docs/latest/#grid-media Neat Docs - Grid Media /// @type map /// @@ -155,7 +147,7 @@ $media-sm-only: ( media: 'only screen and (min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max})', ) !default; -/// @group variables|grid-media +/// @group _variables|grid-media /// @link http://neat.bourbon.io/docs/latest/#grid-media Neat Docs - Grid Media /// @type map /// @@ -174,7 +166,7 @@ $media-sm-max: ( media: 'only screen and (max-width: #{$screen-sm-max})', ) !default; -/// @group variables|grid-media +/// @group _variables|grid-media /// @link http://neat.bourbon.io/docs/latest/#grid-media Neat Docs - Grid Media /// @type map /// @@ -193,7 +185,7 @@ $media-md: ( media: $screen-md-min, ) !default; -/// @group variables|grid-media +/// @group _variables|grid-media /// @link http://neat.bourbon.io/docs/latest/#grid-media Neat Docs - Grid Media /// @type map /// @@ -213,7 +205,7 @@ $media-md-only: ( media: 'only screen and (min-width: #{$screen-md-min}) and (max-width: #{$screen-md-max})', ) !default; -/// @group variables|grid-media +/// @group _variables|grid-media /// @link http://neat.bourbon.io/docs/latest/#grid-media Neat Docs - Grid Media /// @type map /// @@ -232,7 +224,7 @@ $media-md-max: ( media: 'only screen and (max-width: #{$screen-md-max})', ) !default; -/// @group variables|grid-media +/// @group _variables|grid-media /// @link http://neat.bourbon.io/docs/latest/#grid-media Neat Docs - Grid Media /// @type map /// @@ -251,7 +243,7 @@ $media-lg: ( media: $screen-lg-min, ) !default; -/// @group variables|grid-media +/// @group _variables|grid-media /// @link http://neat.bourbon.io/docs/latest/#grid-media Neat Docs - Grid Media /// @type map /// @@ -270,7 +262,7 @@ $media-lg-only: ( media: 'only screen and (min-width: #{$screen-lg-min}) and (max-width: #{$screen-lg-max})', ) !default; -/// @group variables|grid-media +/// @group _variables|grid-media /// @link http://neat.bourbon.io/docs/latest/#grid-media Neat Docs - Grid Media /// @type map /// @@ -289,7 +281,7 @@ $media-lg-max: ( media: 'only screen and (max-width: #{$screen-lg-max})', ) !default; -/// @group variables|grid-media +/// @group _variables|grid-media /// @link http://neat.bourbon.io/docs/latest/#grid-media Neat Docs - Grid Media /// @type map /// @@ -308,7 +300,7 @@ $media-xl: ( media: $screen-xl-min, ) !default; -/// @group variables|grid-media +/// @group _variables|grid-media /// @link http://neat.bourbon.io/docs/latest/#grid-media Neat | Grid Media /// @type map /// diff --git a/core/utilities/variables/_buttons.scss b/core/utilities/variables/_buttons.scss index 9e7de14bb..998ab2179 100644 --- a/core/utilities/variables/_buttons.scss +++ b/core/utilities/variables/_buttons.scss @@ -2,59 +2,85 @@ //// /// Colors -/// @group Variables|Buttons +/// @group _variables|buttons //// /// This variable is a sass map that overrides our generic button map. /// /// @name Base button /// -/// @property {Color} bg-color [color(action)] - Background color -/// @property {Color} color [color(reverse-text)] - Text Color -/// @property {length(with unit) | string} border ['none'] - Border properties. Accepts shorthand. +/// @require $base-font-family +/// @require $base-line-height +/// @require $small-spacing +/// @require $base-transition +/// @require material-shadow +/// @require color +/// @require em $base-button: ( - bg-color: color(action), - color: color(reverse-text), - border: none, - cursor: pointer, - display: inline-block, - material-shadow: flat, - font-family: $base-font-family, - line-height: $base-line-height, - font-weight: inherit, - font-size: inherit, + box-shadow: material-shadow(flat), + appearance: none, + background-color: color(action), + border: none, + color: color(reverse-text), + cursor: pointer, + display: inline-block, + font-family: $base-font-family, + font-size: inherit, + -webkit-font-smoothing: antialiased, + font-weight: inherit, + line-height: $base-line-height, + padding: em(6px) em($small-spacing) em(7px), + text-align: center, + text-decoration: none, + user-select: none, + vertical-align: middle, + transition: $base-transition, + + '#{$hocus}': ( + background-color: color(action--active), + color: color(reverse-text--active), text-decoration: none, - transition: $base-transition, - padding: 'em(6px) em($_spacing) em(7px)', - text-align: center, - spacing: $small-spacing, - bg-color--active: color(action--active), - color--active: color(reverse-text--active), - border--active: null, - material-shadow--active: null, - text-decoration--active: none, + ), + + '&:disabled, &.disabled': ( + background-color: color(action), + color: color(reverse-text), + cursor: not-allowed, + opacity: .5, + + '&:hover': ( + cursor: not-allowed, + ), + ), ) !default; $primary-button: ( - bg-color: color(action), + background-color: color(action), + color: color(reverse-text), + font-weight: 600, + padding: em(10px) em($base-spacing) em(12px), + + '#{$hocus}': ( + background-color: color(action--active), color: color(reverse-text), - font-weight: 600, - padding: 'em(10px) em($_spacing) em(12px)', - bg-color--active: color(action-active), - color--active: color(reverse-text--active), - material-shadow--active: null, - text-decoration--active: none, + text-decoration: none, + ), ) !default; +/// +/// @require $base-border +/// @require $base-spacing +/// @require $hocus $secondary-button: ( - bg-color: inherit, - border: $base-border, - border--active: color(action), + background-color: inherit, + border: $base-border, + color: color(text), + font-weight: 600, + padding: em(7px) em($base-spacing) em(9px), + + '#{$hocus}': ( + background-color: inherit, + border-color: color(action), color: color(action), - font-weight: 600, - padding: 'em(7px) em($_spacing) em(9px)', - bg-color--active: inherit, - color--active: color(text--active), - material-shadow--active: null, - text-decoration--active: none, + ), ) !default; diff --git a/core/utilities/variables/_colors.scss b/core/utilities/variables/_colors.scss index 3c74ae53f..50f751dbe 100644 --- a/core/utilities/variables/_colors.scss +++ b/core/utilities/variables/_colors.scss @@ -2,7 +2,7 @@ //// /// Colors -/// @group variables|colors +/// @group _variables|colors //// /// This variable is a sass map that overrides our generic color map. diff --git a/core/utilities/variables/_containers.scss b/core/utilities/variables/_containers.scss index 45036e828..9b3578661 100644 --- a/core/utilities/variables/_containers.scss +++ b/core/utilities/variables/_containers.scss @@ -2,7 +2,7 @@ //// /// Containers -/// @group variables|containers +/// @group _variables|containers //// /// Default Responsive Container diff --git a/core/utilities/variables/_decanter-variables.scss b/core/utilities/variables/_decanter-variables.scss index 23e9eff7b..3598cc915 100644 --- a/core/utilities/variables/_decanter-variables.scss +++ b/core/utilities/variables/_decanter-variables.scss @@ -20,11 +20,11 @@ , 'neat-omega' ; -// Base variables. +// Base settings. @import 'vertical-rhythm' , 'typography' - , 'animations' + , 'transitions' , 'borders' , 'breakpoints' , 'buttons' diff --git a/core/utilities/variables/_forms.scss b/core/utilities/variables/_forms.scss index 3ac492e05..d5ef48b95 100644 --- a/core/utilities/variables/_forms.scss +++ b/core/utilities/variables/_forms.scss @@ -2,14 +2,14 @@ //// /// Forms -/// @group variables|forms +/// @group _variables|forms //// -/// Form box shadow default. -/// @require {function} color +/// Default form box-shadow +/// @require color $form-box-shadow: inset 0 1px 3px rgba(color(black), 0.06) !default; -/// Form box shadow focus default. -/// @require {variable} lightness -/// @require {variable} alpha -$form-box-shadow-focus: $form-box-shadow, 0 0 5px adjust-color(color(blue), $lightness: -5%, $alpha: -0.3) !default; +/// Default focused form box-shadow +/// @require color +/// @link http://sass-lang.com/documentation/Sass/Script/Functions.html#adjust_color-instance_method adjust-color() documentation +$form-box-shadow--focus: $form-box-shadow, 0 0 5px adjust-color(color(blue), $lightness: -5%, $alpha: -0.3) !default; diff --git a/core/utilities/variables/_animations.scss b/core/utilities/variables/_transitions.scss similarity index 92% rename from core/utilities/variables/_animations.scss rename to core/utilities/variables/_transitions.scss index 0a3726242..892f8240f 100644 --- a/core/utilities/variables/_animations.scss +++ b/core/utilities/variables/_transitions.scss @@ -2,7 +2,7 @@ //// /// Animations -/// @group variables|animations +/// @group _variables|animations //// /// Base property animation default. diff --git a/core/utilities/variables/_typography.scss b/core/utilities/variables/_typography.scss index 10122edfa..303cd41ad 100644 --- a/core/utilities/variables/_typography.scss +++ b/core/utilities/variables/_typography.scss @@ -2,49 +2,99 @@ //// /// Typography -/// @group variables|typography +/// @group _variables|typography //// -/// Font Stack Monospace. /// -/// This is outputted via `font-family: $font-stack-monospace;` - -$decanter-default-fonts: ( +$base-fonts: ( monospace: 'https://fonts.googleapis.com/css?family=Source+Code+Pro', sans-serif: 'https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i', serif: 'https://fonts.googleapis.com/css?family=Noto+Serif:400,400i,700,700i', ) !default; -$decanter-font-families: ( +/// +$base-font-families: ( monospace: "'Source Code Pro', #{$font-stack-monaco}", sans-serif: "'Noto Sans', #{$font-stack-helvetica}", serif: "'Noto Serif', #{$font-stack-georgia}" ) !default; +/// Load the font-face declarations. +@include load-fonts($base-fonts); + // Semantic definitions // These map the generic `$font-family-serif` stacks to more functional, semantic // font stacks. `$base-font-family`, `$heading-font-family`, `$code-font-family` // -------------------- /// Base Font Family Setting. -$base-font-family: unquote(map-get($decanter-font-families, sans-serif)) !default; +$base-font-family: unquote(map-get($base-font-families, sans-serif)) !default; /// Heading Font Family. -$heading-font-family: unquote(map-get($decanter-font-families, serif)) !default; +$heading-font-family: unquote(map-get($base-font-families, serif)) !default; /// Monospace Font Family. -$monospace-font-family: unquote(map-get($decanter-font-families, monospace)) !default; +$monospace-font-family: unquote(map-get($base-font-families, monospace)) !default; /// Base Line Height. /// @todo find out where this is used and let people know. I assume everywhere. -/// @type number $base-line-height: 1.5 !default; /// Heading Line Height. /// @todo find out where this is used and let people know. I assume everywhere. -/// @type number $heading-line-height: 1.2 !default; -/// All Headlines list selector -/// @type list +/// All Headlines selector +/// +/// **Note:** This selector must be used with variable interpolation when used to declare an element. +/// +/// @example scss - Use Documentation +/// #{$all-headlines} { +/// font-weight: bold; +/// } +/// +/// @example css - Output +/// h1, h2, h3, h4, h5, h6 { +/// font-weight: bold; +/// } +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements $all-headlines: 'h1, h2, h3, h4, h5, h6' !default; + +/// `hover`, `active`, `focus` pseudo-class variable +/// +/// **Note:** This selector must be used with variable interpolation when used to declare an element. +/// +/// @example scss - Use Documentation +/// #{$hocus} { +/// font-weight: bold; +/// } +/// +/// @example css - Output +/// &:hover, &:active, &:focus { +/// font-weight: bold; +/// } +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/:hover +/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/:active +/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/:focus +$hocus: '&:hover, &:active, &:focus' !default; + +/// `hover`, `focus` pseudo-class variable +/// +/// **Note:** This pseudo-class must be used with variable interpolation when used to declare an element. +/// +/// @example scss - Use Documentation +/// #{$pocus} { +/// font-weight: bold; +/// } +/// +/// @example css - Output +/// &:hover, &:focus { +/// font-weight: bold; +/// } +/// +/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/:hover +/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/:active +/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/:focus +$pocus: '&:hover, &:focus' !default; diff --git a/core/utilities/variables/_variables-bourbon.scss b/core/utilities/variables/_variables-bourbon.scss index e6b77d01b..79240dbc9 100644 --- a/core/utilities/variables/_variables-bourbon.scss +++ b/core/utilities/variables/_variables-bourbon.scss @@ -3,7 +3,7 @@ //// /// Bourbon settings /// This file contains bourbon specific variable overrides. -/// @group variables|bourbon +/// @group _variables|_bourbon //// /// Bourbon Settings diff --git a/core/utilities/variables/_variables-decanter.scss b/core/utilities/variables/_variables-decanter.scss index d5437de10..bed6b80ad 100644 --- a/core/utilities/variables/_variables-decanter.scss +++ b/core/utilities/variables/_variables-decanter.scss @@ -3,7 +3,7 @@ //// /// Decanter settings /// This file contains decanter specific variables. -/// @group variables|decanter +/// @group _variables|__decanter //// /// Root font size in pixels. diff --git a/core/utilities/variables/_variables-neat.scss b/core/utilities/variables/_variables-neat.scss index e559bdefe..f159aa883 100644 --- a/core/utilities/variables/_variables-neat.scss +++ b/core/utilities/variables/_variables-neat.scss @@ -3,7 +3,7 @@ //// /// Neat settings /// This file contains neat specific variable overrides. -/// @group variables|neat +/// @group _variables|_neat //// /// This variable is a sass map that overrides Neat's default grid settings. diff --git a/core/utilities/variables/_vertical-rhythm.scss b/core/utilities/variables/_vertical-rhythm.scss index a46ab1b11..200b394c1 100644 --- a/core/utilities/variables/_vertical-rhythm.scss +++ b/core/utilities/variables/_vertical-rhythm.scss @@ -2,11 +2,11 @@ //// /// Vertical Rhythm -/// @group variables|vertical-rhythm +/// @group _variables|vertical-rhythm //// /// Base vertical spacing. -/// Uses the bourbon function modular-scale to procude an em size. +/// Uses the bourbon function modular-scale to produce an em size. /// @require {function} modular-scale /// @type String /// @link http://bourbon.io/docs/#modular-scale @@ -17,7 +17,7 @@ $base-spacing: modular-scale(0) !default; /// Small vertical spacing. -/// Uses the bourbon function modular-scale to procude an em size. +/// Uses the bourbon function modular-scale to produce an em size. /// @require {function} modular-scale /// @type String /// @link http://bourbon.io/docs/#modular-scale diff --git a/docs/base/index.html b/docs/base/index.html index 62a8f933c..1618fcc82 100644 --- a/docs/base/index.html +++ b/docs/base/index.html @@ -1,135 +1,424 @@ Decanter - v0.1.0-alpha1

base

csss

#{$all-text-inputs}

@css #{$all-text-inputs}() { ... }

base|body

csss

body

@css body() { ... }

body > header

@css body > header() { ... }

body > nav

@css body > nav() { ... }

body > main

@css body > main() { ... }

main

@css main() { ... }

base|box-model

csss

html

@css html() { ... }

*, *::before, *::after

@css *, *::before, *::after() { ... }

body

@css body() { ... }

base|buttons

placeholders

button__generic

See
Links

forms__all-text-inputs--default

$forms__all-text-inputs--default: (
+    appearance: none,
+    background-color: color(background),
+    border: $base-border,
+    border-radius: $base-border-radius,
+    box-shadow: $form-box-shadow,
+    box-sizing: border-box,
+    margin-bottom: $base-spacing,
+    padding: $base-spacing / 3,
+    transition: border-color $base-duration $base-timing,
+    width: 100%,
 
-  @include material-shadow(flat);
+    #{$hocus}: (
+        border-color: shade(color(border), 20%),
+    ),
+    '&:disabled': (
+        background-color: shade(color(background), 5%),
+        cursor: not-allowed,
 
-  appearance: none;
-  background-color: color(action);
-  border: none;
-  color: color(reverse-text);
-  cursor: pointer;
-  display: inline-block;
-  font-family: $_font-family;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
-  line-height: $_line-height;
-  padding: em(6px) em($_spacing) em(7px);
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: $_transition;
+        '&:hover': (
+            border: $base-border,
+        ),
+    ),
 
-  &:hover,
-  &:focus,
-  &:active {
-    background-color: color(action-active);
-    color: color(reverse-text);
-    text-decoration: none;
-  }
+    '&::placeholder': (
+        color: tint(color(text), 40%),
+    ),
+) !default;

Description

  • Base styles for the #{}all-text-inputs} element

Type

Map

Example

Used in base/_forms.scss by all text inputs element

#{$all-text-inputs} {
+  @include properties($forms__all-text-inputs--default, $typography__all-text-inputs);
+}

See

Links

forms__textarea--default

$forms__textarea--default: (
+    resize: vertical,
+) !default;

Description

  • Base styles for the textarea element

Type

Map

Example

Used in base/_forms.scss by the textarea element

textarea {
+  @include properties($forms__textarea--default, $typography__textarea);
+}

See

Links

forms__radiocheck--default

$forms__radiocheck--default: (
+    display: inline,
+    margin-right: $small-spacing / 2,
+) !default;

Description

  • Base styles for the [type="checkbox"] and [type="radio"] input elements

Type

Map

Example

Used in base/_forms.scss by the [type="checkbox"] and [type="radio"] elements

[type="checkbox"],
+[type="radio"]  {
 
-  &:disabled,
-  &.disabled {
-    background-color: color(action-active);
-    color: color(reverse-text);
-    cursor: not-allowed;
-    opacity: .5;
+  @include properties($forms__radiocheck--default, $typography__radiocheck);
+}

See

Links

forms__input-file--default

$forms__input-file--default: (
+    margin-bottom: $small-spacing,
+    width: 100%,
+) !default;

Description

  • Base styles for the [type="file"] input element

Type

Map

Example

Used in base/_forms.scss by the [type="file"] element

[type="file"] {
+  @include properties($forms__input-file--default, $typography__input-file);
+}

See

Links

forms__select--default

$forms__select--default: (
+    margin-bottom: $small-spacing,
+    width: 100%,
+) !default;

Description

  • Base styles for the select element

Type

Map

Example

Used in base/_forms.scss by the select element

select {
+  @include properties($forms__select--default, $typography__select);
+}

See

Links

Lists

variables

lists__plain--default

$lists__plain--default: (
+  font-weight: normal,
+  list-style-type: none,
+  margin: 0,
+  padding: 0,
+) !default;

Description

  • Base styles for plain lists

Example

Used in base/_lists.scss by the .plain class

ul.plain,
+ol.plain,
+dl.plain,
+dt.plain {
+  @include properties($lists__plain--default, $typography__plain);
+}

Links

lists__lists--default

$lists__lists--default: (
+  margin: 0 0 modular-scale(0) modular-scale(1),
+  padding-left: 0,
+  li: (
+    margin-bottom: modular-scale(-5),
+  ),
+) !default;

Description

  • Base styles for the ul and ol elements

Example

Used in base/_lists.scss by the ul and ol elements

ul,
+ol {
+  @include properties($lists__lists--default, $typography__lists);
+}

TODO's

  • implement vertical rhythm

Links

lists__ul--default

$lists__ul--default: (
+  list-style: disc,
+  ul: (
+    list-style: circle,
+    ul: (
+        list-style: square,
+    ),
+  ),
+) !default;

Description

  • Base styles for the ul element

Example

Used in base/_lists.scss by the ul element

ul {
+  @include properties($lists__ul--default, $typography__ul);
+}

TODO's

  • implement vertical rhythm

Links

lists__ol--default

$lists__ol--default: (
+  list-style: decimal,
 
-    &:hover {
-      cursor: not-allowed;
-    }
-  }
- }" data-collapsed="%button__generic { ... }">%button__generic { ... }

Description

Generic Button Styles.

Used by

button__primary

Description
  • Base styles for the ol element
Example
Used in base/_lists.scss by the ol element
ol {
+  @include properties($lists__ol--default, $typography__ol);
+}
TODO's
  • implement vertical rhythm
Links

lists__nested-lists--default

$lists__nested-lists--default: (
+  margin-top: modular-scale(-5),
+  margin-bottom: modular-scale(-5),
+  margin-left: modular-scale(1),
+) !default;

Description

  • Base styles for nested-lists

Example

Used in base/_lists.scss by the li > ul and li > ol elements

li > ul,
+li > ol {
+  @include properties($lists__nested-lists--default, $typography__nested-lists);
+}

lists__dl--default

$lists__dl--default: (
+    margin: 0 0 modular-scale(-5),
+) !default;

Description

  • Base styles for the dl element

Example

Used in base/_lists.scss by the dl element

  dl {
+    @include properties($lists__dl--default, $typography__dl);
+  }
 
-  background-color: color(action);
-  color: color(reverse-text);
-  font-weight: 600;
-  padding: em(10px) em($_spacing) em(12px);
+todo implement vertical rhythm

Links

lists__dt--default

$lists__dt--default: (
+    font-weight: 600,
+) !default;

Description

  • Base documentation cut & paste template.
  • Base styles for the dt element

Example

Used in base/_lists.scss by the dt element

dt {
+  @include properties($lists__dt--default, $typography__dt);
+}

TODO's

  • implement vertical rhythm

Links

lists__dd--default

$lists__dd--default: (
+    margin: 0 0 $base-spacing,
+) !default;

Description

  • Base documentation cut & paste template.
  • Base styles for the dd element

Example

Used in base/_lists.scss by the dd element

dd {
+  @include properties($lists__dd--default, $typography__dd);
+}

TODO's

  • implement vertical rhythm

Links

Media Elements

variables

media-elements__images--default

$media-elements__images--default: (
+  width: auto,
+  max-width: 100%,
+  height: auto,
+  margin: 0,
+) !default;

Description

  • Base styles for the img, picture, figure elements

Type

Map

Example

Used in base/_media-elements.scss by the img, picture, figure elements

img,
+picture,
+figure {
+  @include properties($media-elements__images--default, $typography__images);
+}

See

TODO's

  • implement vertical rhythm

Links

Tables

variables

tables__table--default

$tables__table--default: (
+    border-collapse: collapse,
+    margin: $small-spacing 0,
+    table-layout: fixed,
+    width: 100%,
+) !default;

Description

  • Base styles for the table element

Type

Map

Example

Used in base/_tables.scss by the table element

table {
+  @include properties($tables__table--default, $typography__table);
+}

See

TODO's

    • Implement vertical rhytm

Links

tables__th--default

$tables__th--default: (
+    border-bottom: 1px solid shade(color(border), 25%),
+    font-weight: 600,
+    padding: $small-spacing 0,
+    text-align: left,
+) !default;

Description

  • Base styles for the th element

Type

Map

Example

Used in base/_tables.scss by the th element

th {
+  @include properties($tables__th--default, $typography__th);
+}

See

Links

tables__td--default

$tables__td--default: (
+    border-bottom: $base-border,
+    padding: $small-spacing 0,
+) !default;

Description

  • Base styles for the td element

Type

Map

Example

Used in base/_tables.scss by the td element

td {
+  @include properties($tables__td--default, $typography__td);
+}

See

Links

tables__tr-td-th--default

$tables__tr-td-th--default: (
+    vertical-align: middle,
+) !default;

Description

  • Base styles shared by the tr, td, th elements

Type

Map

Example

Used in base/_tables.scss by the tr, td, th elements

tr,
+td,
+th {
+  @include properties($tables__tr-td-th--default, $typography__tr-td-th);
+}

See

Links

Typography

variables

typography__html--default

$typography__html--default: (
+    font-size: percentage($root-font-size/16px),
+) !default;

Description

  • Set the root body font size
  • Since most browsers default their normal font size to 16px, we use that as the basis for our percentage calculation, using the declared $root-font-size variable.

Type

Map

Example

Used in base/_typography.scss by the html root element

html {
+   @include properties($typography__html--default, $typography__html);
+ }

See

typography__body--default

$typography__body--default: (
+    line-height: $base-line-height,
+    font-family: $base-font-family,
+    font-size: em($base-font-size, $root-font-size),
+) !default;

Description

  • Base styling for body (line-height, font-family, font-size)

Type

Map

Example

Used in base/_typography.scss by the body element

body {
+   @include properties($typography__body--default, $typography__body);
+ }

See

TODO's

    • Implement vertical rhythm

Links

typography__headlines--default

$typography__headlines--default: (
+    font-family: $heading-font-family,
+    font-weight: 700,
+    line-height: $heading-line-height,
+    margin: modular-scale(-1) 0 modular-scale(-3),
+) !default;

Description

  • Base styling for all heading levles

Type

Map

Example

Used in base/_typography.scss by the #{all-headlines} variable

#{$all-headlines} {
+   @include properties($typography__headlines--default, $typography__headlines);
+ }

See

TODO's

    • Implement vertical rhythm

Links

typography__h1--default

$typography__h1--default: (
+    font-size: modular-scale(5),
+) !default;

Description

  • Base styling for Heading 1

Type

Map

Example

Used in base/_typography.scss by the h1 element

h1 {
+   @include properties($typography__h1--default, $typography__h1);
+ }

See

TODO's

    • Implement vertical rhythm

Links

typography__h2--default

$typography__h2--default: (
+  font-size: modular-scale(4),
+) !default;

Description

  • Base styling for Heading 2

Type

Map

Example

Used in base/_typography.scss by the h2 element

h2 {
+   @include properties($typography__h2--default, $typography__h2);
+ }

See

TODO's

    • Implement vertical rhythm

Links

typography__h3--default

$typography__h3--default: (
+    font-size: modular-scale(3),
+) !default;

Description

  • Base styling for Heading 3

Type

Map

Example

Used in base/_typography.scss by the h3 element

h3 {
+   @include properties($typography__h3--default, $typography__h3);
+ }

See

TODO's

    • Implement vertical rhythm

Links

typography__h4--default

$typography__h4--default: (
+    font-size: modular-scale(2),
+) !default;

Description

  • Base styling for Heading 4

Type

Map

Example

Used in base/_typography.scss by the h4 element

h4 {
+   @include properties($typography__h4--default, $typography__h4);
+ }

See

TODO's

    • Implement vertical rhythm

Links

typography__h5--default

$typography__h5--default: (
+    font-size: modular-scale(2),
+) !default;

Description

  • Base styling for Heading 5

Type

Map

Example

Used in base/_typography.scss by the h5 element

h5 {
+   @include properties($typography__h5--default, $typography__h5);
+ }

See

TODO's

    • Implement vertical rhythm

Links

typography__h6--default

$typography__h6--default: (
+    font-size: modular-scale(2),
+) !default;

Description

  • Base styling for Heading 6

Type

Map

Example

Used in base/_typography.scss by the h6 element

h6 {
+   @include properties($typography__h6--default, $typography__h6);
+ }

See

TODO's

    • Implement vertical rhythm

Links

typography__p--default

$typography__p--default: (
+    margin: 0 0 modular-scale(1),
+) !default;

Description

  • Set up base typography for paragraphs

Type

Map

Example

Used in base/_typography.scss by the p element

p {
+   @include properties($typography__p--default, $typography__p);
+ }

See

TODO's

    • Implement vertical rhythm

Links

typography__emphasis--default

$typography__emphasis--default: (
+    font-style: italic,
+) !default;

Description

  • Base styling for emphasis elements

Type

Map

Example

Used in base/_typography.scss by the dfn, cite, em, i elements

dfn, cite, em, i {
+   @include properties($typography__emphasis--default, $typography__emphasis);
+ }

See

Links

typography__blockquote--default

$typography__blockquote--default: (
+    margin: 0 modular-scale(2),
+    quotes: '"\201c" "\201d" "\2018" "\2019"',
 
-  &:hover,
-  &:focus,
-  &:active {
-    background-color: color(action-active);
-  }
- }" data-collapsed="%button__primary { ... }">%button__primary { ... }

Description

Primary Button Styles.

Requires

button__secondary

Description
  • Base quote styles and spacing for blockquotes
Type
Map
Example
Used in base/_typography.scss by the blockquote element
blockquote {
+   @include properties($typography__blockquote--default, $typography__blockquote);
+ }
See
TODO's
    • Implement vertical rhythm
Links

typography__q--default

$typography__q--default: (
+    quotes: '"\201c" "\201d" "\2018" "\2019"',
 
-  @extend %button__generic;
-  background-color: inherit;
-  border: $base-border;
-  color: color(text);
-  font-weight: 600;
-  padding: em(7px) em($_spacing) em(9px);
+    '&::before': (
+        content: open-quote,
+    ),
+    '&::after': (
+        content: close-quote,
+    ),
+) !default;

Description

  • Base typography for quotations

Type

Map

Example

Used in base/_typography.scss by the q element

q {
+   @include properties($typography__q--default, $typography__q);
+ }

See

Links

typography__address--default

$typography__address--default: (
+    margin: 0 0 modular-scale(2),
+) !default;

Description

  • Base typography for address elements

Type

Map

Example

Used in base/_typography.scss by the address element

address {
+   @include properties($typography__address--default, $typography__address);
+ }

See

TODO's

    • Implement vertical rhythm

Links

typography__pre--default

$typography__pre--default: (
+  background: rgba(color(light-grey), .6),
+  font-family: $monospace-font-family,
+  font-size: em(16px),
+  line-height: $base-line-height,
+  margin-bottom: modular-scale(2),
+  max-width: 100%,
+  overflow: auto,
+  padding: 1.6em,
+  border: 1px solid color(grey),
+  white-space: pre-wrap,
+) !default;

Description

  • Base styling for preformatted text

Type

Map

Example

Used in base/_typography.scss by the pre element

pre {
+   @include properties($typography__pre--default, $typography__pre);
+ }

See

TODO's

    • Implement vertical rhythm

Links

typography__code--default

$typography__code--default: (
+  font-family: $monospace-font-family,
+  font-size: em(16px),
+  padding: modular-scale(-10) modular-scale(-5),
+  position: relative,
+  background-color: rgba(color(light-grey), .6),
+  border: 1px solid color(grey),
+) !default;

Description

  • Base styling for phrase tags

Type

Map

Example

Used in base/_typography.scss by the code, kbd, tt, var, samp elements

code, kbd, tt, var, samp {
+   @include properties($typography__code--default, $typography__code);
+ }

See

Links

typography__abbr--default

$typography__abbr--default: (
+  border-bottom: 1px dotted color(border),
+  cursor: help,
+) !default;

Description

  • Base styling for abbreviation and acronym tags

Type

Map

Example

Used in base/_typography.scss by the abbr, acronym elements

base, acronym {
+   @include properties($typography__abbr--default, $typography__abbr);
+ }

See

Links

typography__edits--default

$typography__edits--default: (
+  padding: 0 .25em .15em,
+) !default;

Description

  • Shared styling for document markup (insert, delete, mark).

Type

Map

Example

Used in base/_typography.scss by the mark, ins, del elements

mark, ins, del {
+   @include properties($typography__edits--default, $typography__edits);
+ }

See

typography__del--default

$typography__del--default: (
+  color: color(text),
+  background: color(light-red),
+  text-decoration: line-through,
+  text-decoration-color: color(red),
+) !default;

Description

  • Base documentation cut & paste template.

Type

Map

Example

Used in base/_typography.scss by the del element

del {
+   @include properties($typography__del--default, $typography__del);
+ }

See

Links

typography__ins--default

$typography__ins--default: (
+  color: color(text),
+  background: color(light-green),
+  text-decoration: none,
+) !default;

Description

  • Base styles for the ins element

Type

Map

Example

Used in base/_typography.scss by the ins ins

ins {
+   @include properties($typography__ins--default, $typography__ins);
+ }

See

Links

typography__mark--default

$typography__mark--default: (
+  color: color(text),
+  background: color(light-yellow),
+  text-decoration: none,
+) !default;

Description

  • Base styles for the mark element

Type

Map

Example

Used in base/_typography.scss by the mark mark

mark {
+  @include properties($typography__mark--default, $typography__mark);
+}

See

Links

typography__small-text--default

$typography__small-text--default: (
+  font-size: modular-scale(-1, $ratio: 1.125),
+) !default;

Description

  • Base styles for the small and .text-text elements

Type

Map

Example

Used in base/_typography.scss by the small' and.small-text` elements

text, .small-text {
+  @include properties($typography__small-text--default, $typography__small-text);
+}

See

Links

typography__large-text--default

Deprecated!
$typography__large-text--default: (
+  font-size: modular-scale(1),
+) !default;

Description

  • Base styles for the .large-text element

Note: The big element has been deprecated from the HTML spec. Use the .large-text class instead.

Type

Map

Example

Used in base/_typography.scss by the .large-text selector

.large-text {
+  @include properties($typography__large-text--default, $typography__large-text);
+}

See

Links

typography__hr--default

$typography__hr--default: (
+  border-top: 0,
+  border-right: 0,
+  border-bottom: $base-border,
+  border-left: 0,
+  margin: modular-scale(1) 0,
+) !default;

Description

  • Base styles for the hr element

Type

Map

Example

Used in base/_typography.scss by the hr element

hr {
+  @include properties($typography__hr--default, $typography__hr);
+}

See

TODO's

    • Implement vertical rhythm

Links

typography__a--default

$typography__a--default: (
+    color: color(action),
+    text-decoration: none,
 
-  &:hover,
-  &:focus,
-  &:active {
-    background-color: inherit;
-    border-color: color(action);
-    color: color(action);
-  }
- }" data-collapsed="%button__secondary { ... }">%button__secondary { ... }

Description

Secondary Button Styles.

Requires

csss

#{$all-buttons}

@css #{$all-buttons}() { ... }

base|forms

csss

fieldset

@css fieldset() { ... }

legend

@css legend() { ... }

label

@css label() { ... }

input, select, textarea

@css input,
-select,
-textarea() { ... }

textarea

@css textarea() { ... }

[type="checkbox"], [type="radio"]

@css [type="checkbox"],
-[type="radio"]() { ... }

[type="file"]

@css [type="file"]() { ... }

select

@css select() { ... }

base|lists

csss

ul.plain, ol.plain

@css ul.plain,
-ol.plain() { ... }

dl.plain

@css dl.plain() { ... }

dt.plain

@css dt.plain() { ... }

dd.plain

@css dd.plain() { ... }

ul, ol

@css ul,
-ol() { ... }

ul

@css ul() { ... }

ol

@css ol() { ... }

li > ul, li > ol

@css li > ul,
-li > ol() { ... }

dl

@css dl() { ... }

dt

@css dt() { ... }

dd

@css dd() { ... }

base|tables

csss

table

@css table() { ... }

th

@css th() { ... }

td

@css td() { ... }

Typography

csss

body

@css body() { ... }

#{$all-headlines}

@css #{$all-headlines}() { ... }

h2

@css h2() { ... }

h3

@css h3() { ... }

h4

@css h4() { ... }

h5

@css h5() { ... }

h6

@css h6() { ... }

p

@css p() { ... }

blockquote, q

@css blockquote, q() { ... }

address

@css address() { ... }

pre

@css pre() { ... }

code, kbd, tt, var

@css code, kbd, tt, var() { ... }

abbr, acronym

@css abbr, acronym() { ... }

del

@css del() { ... }

ins

@css ins() { ... }

mark

@css mark() { ... }

small, .small-text

@css small,
-.small-text() { ... }

big, .large-text

@css big,
-.large-text() { ... }

a

@css a() { ... }
\ No newline at end of file + #{$hocus}: ( + color: color(action-active), + text-decoration: underline, + ), +) !default;

Description

Type

Map

Example

Used in base/_typography.scss by the a element

a {
+  @include properties($typography__a--default, $typography__a);
+}

See

Links

\ No newline at end of file diff --git a/docs/components/index.html b/docs/components/index.html index ae4874176..b5cfc9859 100644 --- a/docs/components/index.html +++ b/docs/components/index.html @@ -1,2 +1,2 @@ Decanter - v0.1.0-alpha1

General

csss

.sr-only-text

@css .sr-only-text() { ... }
\ No newline at end of file +">

Seems like nothing has been documented yet!

\ No newline at end of file diff --git a/docs/core/index.html b/docs/core/index.html index 2c10f9e10..144486545 100644 --- a/docs/core/index.html +++ b/docs/core/index.html @@ -1,5 +1,637 @@ Decanter - v0.1.0-alpha1

core functions

functions

color

Decanter Settings
variables
root-font-size
$root-font-size: 10px !default;
Description
Root font size in pixels. Used for converting rem to pixels.
Type
Number or Pixel measurement
Used by
base-font-size
$base-font-size: 18px !default;
Description
Base font size in pixels. Used for converting between em and absolute lengths.
Type
Number or Pixel measurement
Used by
grid-columns
$grid-columns: 12 !default;
Description
Grid Columns How many columns in the default grid
Type
Number
Used by
gutter
$gutter: 20px !default;
Description
Gutter The space on the left and right of default grid elements
Type
Number or Pixel measurement
max-container-width
$max-container-width: 1200px !default;
Type
Number or Pixel measurement
Used by
max-content-width
$max-content-width: $max-container-width - ($gutter * 2) !default;
Description
Max Content Width Removes gutters from the max-container-width constant to give us a computed content-width.
Type
Number or Pixel measurement
breakpoint-helper
$breakpoint-helper: true;
Description
Breakpoint Helper. Generates a set of configurable breakpoint visual prompts to aid during development.
Type
Bool
Bourbon Settings
variables
bourbon
$bourbon: (
+    "modular-scale-ratio": 1.25,
+) !default;
Description
Bourbon Settings
Bourbon default overrides for decanter.
Type
Map
Map structure
NameDescriptionTypeValue
contrast-switch-dark-color
Global dark color for the contrast-switch function.
Color#000
contrast-switch-light-color
Global light color for the contrast-switch function.
Color#fff
global-font-file-formats
Global font file formats for the font-face mixin.
List("ttf", "woff2", "woff")
modular-scale-base
Global base value for the modular-scale function.
Number or Em measurement1em
{number$default-theme-group:
( default: ( palette: $colors, selector: '&' ), ) !default;} modular-scale-ratio [$major-third (1.25)] Global base ratio for the modular-scale function.
Map—
rails-asset-pipeline
Set this to true when using the Rails Asset Pipeline and Bourbon will write asset paths using sass-rails’ asset helpers.
Booleanfalse
Example
$bourbon: (
+  "contrast-switch-dark-color": #000,
+  "contrast-switch-light-color": #fff,
+  "global-font-file-formats": ("ttf", "woff2", "woff"),
+  "modular-scale-base": 1em,
+  "modular-scale-ratio": $major-third,
+  "rails-asset-pipeline": false,
+);
Links
Neat Settings
variables
neat-grid
$neat-grid: (
+    columns: $grid-columns,
+    gutter:  $gutter,
+    media: null,
+    color: rgba(#00d4ff, 0.25),
+    direction: ltr,
+) !default;
Description
This variable is a sass map that overrides Neat's default grid settings. Use this to define your project's grid properties incluting gutters and total column count.
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)12
gutter
Default grid gutter width between columns.
Number (with unit)20px
media
Grid media query.
String or Number (with unit)null
color
Default visual grid color.
Colorrgba(#00d4ff, 0.25)
Example
SCSS
$neat-grid: (
+  columns: 12,
+  gutter: 20px,
+);
Used by
Links
Animation & Transition Variables
variables
base-property
$base-property: all !default;
Description
Base property animation default.
base-delay
$base-delay: null !default;
Description
Base delay animation default.
base-duration
$base-duration: 250ms !default;
Description
Base duration animation default.
Used by
base-timing
$base-timing: ease-in-out !default;
Description
Base timing animation default.
Used by
base-transition
$base-transition: $base-property $base-duration $base-timing !default;
Description
Base transition animation default.
Used by
Border Variables
variables
base-border-radius
$base-border-radius: 3px !default;
Description
Base border radius.
Used by
base-border
$base-border: 1px solid color(border) !default;
Description
Base Border.
Requires
Used by
Breakpoint Variables
variables
screen-xs-min
$screen-xs-min: 0px !default;
Description
Lower Boundary for extra small screens
Type
Variable
Used by
screen-sm-min
$screen-sm-min: 576px !default;
Description
Lower boundary for small screens
Type
Variable
Used by
screen-md-min
$screen-md-min: 768px !default;
Description
Lower boundary for medium screens
Type
Variable
Used by
screen-lg-min
$screen-lg-min: 992px !default;
Description
Lower boundary for large screens
Type
Variable
Used by
screen-xl-min
$screen-xl-min: $max-container-width !default;
Description
Lower boundary for extra large screens
Type
Variable
Used by
screen-xs-max
$screen-xs-max: $screen-sm-min - 1px !default;
Description
Upper boundary for extra small screens
Type
Variable
Requires
Used by
screen-sm-max
$screen-sm-max: $screen-md-min - 1px !default;
Description
Upper boundary for small screens
Type
Variable
Requires
Used by
screen-md-max
$screen-md-max: $screen-lg-min - 1px !default;
Description
Upper boundary for medium screens
Type
Variable
Requires
Used by
screen-lg-max
$screen-lg-max: $screen-xl-min - 1px !default;
Description
Upper boundary for large screens
Type
Variable
Requires
Used by
Button Variables
variables
base-button
$base-button: (
+  box-shadow: material-shadow(flat),
+  appearance: none,
+  background-color: color(action),
+  border: none,
+  color: color(reverse-text),
+  cursor: pointer,
+  display: inline-block,
+  font-family: $base-font-family,
+  font-size: inherit,
+  -webkit-font-smoothing: antialiased,
+  font-weight: inherit,
+  line-height: $base-line-height,
+  padding: em(6px) em($small-spacing) em(7px),
+  text-align: center,
+  text-decoration: none,
+  user-select: none,
+  vertical-align: middle,
+  transition: $base-transition,
+
+  '#{$hocus}': (
+    background-color: color(action--active),
+    color: color(reverse-text--active),
+    text-decoration: none,
+  ),
+
+  '&:disabled, &.disabled': (
+    background-color: color(action),
+    color: color(reverse-text),
+    cursor: not-allowed,
+    opacity: .5,
+
+    '&:hover': (
+      cursor: not-allowed,
+    ),
+  ),
+) !default;
Description
This variable is a sass map that overrides our generic button map.
Requires
Used by
secondary-button
$secondary-button: (
+  background-color: inherit,
+  border: $base-border,
+  color: color(text),
+  font-weight: 600,
+  padding: em(7px) em($base-spacing) em(9px),
+
+  '#{$hocus}': (
+    background-color: inherit,
+    border-color: color(action),
+    color: color(action),
+  ),
+) !default;
Requires
Used by
Color Variables
variables
colors
$colors: (
+    brand:                        #004fdc,
+    action:                       #006cb8,
+    action--active:               #33548F,
+    background:                   #fff,
+    background--secondary:        #ddd,
+    border:                       #999,
+    text:                         #112,
+    text--active:                 #808080,
+    reverse-text:                 #fff,
+    reverse-text--active:         #dceefe,
+) !default;
Description
This variable is a sass map that overrides our generic color map. Use this to define your project's color palette.
Type
Map
Map structure
NameDescriptionTypeValue
brand
Brand Color
Color#004fdc
action
Action Color (such as links)
Color#33548F
action--active
Action Color (when in hover, active and focus states)
Color#33548F
background
Background color
Color#fff
background--secondary
Secondary Background Color
Color#ddd
border
Border Color
Color#999
text
Text color
Color#112
text--active
Text Color (when interacted with. This is an edge case)
Color$808080
reverse-text
Reverse Text Color (when the background is a dark color)
Color#fff
reverse-text--active
Reverse Text Color (when in hover, active and focus states)
Color#dceefe
Used by
custom-color-palette
$custom-color-palette: ()!default;
Description
If you would like to have multiple color palettes in a single project, you can do this by defining a new map stored within a variable of your choosing. This variable can then be passed directly to the color() function, such as color(red, $my-custom-colors). Note that you don't need to define any colors that you want to default to the default color map, and colors that don't exist in the color map will be defined in your custom color palette only.
Type
Map
Map structure
NameDescriptionTypeValue
brand
Brand Color
Color#004fdc
action
Action Color (such as links)
Color#004991
action--active
Action Color (when in hover, active and focus states)
Color#005ddc
background
Background color
Color#fff
background--secondary
Secondary Background Color
Color#ddd
border
Border Color
Color#999
text
Text color
Color#112
text--active
Text Color (when interacted with. This is an edge case)
Color$808080
reverse-text
Reverse Text Color (when the background is a dark color)
Color#fff
reverse-text--active
Reverse Text Color (when in hover, active and focus states)
Color#dceefe
Container Variables
variables
default-container
$default-container: (
+  xs: ( columns: 12, grid-media: $media-xs-only,  v-space: 1em, max-width: false, grid-collapse: false ),
+  sm: ( columns: 12, grid-media: $media-sm-only,  v-space: 1em, max-width: false, grid-collapse: false ),
+  md: ( columns: 12, grid-media: $media-md-only,  v-space: 1em, max-width: false, grid-collapse: false ),
+  lg: ( columns: 12, grid-media: $media-lg-only,  v-space: 1em, max-width: false, grid-collapse: false ),
+  xl: ( columns: 12, grid-media: $media-xl,       v-space: 1em, max-width: true,  grid-collapse: false ),
+  print: ( columns: 12, grid-media: $media-print, v-space: 1em, max-width: false, grid-collapse: false ),
+) !default;
Description
Default Responsive Container
The deafult responsive container map for the responsive-container mixin.
Type
Map
Map structure
NameDescriptionTypeValue
xs
Global dark color for the contrast-switch function.
Map—
sm
Global light color for the contrast-switch function.
Map—
md
Global font file formats for the font-face mixin.
Map—
lg
Global base value for the modular-scale function.
Map—
xl
balhs
Map—
print
Set this to true when using the Rails Asset Pipeline and Bourbon will
Map—
Example
$bourbon: (
+  "contrast-switch-dark-color": #000,
+  "contrast-switch-light-color": #fff,
+  "global-font-file-formats": ("ttf", "woff2", "woff"),
+  "modular-scale-base": 1em,
+  "modular-scale-ratio": $major-third,
+  "rails-asset-pipeline": false,
+);
See
default-container--collapsed
$default-container--collapsed: (
+  xs: ( columns: 12, grid-media: $media-xs-only,  v-space: 1em, max-width: false, grid-collapse: true ),
+  sm: ( columns: 12, grid-media: $media-sm-only,  v-space: 1em, max-width: false, grid-collapse: true ),
+  md: ( columns: 12, grid-media: $media-md-only,  v-space: 1em, max-width: false, grid-collapse: true ),
+  lg: ( columns: 12, grid-media: $media-lg-only,  v-space: 1em, max-width: false, grid-collapse: true ),
+  xl: ( columns: 12, grid-media: $media-xl,       v-space: 1em, max-width: true,  grid-collapse: true ),
+  print: ( columns: 12, grid-media: $media-print, v-space: 1em, max-width: false, grid-collapse: true ),
+) !default;
custom-container
$custom-container: () !default;
Description
You can create any number of custom responsive containers
Form Variables
variables
form-box-shadow
$form-box-shadow: inset 0 1px 3px rgba(color(black), 0.06) !default;
Description
Default form box-shadow
Requires
Used by
form-box-shadow--focus
$form-box-shadow--focus: $form-box-shadow, 0 0 5px adjust-color(color(blue), $lightness: -5%, $alpha: -0.3) !default;
Description
Default focused form box-shadow
Requires
Links
Grid Media Variables
variables
media-xs
$media-xs: (
+    media: $screen-xs-min,
+) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)$screen-xs-min
Requires
Links
media-xs-only
$media-xs-only: (
+    media: 'only screen and (max-width: #{$screen-xs-max})',
+) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)'only screen and (max-width: $screen-xs-max)'
Requires
Links
media-xs-max
$media-xs-max: (
+    media: 'only screen and (max-width: #{$screen-xs-max})',
+) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)'only screen and (max-width: $screen-xs-max)'
Requires
Links
media-sm
$media-sm: (
+    media: $screen-sm-min,
+) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)$screen-sm-min
Requires
Links
media-sm-only
$media-sm-only: (
+    media: 'only screen and (min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max})',
+) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)'only screen and (min-width: $screen-sm-min) and (max-width: $screen-sm-max)'
Requires
Links
media-sm-max
$media-sm-max: (
+    media: 'only screen and (max-width: #{$screen-sm-max})',
+) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)'only screen and (max-width: $screen-sm-max)'
Requires
Links
media-md
$media-md: (
+    media: $screen-md-min,
+) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
$screen-md-min]
Grid media query.
String or Number (with unit)—
Requires
Links
media-md-only
$media-md-only: (
+    media: 'only screen and (min-width: #{$screen-md-min}) and (max-width: #{$screen-md-max})',
+) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)'only screen and (min-width: $screen-md-min) and (max-width: $screen-md-max)'
Requires
Links
media-md-max
$media-md-max: (
+    media: 'only screen and (max-width: #{$screen-md-max})',
+) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)'only screen and (max-width: $screen-md-max)'
Requires
Links
media-lg
$media-lg: (
+    media: $screen-lg-min,
+) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
$screen-lg-min]
Grid media query.
String or Number (with unit)—
Requires
Links
media-lg-only
$media-lg-only: (
+    media: 'only screen and (min-width: #{$screen-lg-min}) and (max-width: #{$screen-lg-max})',
+) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)'only screen and (min-width: $screen-lg-min) and (max-width: $screen-lg-max)'
Requires
Links
media-lg-max
$media-lg-max: (
+    media: 'only screen and (max-width: #{$screen-lg-max})',
+) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)'only screen and (max-width: $screen-lg-max)'
Requires
Links
media-xl
$media-xl: (
+    media: $screen-xl-min,
+) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
$screen-xl-min]
Grid media query.
String or Number (with unit)—
Requires
Links
media-print
$media-print: (
+    columns: 12,
+    gutter: .25in,
+    media: 'only print',
+) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)12
gutter
Default grid gutter width between columns.
Number (with unit).25in
'only
print'] Grid media query.
String or Number (with unit)—
Used by
Links
Typography Variables
variables
base-fonts
$base-fonts: (
+  monospace:    'https://fonts.googleapis.com/css?family=Source+Code+Pro',
+  sans-serif:   'https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i',
+  serif:        'https://fonts.googleapis.com/css?family=Noto+Serif:400,400i,700,700i',
+) !default;
base-font-families
$base-font-families: (
+  monospace:  "'Source Code Pro', #{$font-stack-monaco}",
+  sans-serif: "'Noto Sans', #{$font-stack-helvetica}",
+  serif:      "'Noto Serif', #{$font-stack-georgia}"
+) !default;
base-font-family
$base-font-family: unquote(map-get($base-font-families, sans-serif)) !default;
Description
Base Font Family Setting.
Used by
heading-font-family
$heading-font-family: unquote(map-get($base-font-families, serif)) !default;
Description
Heading Font Family.
Used by
monospace-font-family
$monospace-font-family: unquote(map-get($base-font-families, monospace)) !default;
Description
Monospace Font Family.
Used by
base-line-height
$base-line-height: 1.5 !default;
Description
Base Line Height.
Used by
TODO's
  • find out where this is used and let people know. I assume everywhere.
heading-line-height
$heading-line-height: 1.2 !default;
Description
Heading Line Height.
Used by
TODO's
  • find out where this is used and let people know. I assume everywhere.
all-headlines
$all-headlines: 'h1, h2, h3, h4, h5, h6' !default;
Description
All Headlines selector
Note: This selector must be used with variable interpolation when used to declare an element.
Example
Use Documentation
#{$all-headlines} {
+  font-weight: bold;
+}
Output
h1, h2, h3, h4, h5, h6 {
+  font-weight: bold;
+}
Used by
Links
hocus
$hocus: '&:hover, &:active, &:focus' !default;
Description
hover, active, focus pseudo-class variable
Note: This selector must be used with variable interpolation when used to declare an element.
Example
Use Documentation
#{$hocus} {
+  font-weight: bold;
+}
Output
&:hover, &:active, &:focus {
+  font-weight: bold;
+}
Used by
Links
pocus
$pocus: '&:hover, &:focus' !default;
Description
hover, focus pseudo-class variable
Note: This pseudo-class must be used with variable interpolation when used to declare an element.
Example
Use Documentation
#{$pocus} {
+  font-weight: bold;
+}
Output
&:hover, &:focus {
+  font-weight: bold;
+}
Links
Vertical Rhythm Variables
variables
base-spacing
$base-spacing: modular-scale(0) !default;
Description
Base vertical spacing. Uses the bourbon function modular-scale to produce an em size.
Type
String
Example
$_spacing: $base-spacing; // 1.77689em
Used by
Links
small-spacing
$small-spacing: modular-scale(-1) !default;
Description
Small vertical spacing. Uses the bourbon function modular-scale to produce an em size.
Type
String
Example
$_spacing: $small-spacing; // 0.75019em
Used by
Links
Documentation for Base
variables
group__element--default
$group__element--default: (
+    property1: value1,
+    property2: value2,
+    property3: value3,
+  // etc...
+)!default;
Description
Default Element Map
This map generates the default property: value pairs for a given CSS element.
In Decanter, the intended use case for the base/ --default variables is to output a set of normalized HTML properties.
To change the output of base, modify it's corresponding group__element map in your own project, which will be merged with the default map so you don't have to re-declare properties.
There may be some cases in which you want to completely override the group__element--default map, if that's the case, you should also do this in your own project's variables.
Note: Due to the way key:value pairs work in SCSS maps, you can only declare one property per map. This means edge cases where you want to output fallbacks for a property should probably be handled in a different way.
Second Note: When merging nested maps, the map merge will replace the value of the entire nested map. This is a limitation of Sass's implementation. This means if you want to replace a single property in a :before nested declaration, for example, you'll have to redeclare the entire element in the override map.
This pattern applies to all default variable maps in base/
Type
Map
Example
SCSS - Default element map
group__element--default: (
+  property1: value1,
+  property2: value2,
+  property3: value3,
+  // etc...
+)!default;
CSS - Default Output
element {
+  property1: value1;
+  property2: value2;
+  property3: value3;
+  // etc...
+}
Used by
See
group__element
$group__element: (
+    property1: my-value1,
+    property3: null,
+    my-new-property: my-new-value,
+  // ...
+)!default;
Description
Element Map
This map generates property: value overrides for it's corresponding --default map.
In base.scss, the intended use case for this map is to serve as a hook to modify the base styling generated by decanter, so you would declare this variable in your own project before importing base
You will notice that on the base decanter project, all of these are empty placeholder maps. This is by design.
This pattern applies to all variable maps in base/
Type
Map
Example
Default element map
group__element--default: (
+  property1: value1,
+  property2: value2,
+  property3: value3,
+  // etc...
+)!default;
Element map
$group__element: (
+  property1: my-value1,
+  property3: null, // By explicitly declaring a
+                   // null value in the merged map,
+                   // we can suppress this property
+  my-new-property: my-new-value,
+  // etc...
+}
Merged SCSS Output
element {
+  property1: my-value1;
+  property2: value2;
+  my-new-property: my-new-value;
+  // etc...
+}
Used by
See
lists__eelement--default
$lists__eelement--default: () !default;
Description
  • Base documentation cut & paste template.
  • Base styles for the eelement element
Type
Map
Example
Used in base/_lists.scss by the eelement element
eelement {
+  @include properties($lists__eelement--default, $typography__eelement);
+}
See
TODO's
  • --
Links
placeholders
element
%element { ... }
Description
CSS Elements in base are generated via the properties() mixin, which merges the above maps and outputs the corresponding css
Example
In use throughout base/:
element {
+  @include properties($group__element--default, $group__element);
+}
Requires
See
Body
variables
body__body--default
$body__body--default: (
+    min-height: 100vh,
+    display: flex,
+    flex-direction: column,
+    overflow-x: hidden,
+    margin: 0,
+) !default;
Description
  • Default body element styling
Type
Map
Example
Used in base/_body.scss by the body element
body {
+  @include properties($body__body--default, $body__body);
+}
See
Links
body__body-header--default
$body__body-header--default: (
+  order: -50
+) !default;
Description
  • Set up source order for mobile first approach
Type
Map
Example
Used in base/_body.scss by the body > header element
body > header {
+  @include properties($body__body-header--default, $body__body-header);
+}
See
Links
body__body-nav--default
$body__body-nav--default: (
+  order: -40,
+) !default;
Description
  • Set up source order for mobile first approach
Type
Map
Example
Used in base/_body.scss by the body > nav element
body > nav {
+  @include properties($body__body-nav--default, $body__body-nav);
+}
See
Links
body__body-main--default
$body__body-main--default: (
+  order: 1,
+  overflow: hidden,
+  background-color: color(background),
+  flex: 1,
+
+  '@media print': (
+    background: transparent,
+  ),
+) !default;
Description
  • Set up source order for mobile first approach
  • Set up basic properties for the main element
Type
Map
Example
Used in base/_body.scss by the body > main, body > #main elements
body > main {
+  @include properties(body__body-main--default, body__body-main);
+}
See
Links
body__body-footer--default
$body__body-footer--default: (
+  order: 50,
+) !default;
Description
  • Set up source order for mobile first approach
Type
Map
Example
Used in base/_body.scss by the body > footer element
body > main {
+  @include properties(body__body-footer--default, body__body-footer);
+}
See
Links
Box Model
variables
box-model__html--default
$box-model__html--default: (
+  box-sizing: border-box,
+)!default;
Description
  • Set up box model for the root element
Type
Map
Example
Used in base/_box-model.scss by the html root element
html {
+  box-sizing: border-box;
+}
See
Links
box-model__box-sizing--default
$box-model__box-sizing--default: (
+  box-sizing: inherit,
+) !default;
Description
  • Make all elements from the DOM inherit from the parent box-sizing
  • Since * has a specificity of 0, it does not override the html value, making all elements inheriting from the root box-sizing value
Type
Map
Example
Used in base/_box-model.scss by the *, *::before, *::after elements
*, *::before, *::after {
+  @include properties(box-model__box-sizing--default, box-model__box-sizing);
+}
See
Links
Buttons
placeholders
button__generic
%button__generic { ... }
Description
Generic Button Styles.
Requires
Used by
See
button__primary
%button__primary { ... }
Description
Primary Button Styles.
Requires
See
button__secondary
%button__secondary { ... }
Description
Secondary Button Styles.
Requires
See
csss
#{$all-buttons}
@css #{$all-buttons}() { ... }
Forms
variables
forms__fieldset--default
$forms__fieldset--default: (
+background-color: transparent,
+border: 0,
+margin: 0,
+padding: 0,
+) !default;
Description
  • Base styles for the fieldset element
Type
Map
Example
Used in base/_forms.scss by the fieldset element
fieldset {
+  @include properties($forms__fieldset--default, $typography__fieldset);
+}
See
TODO's
forms__legend--default
$forms__legend--default: (
+    font-weight: 600,
+    margin-bottom: $small-spacing / 2,
+    padding: 0,
+) !default;
Description
  • Base styles for the legend element
Type
Map
Requires
Example
Used in base/_forms.scss by the legend element
legend {
+  @include properties($forms__legend--default, $typography__legend);
+}
See
Links
forms__label--default
$forms__label--default: (
+    display: block,
+    font-weight: 600,
+    margin-bottom: $small-spacing / 2,
+) !default;
Description
  • Base documentation cut & paste template.
  • Base styles for the label element
Type
Map
Requires
Example
Used in base/_forms.scss by the label element
label {
+  @include properties($forms__label--default, $typography__label);
+}
+
See
Links
forms__input--default
$forms__input--default: (
+    display: block,
+    font-family: $base-font-family,
+) !default;
Description
  • Base documentation cut & paste template.
  • Base styles for the input, select and textarea elements
Type
Map
Requires
Example
Used in base/_forms.scss by the input element
input,
+select,
+textarea {
+  @include properties($forms__input--default, $typography__input);
+}
See
Links
forms__all-text-inputs--default
$forms__all-text-inputs--default: (
+    appearance: none,
+    background-color: color(background),
+    border: $base-border,
+    border-radius: $base-border-radius,
+    box-shadow: $form-box-shadow,
+    box-sizing: border-box,
+    margin-bottom: $base-spacing,
+    padding: $base-spacing / 3,
+    transition: border-color $base-duration $base-timing,
+    width: 100%,
+
+    #{$hocus}: (
+        border-color: shade(color(border), 20%),
+    ),
+    '&:disabled': (
+        background-color: shade(color(background), 5%),
+        cursor: not-allowed,
+
+        '&:hover': (
+            border: $base-border,
+        ),
+    ),
+
+    '&::placeholder': (
+        color: tint(color(text), 40%),
+    ),
+) !default;
Description
  • Base styles for the #{}all-text-inputs} element
Type
Map
Requires
Example
Used in base/_forms.scss by all text inputs element
#{$all-text-inputs} {
+  @include properties($forms__all-text-inputs--default, $typography__all-text-inputs);
+}
See
Links
forms__textarea--default
$forms__textarea--default: (
+    resize: vertical,
+) !default;
Description
  • Base styles for the textarea element
Type
Map
Example
Used in base/_forms.scss by the textarea element
textarea {
+  @include properties($forms__textarea--default, $typography__textarea);
+}
See
Links
forms__radiocheck--default
$forms__radiocheck--default: (
+    display: inline,
+    margin-right: $small-spacing / 2,
+) !default;
Description
  • Base styles for the [type="checkbox"] and [type="radio"] input elements
Type
Map
Requires
Example
Used in base/_forms.scss by the [type="checkbox"] and [type="radio"] elements
[type="checkbox"],
+[type="radio"]  {
+
+  @include properties($forms__radiocheck--default, $typography__radiocheck);
+}
See
Links
forms__input-file--default
$forms__input-file--default: (
+    margin-bottom: $small-spacing,
+    width: 100%,
+) !default;
Description
  • Base styles for the [type="file"] input element
Type
Map
Requires
Example
Used in base/_forms.scss by the [type="file"] element
[type="file"] {
+  @include properties($forms__input-file--default, $typography__input-file);
+}
See
Links
forms__select--default
$forms__select--default: (
+    margin-bottom: $small-spacing,
+    width: 100%,
+) !default;
Description
  • Base styles for the select element
Type
Map
Requires
Example
Used in base/_forms.scss by the select element
select {
+  @include properties($forms__select--default, $typography__select);
+}
See
Links
Lists
variables
lists__plain--default
$lists__plain--default: (
+  font-weight: normal,
+  list-style-type: none,
+  margin: 0,
+  padding: 0,
+) !default;
Description
  • Base styles for plain lists
Example
Used in base/_lists.scss by the .plain class
ul.plain,
+ol.plain,
+dl.plain,
+dt.plain {
+  @include properties($lists__plain--default, $typography__plain);
+}
Links
lists__lists--default
$lists__lists--default: (
+  margin: 0 0 modular-scale(0) modular-scale(1),
+  padding-left: 0,
+  li: (
+    margin-bottom: modular-scale(-5),
+  ),
+) !default;
Description
  • Base styles for the ul and ol elements
Example
Used in base/_lists.scss by the ul and ol elements
ul,
+ol {
+  @include properties($lists__lists--default, $typography__lists);
+}
TODO's
  • implement vertical rhythm
Links
lists__ul--default
$lists__ul--default: (
+  list-style: disc,
+  ul: (
+    list-style: circle,
+    ul: (
+        list-style: square,
+    ),
+  ),
+) !default;
Description
  • Base styles for the ul element
Example
Used in base/_lists.scss by the ul element
ul {
+  @include properties($lists__ul--default, $typography__ul);
+}
TODO's
  • implement vertical rhythm
Links
lists__ol--default
$lists__ol--default: (
+  list-style: decimal,
+
+  li: (
+    padding-left: em(4px),
+    margin-left: em(-4px),
+  ),
+
+  ol: (
+    list-style: upper-alpha,
+    ol: (
+      list-style: lower-roman,
+      ol: (
+        list-style: lower-alpha,
+      ),
+    ),
+  ),
+) !default;
Description
  • Base styles for the ol element
Requires
  • [function] em
Example
Used in base/_lists.scss by the ol element
ol {
+  @include properties($lists__ol--default, $typography__ol);
+}
TODO's
  • implement vertical rhythm
Links
lists__nested-lists--default
$lists__nested-lists--default: (
+  margin-top: modular-scale(-5),
+  margin-bottom: modular-scale(-5),
+  margin-left: modular-scale(1),
+) !default;
Description
  • Base styles for nested-lists
Example
Used in base/_lists.scss by the li > ul and li > ol elements
li > ul,
+li > ol {
+  @include properties($lists__nested-lists--default, $typography__nested-lists);
+}
lists__dl--default
$lists__dl--default: (
+    margin: 0 0 modular-scale(-5),
+) !default;
Description
  • Base styles for the dl element
Example
Used in base/_lists.scss by the dl element
  dl {
+    @include properties($lists__dl--default, $typography__dl);
+  }
+
+todo implement vertical rhythm
Links
lists__dt--default
$lists__dt--default: (
+    font-weight: 600,
+) !default;
Description
  • Base documentation cut & paste template.
  • Base styles for the dt element
Example
Used in base/_lists.scss by the dt element
dt {
+  @include properties($lists__dt--default, $typography__dt);
+}
TODO's
  • implement vertical rhythm
Links
lists__dd--default
$lists__dd--default: (
+    margin: 0 0 $base-spacing,
+) !default;
Description
  • Base documentation cut & paste template.
  • Base styles for the dd element
Requires
Example
Used in base/_lists.scss by the dd element
dd {
+  @include properties($lists__dd--default, $typography__dd);
+}
TODO's
  • implement vertical rhythm
Links
Media Elements
variables
media-elements__images--default
$media-elements__images--default: (
+  width: auto,
+  max-width: 100%,
+  height: auto,
+  margin: 0,
+) !default;
Description
  • Base styles for the img, picture, figure elements
Type
Map
Example
Used in base/_media-elements.scss by the img, picture, figure elements
img,
+picture,
+figure {
+  @include properties($media-elements__images--default, $typography__images);
+}
See
TODO's
  • implement vertical rhythm
Links
Tables
variables
tables__table--default
$tables__table--default: (
+    border-collapse: collapse,
+    margin: $small-spacing 0,
+    table-layout: fixed,
+    width: 100%,
+) !default;
Description
  • Base styles for the table element
Type
Map
Requires
Example
Used in base/_tables.scss by the table element
table {
+  @include properties($tables__table--default, $typography__table);
+}
See
TODO's
    • Implement vertical rhytm
Links
tables__th--default
$tables__th--default: (
+    border-bottom: 1px solid shade(color(border), 25%),
+    font-weight: 600,
+    padding: $small-spacing 0,
+    text-align: left,
+) !default;
Description
  • Base styles for the th element
Type
Map
Requires
Example
Used in base/_tables.scss by the th element
th {
+  @include properties($tables__th--default, $typography__th);
+}
See
Links
tables__td--default
$tables__td--default: (
+    border-bottom: $base-border,
+    padding: $small-spacing 0,
+) !default;
Description
  • Base styles for the td element
Type
Map
Requires
Example
Used in base/_tables.scss by the td element
td {
+  @include properties($tables__td--default, $typography__td);
+}
See
Links
tables__tr-td-th--default
$tables__tr-td-th--default: (
+    vertical-align: middle,
+) !default;
Description
  • Base styles shared by the tr, td, th elements
Type
Map
Example
Used in base/_tables.scss by the tr, td, th elements
tr,
+td,
+th {
+  @include properties($tables__tr-td-th--default, $typography__tr-td-th);
+}
See
Links
Typography
variables
typography__html--default
$typography__html--default: (
+    font-size: percentage($root-font-size/16px),
+) !default;
Description
  • Set the root body font size
  • Since most browsers default their normal font size to 16px, we use that as the basis for our percentage calculation, using the declared $root-font-size variable.
Type
Map
Requires
Example
Used in base/_typography.scss by the html root element
html {
+   @include properties($typography__html--default, $typography__html);
+ }
See
typography__body--default
$typography__body--default: (
+    line-height: $base-line-height,
+    font-family: $base-font-family,
+    font-size: em($base-font-size, $root-font-size),
+) !default;
Description
  • Base styling for body (line-height, font-family, font-size)
Type
Map
Requires
Example
Used in base/_typography.scss by the body element
body {
+   @include properties($typography__body--default, $typography__body);
+ }
See
TODO's
    • Implement vertical rhythm
Links
typography__headlines--default
$typography__headlines--default: (
+    font-family: $heading-font-family,
+    font-weight: 700,
+    line-height: $heading-line-height,
+    margin: modular-scale(-1) 0 modular-scale(-3),
+) !default;
Description
  • Base styling for all heading levles
Type
Map
Requires
Example
Used in base/_typography.scss by the #{all-headlines} variable
#{$all-headlines} {
+   @include properties($typography__headlines--default, $typography__headlines);
+ }
See
TODO's
    • Implement vertical rhythm
Links
typography__h1--default
$typography__h1--default: (
+    font-size: modular-scale(5),
+) !default;
Description
  • Base styling for Heading 1
Type
Map
Example
Used in base/_typography.scss by the h1 element
h1 {
+   @include properties($typography__h1--default, $typography__h1);
+ }
See
TODO's
    • Implement vertical rhythm
Links
typography__h2--default
$typography__h2--default: (
+  font-size: modular-scale(4),
+) !default;
Description
  • Base styling for Heading 2
Type
Map
Example
Used in base/_typography.scss by the h2 element
h2 {
+   @include properties($typography__h2--default, $typography__h2);
+ }
See
TODO's
    • Implement vertical rhythm
Links
typography__h3--default
$typography__h3--default: (
+    font-size: modular-scale(3),
+) !default;
Description
  • Base styling for Heading 3
Type
Map
Example
Used in base/_typography.scss by the h3 element
h3 {
+   @include properties($typography__h3--default, $typography__h3);
+ }
See
TODO's
    • Implement vertical rhythm
Links
typography__h4--default
$typography__h4--default: (
+    font-size: modular-scale(2),
+) !default;
Description
  • Base styling for Heading 4
Type
Map
Example
Used in base/_typography.scss by the h4 element
h4 {
+   @include properties($typography__h4--default, $typography__h4);
+ }
See
TODO's
    • Implement vertical rhythm
Links
typography__h5--default
$typography__h5--default: (
+    font-size: modular-scale(2),
+) !default;
Description
  • Base styling for Heading 5
Type
Map
Example
Used in base/_typography.scss by the h5 element
h5 {
+   @include properties($typography__h5--default, $typography__h5);
+ }
See
TODO's
    • Implement vertical rhythm
Links
typography__h6--default
$typography__h6--default: (
+    font-size: modular-scale(2),
+) !default;
Description
  • Base styling for Heading 6
Type
Map
Example
Used in base/_typography.scss by the h6 element
h6 {
+   @include properties($typography__h6--default, $typography__h6);
+ }
See
TODO's
    • Implement vertical rhythm
Links
typography__p--default
$typography__p--default: (
+    margin: 0 0 modular-scale(1),
+) !default;
Description
  • Set up base typography for paragraphs
Type
Map
Example
Used in base/_typography.scss by the p element
p {
+   @include properties($typography__p--default, $typography__p);
+ }
See
TODO's
    • Implement vertical rhythm
Links
typography__emphasis--default
$typography__emphasis--default: (
+    font-style: italic,
+) !default;
Description
  • Base styling for emphasis elements
Type
Map
Example
Used in base/_typography.scss by the dfn, cite, em, i elements
dfn, cite, em, i {
+   @include properties($typography__emphasis--default, $typography__emphasis);
+ }
See
Links
typography__blockquote--default
$typography__blockquote--default: (
+    margin: 0 modular-scale(2),
+    quotes: '"\201c" "\201d" "\2018" "\2019"',
+
+    '&::before': (
+      content: open-quote,
+    ),
+    '&::after': (
+        content: close-quote,
+    ),
+) !default;
Description
  • Base quote styles and spacing for blockquotes
Type
Map
Example
Used in base/_typography.scss by the blockquote element
blockquote {
+   @include properties($typography__blockquote--default, $typography__blockquote);
+ }
See
TODO's
    • Implement vertical rhythm
Links
typography__q--default
$typography__q--default: (
+    quotes: '"\201c" "\201d" "\2018" "\2019"',
+
+    '&::before': (
+        content: open-quote,
+    ),
+    '&::after': (
+        content: close-quote,
+    ),
+) !default;
Description
  • Base typography for quotations
Type
Map
Example
Used in base/_typography.scss by the q element
q {
+   @include properties($typography__q--default, $typography__q);
+ }
See
Links
typography__address--default
$typography__address--default: (
+    margin: 0 0 modular-scale(2),
+) !default;
Description
  • Base typography for address elements
Type
Map
Example
Used in base/_typography.scss by the address element
address {
+   @include properties($typography__address--default, $typography__address);
+ }
See
TODO's
    • Implement vertical rhythm
Links
typography__pre--default
$typography__pre--default: (
+  background: rgba(color(light-grey), .6),
+  font-family: $monospace-font-family,
+  font-size: em(16px),
+  line-height: $base-line-height,
+  margin-bottom: modular-scale(2),
+  max-width: 100%,
+  overflow: auto,
+  padding: 1.6em,
+  border: 1px solid color(grey),
+  white-space: pre-wrap,
+) !default;
Description
  • Base styling for preformatted text
Type
Map
Requires
Example
Used in base/_typography.scss by the pre element
pre {
+   @include properties($typography__pre--default, $typography__pre);
+ }
See
TODO's
    • Implement vertical rhythm
Links
typography__code--default
$typography__code--default: (
+  font-family: $monospace-font-family,
+  font-size: em(16px),
+  padding: modular-scale(-10) modular-scale(-5),
+  position: relative,
+  background-color: rgba(color(light-grey), .6),
+  border: 1px solid color(grey),
+) !default;
Description
  • Base styling for phrase tags
Type
Map
Requires
Example
Used in base/_typography.scss by the code, kbd, tt, var, samp elements
code, kbd, tt, var, samp {
+   @include properties($typography__code--default, $typography__code);
+ }
See
Links
typography__abbr--default
$typography__abbr--default: (
+  border-bottom: 1px dotted color(border),
+  cursor: help,
+) !default;
Description
  • Base styling for abbreviation and acronym tags
Type
Map
Requires
Example
Used in base/_typography.scss by the abbr, acronym elements
base, acronym {
+   @include properties($typography__abbr--default, $typography__abbr);
+ }
See
Links
typography__edits--default
$typography__edits--default: (
+  padding: 0 .25em .15em,
+) !default;
Description
  • Shared styling for document markup (insert, delete, mark).
Type
Map
Example
Used in base/_typography.scss by the mark, ins, del elements
mark, ins, del {
+   @include properties($typography__edits--default, $typography__edits);
+ }
See
typography__del--default
$typography__del--default: (
+  color: color(text),
+  background: color(light-red),
+  text-decoration: line-through,
+  text-decoration-color: color(red),
+) !default;
Description
  • Base documentation cut & paste template.
Type
Map
Requires
Example
Used in base/_typography.scss by the del element
del {
+   @include properties($typography__del--default, $typography__del);
+ }
See
Links
typography__ins--default
$typography__ins--default: (
+  color: color(text),
+  background: color(light-green),
+  text-decoration: none,
+) !default;
Description
  • Base styles for the ins element
Type
Map
Requires
Example
Used in base/_typography.scss by the ins ins
ins {
+   @include properties($typography__ins--default, $typography__ins);
+ }
See
Links
typography__mark--default
$typography__mark--default: (
+  color: color(text),
+  background: color(light-yellow),
+  text-decoration: none,
+) !default;
Description
  • Base styles for the mark element
Type
Map
Requires
Example
Used in base/_typography.scss by the mark mark
mark {
+  @include properties($typography__mark--default, $typography__mark);
+}
See
Links
typography__small-text--default
$typography__small-text--default: (
+  font-size: modular-scale(-1, $ratio: 1.125),
+) !default;
Description
  • Base styles for the small and .text-text elements
Type
Map
Example
Used in base/_typography.scss by the small' and.small-text` elements
text, .small-text {
+  @include properties($typography__small-text--default, $typography__small-text);
+}
See
Links
typography__large-text--default
Deprecated!
$typography__large-text--default: (
+  font-size: modular-scale(1),
+) !default;
Description
  • Base styles for the .large-text element
Note: The big element has been deprecated from the HTML spec. Use the .large-text class instead.
Type
Map
Example
Used in base/_typography.scss by the .large-text selector
.large-text {
+  @include properties($typography__large-text--default, $typography__large-text);
+}
See
Links
typography__hr--default
$typography__hr--default: (
+  border-top: 0,
+  border-right: 0,
+  border-bottom: $base-border,
+  border-left: 0,
+  margin: modular-scale(1) 0,
+) !default;
Description
  • Base styles for the hr element
Type
Map
Requires
Example
Used in base/_typography.scss by the hr element
hr {
+  @include properties($typography__hr--default, $typography__hr);
+}
See
TODO's
    • Implement vertical rhythm
Links
typography__a--default
$typography__a--default: (
+    color: color(action),
+    text-decoration: none,
+
+    #{$hocus}: (
+        color: color(action-active),
+        text-decoration: underline,
+    ),
+) !default;
Description
  • Base styles for the a element
Type
Map
Requires
Example
Used in base/_typography.scss by the a element
a {
+  @include properties($typography__a--default, $typography__a);
+}
See
Links
Font Loading & Management
functions
_check-loaded-font
@function _check-loaded-font() { ... }
Description
Checks the global variable for loaded fonts
Parameters
None.
Requires
Used by
_log-loaded-font
@function _log-loaded-font() { ... }
Description
Internal function to keep track of loaded fonts so we don't duplicate calls.
Parameters
None.
Requires
Used by
variables
fonts
$fonts: () !default;
Description
Global default fonts.
Used by
loaded-fonts
$loaded-fonts: () !default;
Description
Keeps track of already loaded fonts.
Used by
mixins
load-fonts
@mixin load-fonts() { ... }
Description
Load a collection of @font-face fonts
Parameters
None.
Requires
Functions
functions
color
@function color($color: null, $color-palette: $colors) { ... }
Description
Return a color from the color map.
Parameters
NameDescriptionTypeDefault value
$color
The color returned by the function
Colornull
$color-palette
The color map to use to retrieve the color
Map$colors
Example
SCSS
background-color: color(white);
CSS
background-color: #fff;
Requires
Used by
mixins
mixins
material-shadow
@function color($color: null, $color-palette: $colors) { ... }
Description
Return a color from the color map.
Parameters
NameDescriptionTypeDefault value
$color
The color returned by the function
Colornull
$color-palette
The color map to use to retrieve the color
Map$colors
Example
SCSS
background-color: color(white);
CSS
background-color: #fff;
Requires
Used by
material-shadow
@mixin material-shadow($Depth: shallow) { ... }
Description
Creates a material-design style shadow. May be flat, shallow, medium, or deep.
Parameters
NameDescriptionTypeDefault value
$Depth
How deep the shadow appears to be. Default is Shallow.
Stringshallow
Example
SCSS
.element {
-  @include material-shadow(shallow);
+  @warn 'Material shadow supports a range from 1-12, or the keywords "flat, shallow, medium deep"';
+  @return false
+ }" data-collapsed="@function material-shadow($Depth) { ... }">@function material-shadow($Depth) { ... }
Description
Returns a material-design style shadow.
May be flat, shallow, medium, or deep, or a number between 1-12
Parameters
NameDescriptionTypeDefault value
$Depth
How deep the shadow appears to be.
Keyword (flat or Shallow or Medium or Deep) or Number(unitless, 1-12)—
Example
SCSS
.element {
+  box-shadow: material-shadow(shallow)
 }
CSS
.element {
-  box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.10), 2px 4px 7px 0px rgba(0,0,0,0.15);
-}
Author
  • Kevin Garcia
mixins|theme
variables
default-theme-group
$default-theme-group: (
-    default:  ( palette: $colors, selector: '&' ),
-) !default;
mixins
color-themes
Used by
Links
Author
  • Kevin Garcia
smart-merge
@function smart-merge($default-map, $map: null) { ... }
Description
Returns a merged map, a single map, or a null value, depending on the results of the function's operations
Limitations: When merging nested maps, the map merge will replace the value of the entire nested map. This is a limitation of Sass's implementation. This means if you want to replace a single property in a :before nested declaration, for example, you'll have to redeclare the entire element in the override map.
Parameters
NameDescriptionTypeDefault value
$default-map
The default map the mixin consumes
Map—
$map
The optional override map to merge in
Mapnull
Example
SCSS
$map--default: (
+  property1: value1,
+  property2: value2,
+  property3: value3,
+  // etc...
+)!default;
 
-    $_palette: map_get($_map, palette);
-    $_selector: map_get($_map, selector);
+$my-new-map: (
+  property1: my-value1,
+  property3: null, // By explicitly declaring a
+                   // null value in the merged map,
+                   // we can suppress this property
+  my-new-property: my-new-value,
+  // etc...
+);
 
-    @include color-theme($_palette, $_selector) {
-      @content
+$merged-map: smart-merge($map--default, $my-new-map);
+
Merged SCSS Map
$merged-map: (
+  property1: my-value1,
+  property2: value2,
+  my-new-property: my-new-value,
+  // etc...
+);
Used by
Author
  • Kevin Garcia
em
@mixin color-themes($theme-group: $default-theme-group) { ... }
Description
color-themes consumes a map to render multiple color variations on a specific block. For each theme group in the theme group map, the $color-themes mixin iterates over that group with the specified selector.
Parameters
NameDescriptionTypeDefault value
$theme-group
@property {string} selector ['&'] @property {map} palette [$color]
Map$default-theme-group
Content
This mixin allows extra content to be passed (through the @content directive). Role: `color-theme` will temporarily override the default color map with the attributes of the specified `$palette`. This change is scoped to within the mixin block, and once the mixin has ended, the default color map will revert to its original state as defined by `$color`.
Example
$green-theme: (
-  brand:                        #2c853c,
-  action:                       #00992b,
-  action--active:                #007b38,
-  background:                   #fff,
-  background--secondary:         #f4f4f4,
-  border:                       #ccc,
-  text:                         #121111,
-  text--active:                  #00992b,
-  reverse-text:                 #fff,
-  reverse-text--active:          #fff,
-);
-$blue-theme: (
-  brand:                        #3B7185,
-  action:                       #297C85,
-  action-active: #004a7b,
-  background:                   #fff,
-  background--secondary:         #f4f4f4,
-  border:                       #ccc,
-  text:                         #121111,
-  text--active:                  #297C85,
-  reverse-text:                 #fff,
-  reverse-text--active:          #fff,
-);
-$custom-theme-group: (
-  default ( palette: $colors, selector: '&' ),
-  green:  ( palette: $green-theme, selector: '&.theme--green' ),
-  blue:   ( palette: $blue-theme, selector: '&.theme--blue' ),
-);
+  @return $em;
+ }" data-collapsed="@function em() { ... }">@function em() { ... }
Description
Returns em relative units
Parameters
None.
Requires
Used by
Links
Author
  • Jakob Eriksen
rem
@function rem() { ... }
Description
Returns REM root units
Parameters
None.
Requires
Links
Author
  • Jakob Eriksen
to-unit
.card {
-  background-color: #fff;
-  color: #808080;
-}
-.card.theme--green {
-  background-color: #fff;
-  color: #00992b;
-}
-.card.theme--blue {
-  background-color: #fff;
-  color: #297C85;
-}
Requires
General
csss
.sr-only-text
@css .sr-only-text() { ... }
functions
_adjust-container-margin
@function to-unit() { ... }
Description
Conversion function
Parameters
None.
Throws
  • Could not convert to #{$unit} – must be a valid CSS unit
Requires
Used by
  • [function] em
  • [function] rem
Links
Author
  • Jakob Eriksen
_adjust-container-margin
@function _adjust-container-margin() { ... }
Description
Adjust Container Margin Adjusts the margin of a container by growing or shrinking it by a certain number of columns. This is a companion function to set-container-padding, which allows a container to break out of it's own boundaries.
todo: Documentation
Parameters
None.
Requires
_set-container-padding
@function _adjust-container-margin() { ... }
Description
Adjusts the margin of a container by growing or shrinking it by a certain number of columns. This is a companion function to set-container-padding, which allows a container to break out of it's own boundaries.
Parameters
None.
Requires
Used by
TODO's
  • : Documentation
_set-container-padding
@function _set-container-padding($columns: null, $grid: $neat-grid, $v-space: 1em, $max-width: false) { ... }
Description
Set Container padding Creates a fluid container of a certain number of columns. Can be constrained to a specific max width, or to the project's global $max-container-width.
Parameters
NameDescriptionTypeDefault value
$columns
The number of columns the container spans (ex: 1 or 1 of 2)
Number or Stringnull
$grid
The grid to base the calculations on.
Map$neat-grid
$v-space
The value for padding-top and padding-bottom in a container
Length(with unit)1em
$max-width
Whether the container's columns are based on the full parent width, or on a set max width
Booleanfalse
Requires
Used by
mixins
center-block
@mixin center-block() { ... }
Description
Center block
Parameters
None.
on-event
@function _set-container-padding($columns: null, $grid: $neat-grid, $v-space: 1em, $max-width: false) { ... }
Description
Set Container padding Creates a fluid container of a certain number of columns. Can be constrained to a specific max width, or to the project's global $max-container-width.
Parameters
NameDescriptionTypeDefault value
$columns
The number of columns the container spans (ex: 1 or 1 of 2)
Number or Stringnull
$grid
The grid to base the calculations on.
Map$neat-grid
$v-space
The value for padding-top and padding-bottom in a container
Length(with unit)1em
$max-width
Whether the container's columns are based on the full parent width, or on a set max width
Booleanfalse
Requires
Used by
functions|color
variables
default-theme-group
$default-theme-group: (
+    default:  ( palette: $colors, selector: '&' ),
+) !default;
mixins
color-themes
@mixin color-themes($theme-group: $default-theme-group) { ... }
Description
color-themes consumes a map to render multiple color variations on a specific block. For each theme group in the theme group map, the $color-themes mixin iterates over that group with the specified selector.
Parameters
NameDescriptionTypeDefault value
$theme-group
@property {string} selector ['&'] @property {map} palette [$color]
Map$default-theme-group
Content
This mixin allows extra content to be passed (through the @content directive). Role: `color-theme` will temporarily override the default color map with the attributes of the specified `$palette`. This change is scoped to within the mixin block, and once the mixin has ended, the default color map will revert to its original state as defined by `$color`.
Example
SCSS
$green-theme: (
+  brand:                        #2c853c,
+  action:                       #00992b,
+  action--active:                #007b38,
+  background:                   #fff,
+  background--secondary:         #f4f4f4,
+  border:                       #ccc,
+  text:                         #121111,
+  text--active:                  #00992b,
+  reverse-text:                 #fff,
+  reverse-text--active:          #fff,
+);
+$blue-theme: (
+  brand:                        #3B7185,
+  action:                       #297C85,
+  action-active: #004a7b,
+  background:                   #fff,
+  background--secondary:         #f4f4f4,
+  border:                       #ccc,
+  text:                         #121111,
+  text--active:                  #297C85,
+  reverse-text:                 #fff,
+  reverse-text--active:          #fff,
+);
+$custom-theme-group: (
+  default ( palette: $colors, selector: '&' ),
+  green:  ( palette: $green-theme, selector: '&.theme--green' ),
+  blue:   ( palette: $blue-theme, selector: '&.theme--blue' ),
+);
+
+.card {
+  @include color-themes($custom-theme-group) {
+    background-color: color(background);
+    color: color(text-active);
+  }
+}
CSS Output
.card {
+  background-color: #fff;
+  color: #808080;
+}
+.card.theme--green {
+  background-color: #fff;
+  color: #00992b;
+}
+.card.theme--blue {
+  background-color: #fff;
+  color: #297C85;
+}
Requires
Mixins
mixins
[private] _nested-properties
@mixin _nested-properties($_property, $_value) { ... }
Description
Returns a list of recursively nested $property: $value pairs. The mixin will continue to iterate as long as any map value is a nested map.
Parameters
NameDescriptionTypeDefault value
$_property
The CSS Property
Css property—
$_value
The CSS Value the property contains, or, if a map, the properties of the nested selector.
Css value or Map—
Used by
Author
  • Kevin Garcia
font-size
Deprecated!
@mixin font-size() { ... }
Description
Mixin font-size
Parameters
None.
Requires
  • [function] em
material_shadow
Deprecated!
This mixin is deprecated in favor of the material-shadow function
@mixin material_shadow($Depth: shallow) { ... }
Description
Creates a material-design style shadow. May be flat, shallow, medium, or deep.
Parameters
NameDescriptionTypeDefault value
$Depth
How deep the shadow appears to be. Default is Shallow.
Stringshallow
Example
SCSS
.element {
+  @include material-shadow(shallow);
+}
CSS
.element {
+  box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.10), 2px 4px 7px 0px rgba(0,0,0,0.15);
+}
Requires
See
Author
  • Kevin Garcia
on-event
Deprecated!
in favor of the $hocus and $pocus variables
@mixin on-event($self: false) { ... }
Description
Event wrapper
Parameters
NameDescriptionTypeDefault value
$self
Whether or not to include current selector
Boolfalse
Links
Author
  • Harry Roberts
centered-container
@mixin on-event($self: false) { ... }
Description
Event wrapper
Parameters
NameDescriptionTypeDefault value
$self
Whether or not to include current selector
Boolfalse
See
Links
Author
  • Harry Roberts
properties
@mixin properties($default-settings, $settings: null) { ... }
Description
Returns a list of $property: $value pairs
Parameters
NameDescriptionTypeDefault value
$default-settings
The default map the mixin consumes
Map—
$settings
The optional override map to merge in
Mapnull
Example
source SCSS
$default-map: (
+    color: blue,
+    margin: 0 auto,
+);
+
+$map-override: (
+    color: red,
+    overflow: hidden,
+);
+
+.default-element {
+  @include properties($default-map);
+}
+
+.override-element {
+  @include properties($map-override);
+}
+
+.merged-element {
+  @include properties($default-map, $map-override);
+}
output CSS
.default-element {
+  color: blue;
+  margin: 0 auto;
+}
+
+.override-element: {
+   color: red;
+   overflow: hidden;
+};
+
+.merged-element {
+  color: red;
+  margin: 0 auto;
+  overflow: hidden;
+}
When to use default + merged elements (scss)
 // The main use case is when one wants to output variations of an element.
+
+ $default-button: (
+    background-color: #333333,
+    color: white,
+    margin: 0 auto,
+    padding: 1em,
+ );
+
+ $blue-button: (
+    background-color: blue,
+ );
+
+ // You can pass it a default map
+ .button {
+    @include element-properties($default-button);
+ }
+
+ // You can pass it a named map
+ .button--blue {
+    @include element-properties($default-button, $blue-button);
+ }
+
+ // You may also pass it an inline map
+.button--green {
+    @include element-properties($default-button, (font-size: 1.125em, background-color: green, color: inherit, margin: null, ));
+ }
When to use default + merged elements (output)
.button: {
+   background-color: #333333;
+   color: white;
+   margin: 0 auto;
+   padding: 1em;
+};
+
+.button--blue: (
+   background-color: blue;
+   color: white;
+   margin: 0 auto;
+   padding: 1em;
+);
+
+/* Notice that explicitly null values in overrides are removed from the output */
+.button--green: (
+   background-color: green; /* <- overriden value */
+   color: inherit; /* <- overriden value */
+   padding: 1em; /* <- Notice that the margin property is gone. */
+   font-size: 1.125em /* <- values not present in the default map are amended to the end */
+);
+
Requires
Used by
Author
  • Kevin Garcia
mixins center block
mixins
center-block
@mixin center-block() { ... }
Parameters
None.
mixins|color
mixins
color-theme
@mixin color-theme($palette: $colors, $selector: '&') { ... }
Description
color-theme allows you to change the default color palette within the specified block. optionally, it lets you target a specific selector.
Parameters
NameDescriptionTypeDefault value
$palette
The color palette to be used within the scope of the block.
Map$colors
$selector
the $selector argument allows you to specify a different class than the current. It's especially useful when used with the render-color-themes mixin.
String'&'
Content
This mixin allows extra content to be passed (through the @content directive). Role: `color-theme` will temporarily override the default color map with the attributes of the specified `$palette`. This change is scoped to within the mixin block, and once the mixin has ended, the default color map will revert to its original state as defined by `$color`.
Example
SCSS
$green-theme: (
+  brand:                        #2c853c,
+  action:                       #00992b,
+  action-active:                #007b38,
+  background:                   #fff,
+  background-secondary:         #f4f4f4,
+  border:                       #ccc,
+  text:                         #121111,
+  text-active:                  #00992b,
+  reverse-text:                 #fff,
+  reverse-text-active:          #fff,
+);
+.card {
+  @include color-theme($green-theme) {
+    background-color: color(background);
+    color: color(text-active);
+  }
+}
CSS output
.card {
+  background-color: #fff;
+  color: #121111;
+}
SCSS
@include color-theme($green-theme, '.card') {
+  background-color: color(background);
+  color: color(text-active);
+}
CSS output
.card {
+  background-color: #fff;
+  color: #121111;
+}
Requires
Used by
General
mixins
button
@mixin button() { ... }
Description
The button mixin is a functional alias of the properties mixin, however, it's there to provide a semantic demarcation for it's intended purpose. Namely, we are using it to mimic the extend functionality for cases where CSS inheritance causes unintended cascading of button properties. In those cases, you can @include button($base-button, $secondary-button), and have this mixin provide all the computed values that would normally be overriden if we had used %extend
Parameters
None.
Requires
Used by
adjust-container-width
@mixin adjust-container-width() { ... }
Description
Adjust the current container by insetting or breaking out by X columns Can accept negative numbers todo: documentation.
Parameters
None.
Requires
centered-container
@mixin centered-container() { ... }
Description
centered-container mixin Creates a wrapper-less centered container using padding Depends on Neat. We use the global neat-grid variable for grid default, but you may pass it any value.
Parameters
None.
Requires
Used by
flex-container
@mixin centered-container() { ... }
Description
centered-container mixin Creates a wrapper-less centered container using padding Depends on Neat. We use the global neat-grid variable for grid default, but you may pass it any value.
Parameters
None.
Requires
Used by
Links
flex-container
@mixin responsive-container() { ... }
Description
Responsive container Creates a responsive container on each grid media as specified by the specified map
Parameters
None.
Requires
color-theme
@mixin color-theme($palette: $colors, $selector: '&') { ... }
Description
color-theme allows you to change the default color palette within the specified block. optionally, it lets you target a specific selector.
Parameters
NameDescriptionTypeDefault value
$palette
The color palette to be used within the scope of the block.
Map$colors
$selector
the $selector argument allows you to specify a different class than the current. It's especially useful when used with the render-color-themes mixin.
String'&'
Content
This mixin allows extra content to be passed (through the @content directive). Role: `color-theme` will temporarily override the default color map with the attributes of the specified `$palette`. This change is scoped to within the mixin block, and once the mixin has ended, the default color map will revert to its original state as defined by `$color`.
Example
$green-theme: (
-  brand:                        #2c853c,
-  action:                       #00992b,
-  action-active:                #007b38,
-  background:                   #fff,
-  background-secondary:         #f4f4f4,
-  border:                       #ccc,
-  text:                         #121111,
-  text-active:                  #00992b,
-  reverse-text:                 #fff,
-  reverse-text-active:          #fff,
-);
-.card {
-  @include color-theme($green-theme) {
-    background-color: color(background);
-    color: color(text-active);
-  }
-}
.card {
-  background-color: #fff;
-  color: #121111;
-}
@include color-theme($green-theme, '.card') {
-  background-color: color(background);
-  color: color(text-active);
-}
.card {
-  background-color: #fff;
-  color: #121111;
-}
Requires
Used by
placeholders
hidden-print
@mixin responsive-container() { ... }
Description
Responsive container Creates a responsive container on each grid media as specified by the specified map
Parameters
None.
Requires
placeholders
hidden-print
%hidden-print { ... }
Description
Hide element from print output usage: @extend %hidden-print;
Requires
hide-element
%hidden-print { ... }
Description
Hide element from print output usage: @extend %hidden-print;
Requires
hide-element
%hide-element { ... }
Description
Hide a block element while making it readable for screen readers Uses the hide-visually mixin from Bourbon, which can also make items visible on focus, for example.
hide-text
%hide-text { ... }
Description
Hide text while making it readable for screen readers
  1. Needed in WebKit-based browsers because of an implementation bug; See: https://code.google.com/p/chromium/issues/detail?id=457146
  2. Needed to remove other element styling
  3. Needed to remove from line flow usage: @extend %hide-text;
keep-together
%keep-together { ... }
Description
Keep text together A more elegant solution than peppering your markup with  
variables | animations
variables
base-property
$base-property: all !default;
Description
Base property animation default.
base-delay
$base-delay: null !default;
Description
Base delay animation default.
base-duration
$base-duration: 250ms !default;
Description
Base duration animation default.
base-timing
$base-timing: ease-in-out !default;
Description
Base timing animation default.
base-transition
$base-transition: $base-property $base-duration $base-timing !default;
Description
Base transition animation default.
variables | borders
variables
base-border-radius
$base-border-radius: 3px !default;
Description
Base border radius.
base-border
$base-border: 1px solid color(border) !default;
Description
Base Border.
variables | breakpoint boundaries
variables
screen-xs-min
$screen-xs-min: 0px !default;
Description
Lower Boundary for extra small screens
Type
Variable
Used by
screen-sm-min
$screen-sm-min: 576px !default;
Description
Lower boundary for small screens
Type
Variable
Used by
screen-md-min
$screen-md-min: 768px !default;
Description
Lower boundary for medium screens
Type
Variable
Used by
screen-lg-min
$screen-lg-min: 992px !default;
Description
Lower boundary for large screens
Type
Variable
Used by
screen-xl-min
$screen-xl-min: $max-container-width !default;
Description
Lower boundary for extra large screens
Type
Variable
Used by
screen-xs-max
$screen-xs-max: $screen-sm-min - 1px !default;
Description
Upper boundary for extra small screens
Type
Variable
Requires
Used by
screen-sm-max
$screen-sm-max: $screen-md-min - 1px !default;
Description
Upper boundary for small screens
Type
Variable
Requires
Used by
screen-md-max
$screen-md-max: $screen-lg-min - 1px !default;
Description
Upper boundary for medium screens
Type
Variable
Requires
Used by
screen-lg-max
$screen-lg-max: $screen-xl-min - 1px !default;
Description
Upper boundary for large screens
Type
Variable
Requires
Used by
variables | colors
variables
colors
$colors: (
-    brand:                        #004fdc,
-    action:                       #004991,
-    action--active:               #005ddc,
-    background:                   #fff,
-    background--secondary:        #ddd,
-    border:                       #999,
-    text:                         #112,
-    text--active:                 #808080,
-    reverse-text:                 #fff,
-    reverse-text--active:         #dceefe,
-) !default;
Description
This variable is a sass map that overrides our generic color map. Use this to define your project's color palette.
Type
Map
Map structure
NameDescriptionTypeValue
brand
Brand Color
Color#004fdc
action
Action Color (such as links)
Color#004991
action--active
Action Color (when in hover, active and focus states)
Color#005ddc
background
Background color
Color#fff
background--secondary
Secondary Background Color
Color#ddd
border
Border Color
Color#999
text
Text color
Color#112
text--active
Text Color (when interacted with. This is an edge case)
Color$808080
reverse-text
Reverse Text Color (when the background is a dark color)
Color#fff
reverse-text--active
Reverse Text Color (when in hover, active and focus states)
Color#dceefe
Used by
custom-color-palette
$custom-color-palette: ()!default;
Description
If you would like to have multiple color palettes in a single project, you can do this by defining a new map stored within a variable of your choosing. This variable can then be passed directly to the color() function, such as color(red, $my-custom-colors). Note that you don't need to define any colors that you want to default to the default color map, and colors that don't exist in the color map will be defined in your custom color palette only.
Type
Map
Map structure
NameDescriptionTypeValue
brand
Brand Color
Color#004fdc
action
Action Color (such as links)
Color#004991
action--active
Action Color (when in hover, active and focus states)
Color#005ddc
background
Background color
Color#fff
background--secondary
Secondary Background Color
Color#ddd
border
Border Color
Color#999
text
Text color
Color#112
text--active
Text Color (when interacted with. This is an edge case)
Color$808080
reverse-text
Reverse Text Color (when the background is a dark color)
Color#fff
reverse-text--active
Reverse Text Color (when in hover, active and focus states)
Color#dceefe
variables | grid media
variables
media-xs
$media-xs: (
-    media: $screen-xs-min,
-) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)$screen-xs-min
Requires
variables | neat media queries
variables
media-xs-only
$media-xs-only: (
-    media: 'only screen and (max-width: #{$screen-xs-max})',
-) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)'only screen and (max-width: $screen-xs-max)'
Requires
media-xs-max
$media-xs-max: (
-    media: 'only screen and (max-width: #{$screen-xs-max})',
-) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)'only screen and (max-width: $screen-xs-max)'
Requires
media-sm
$media-sm: (
-    media: $screen-sm-min,
-) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)$screen-sm-min
Requires
media-sm-only
$media-sm-only: (
-    media: 'only screen and (min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max})',
-) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)'only screen and (min-width: $screen-sm-min) and (max-width: $screen-sm-max)'
Requires
media-sm-max
$media-sm-max: (
-    media: 'only screen and (max-width: #{$screen-sm-max})',
-) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)'only screen and (max-width: $screen-sm-max)'
Requires
media-md
$media-md: (
-    media: $screen-md-min,
-) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
$screen-md-min]
Grid media query.
String or Number (with unit)—
Requires
media-md-only
$media-md-only: (
-    media: 'only screen and (min-width: #{$screen-md-min}) and (max-width: #{$screen-md-max})',
-) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)'only screen and (min-width: $screen-md-min) and (max-width: $screen-md-max)'
Requires
media-md-max
$media-md-max: (
-    media: 'only screen and (max-width: #{$screen-md-max})',
-) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)'only screen and (max-width: $screen-md-max)'
Requires
media-lg
$media-lg: (
-    media: $screen-lg-min,
-) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
$screen-lg-min]
Grid media query.
String or Number (with unit)—
Requires
media-lg-only
$media-lg-only: (
-    media: 'only screen and (min-width: #{$screen-lg-min}) and (max-width: #{$screen-lg-max})',
-) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)'only screen and (min-width: $screen-lg-min) and (max-width: $screen-lg-max)'
Requires
media-lg-max
$media-lg-max: (
-    media: 'only screen and (max-width: #{$screen-lg-max})',
-) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)'only screen and (max-width: $screen-lg-max)'
Requires
media-xl
$media-xl: (
-    media: $screen-xl-min,
-) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
$screen-xl-min]
Grid media query.
String or Number (with unit)—
Requires
media-print
$media-print: (
-    columns: 12,
-    gutter: .25in,
-    media: 'only print',
-) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)12
gutter
Default grid gutter width between columns.
Number (with unit).25in
'only
print'] Grid media query.
String or Number (with unit)—
Used by
variables|bourbon
variables
bourbon
$bourbon: (
-    "modular-scale-ratio": 1.25,
-) !default;
Description
Bourbon Settings
Bourbon default overrides for decanter.
Type
Map
Map structure
NameDescriptionTypeValue
contrast-switch-dark-color
Global dark color for the contrast-switch function.
Color#000
contrast-switch-light-color
Global light color for the contrast-switch function.
Color#fff
global-font-file-formats
Global font file formats for the font-face mixin.
List("ttf", "woff2", "woff")
modular-scale-base
Global base value for the modular-scale function.
Number or Em measurement1em
{number$default-theme-group:
( default: ( palette: $colors, selector: '&' ), ) !default;} modular-scale-ratio [$major-third (1.25)] Global base ratio for the modular-scale function.
Map—
rails-asset-pipeline
Set this to true when using the Rails Asset Pipeline and Bourbon will write asset paths using sass-rails’ asset helpers.
Booleanfalse
Example
$bourbon: (
-  "contrast-switch-dark-color": #000,
-  "contrast-switch-light-color": #fff,
-  "global-font-file-formats": ("ttf", "woff2", "woff"),
-  "modular-scale-base": 1em,
-  "modular-scale-ratio": $major-third,
-  "rails-asset-pipeline": false,
-);
Links
variables|buttons
variables
base-button
$base-button: (
-    bg-color: color(action),
-    color: color(reverse-text),
-    border: none,
-    cursor: pointer,
-    display: inline-block,
-    material-shadow: flat,
-    font-family: $base-font-family,
-    line-height: $base-line-height,
-    font-weight: inherit,
-    font-size: inherit,
-    text-decoration: none,
-    transition: $base-transition,
-    padding: 'em(6px) em($_spacing) em(7px)',
-    text-align: center,
-    spacing: $small-spacing,
-    bg-color--active: color(action--active),
-    color--active: color(reverse-text--active),
-    border--active: null,
-    material-shadow--active: null,
-    text-decoration--active: none,
-);
Description
This variable is a sass map that overrides our generic button map.
Map structure
NameDescriptionTypeValue
bg-color
Background color
Colorcolor(action)
color
Text Color
Colorcolor(reverse-text)
border
Border properties. Accepts shorthand.
Length(with unit) or String'none'
variables|containers
variables
default-container
$default-container: (
-  xs: ( columns: 12, grid-media: $media-xs-only,  v-space: 1em, max-width: false, grid-collapse: false ),
-  sm: ( columns: 12, grid-media: $media-sm-only,  v-space: 1em, max-width: false, grid-collapse: false ),
-  md: ( columns: 12, grid-media: $media-md-only,  v-space: 1em, max-width: false, grid-collapse: false ),
-  lg: ( columns: 12, grid-media: $media-lg-only,  v-space: 1em, max-width: false, grid-collapse: false ),
-  xl: ( columns: 12, grid-media: $media-xl,       v-space: 1em, max-width: true,  grid-collapse: false ),
-  print: ( columns: 12, grid-media: $media-print, v-space: 1em, max-width: false, grid-collapse: false ),
-) !default;
Description
Default Responsive Container
The deafult responsive container map for the responsive-container mixin.
Type
Map
Map structure
NameDescriptionTypeValue
xs
Global dark color for the contrast-switch function.
Map—
sm
Global light color for the contrast-switch function.
Map—
md
Global font file formats for the font-face mixin.
Map—
lg
Global base value for the modular-scale function.
Map—
xl
balhs
Map—
print
Set this to true when using the Rails Asset Pipeline and Bourbon will
Map—
Example
$bourbon: (
-  "contrast-switch-dark-color": #000,
-  "contrast-switch-light-color": #fff,
-  "global-font-file-formats": ("ttf", "woff2", "woff"),
-  "modular-scale-base": 1em,
-  "modular-scale-ratio": $major-third,
-  "rails-asset-pipeline": false,
-);
See
default-container--collapsed
$default-container--collapsed: (
-  xs: ( columns: 12, grid-media: $media-xs-only,  v-space: 1em, max-width: false, grid-collapse: true ),
-  sm: ( columns: 12, grid-media: $media-sm-only,  v-space: 1em, max-width: false, grid-collapse: true ),
-  md: ( columns: 12, grid-media: $media-md-only,  v-space: 1em, max-width: false, grid-collapse: true ),
-  lg: ( columns: 12, grid-media: $media-lg-only,  v-space: 1em, max-width: false, grid-collapse: true ),
-  xl: ( columns: 12, grid-media: $media-xl,       v-space: 1em, max-width: true,  grid-collapse: true ),
-  print: ( columns: 12, grid-media: $media-print, v-space: 1em, max-width: false, grid-collapse: true ),
-) !default;
custom-container
$custom-container: () !default;
Description
You can create any number of custom responsive containers
variables|decanter
variables
root-font-size
$root-font-size: 10px !default;
Description
Root font size in pixels. Used for converting rem to pixels.
Type
Number or Pixel measurement
base-font-size
$base-font-size: 18px !default;
Description
Base font size in pixels. Used for converting between em and absolute lengths.
Type
Number or Pixel measurement
grid-columns
$grid-columns: 12 !default;
Description
Grid Columns How many columns in the default grid
Type
Number
Used by
gutter
$gutter: 20px !default;
Description
Gutter The space on the left and right of default grid elements
Type
Number or Pixel measurement
max-container-width
$max-container-width: 1200px !default;
Type
Number or Pixel measurement
Used by
max-content-width
$max-content-width: $max-container-width - ($gutter * 2) !default;
Description
Max Content Width Removes gutters from the max-container-width constant to give us a computed content-width.
Type
Number or Pixel measurement
breakpoint-helper
$breakpoint-helper: true;
Description
Breakpoint Helper. Generates a set of configurable breakpoint visual prompts to aid during development.
Type
Bool
variables|forms
variables
form-box-shadow
$form-box-shadow: inset 0 1px 3px rgba(color(black), 0.06) !default;
Description
Form box shadow default.
Requires
form-box-shadow-focus
$form-box-shadow-focus: $form-box-shadow, 0 0 5px adjust-color(color(blue), $lightness: -5%, $alpha: -0.3) !default;
Description
Form box shadow focus default.
variables|neat
variables
neat-grid
$neat-grid: (
-    columns: $grid-columns,
-    gutter:  $gutter,
-    media: null,
-    color: rgba(#00d4ff, 0.25),
-    direction: ltr,
-) !default;
Description
This variable is a sass map that overrides Neat's default grid settings. Use this to define your project's grid properties incluting gutters and total column count.
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)12
gutter
Default grid gutter width between columns.
Number (with unit)20px
media
Grid media query.
String or Number (with unit)null
color
Default visual grid color.
Colorrgba(#00d4ff, 0.25)
Example
SCSS
$neat-grid: (
-  columns: 12,
-  gutter: 20px,
-);
Links
variables|typography
variables
font-stack-monospace
$font-stack-monospace: 'Source Code Pro', $font-stack-monaco !default;
Description
Font Stack Monospace.
This is outputted via font-family: $font-stack-monospace;
Type
List
Example
.my-class {
-  font-family: $font-stack-monospace;
-}
monospace-source
$monospace-source: 'https://fonts.googleapis.com/css?family=Source+Code+Pro' !default;
Description
Monospace Source.
The Monospace font files from google fonts.
Type
String
font-stack-sans-serif
$font-stack-sans-serif: 'Noto Sans', $font-stack-helvetica !default;
Description
Font stack sans serif
This is outputted via font-family: $font-stack-sans-serif;
Type
List
Example
.my-class {
-  font-family: $font-stack-sans-serif;
-}
sans-serif-source
$sans-serif-source: 'https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i' !default;
Description
Sans serif source.
The Noto Sans font files from google fonts.
Type
String
font-stack-serif
$font-stack-serif: 'Noto Serif', $font-stack-georgia !default;
Description
Font stack serif
This is outputted via font-family: $font-stack-serif;
Type
List
Example
.my-class {
-  font-family: $font-stack-serif;
-}
serif-source
$serif-source: 'https://fonts.googleapis.com/css?family=Noto+Serif:400,400i,700,700i' !default;
Description
Serif Source.
The Noto Serif font files from google fonts.
Type
String
font-family-serif
$font-family-serif: $font-stack-serif !default;
Description
Font Family Serif.
Type
List
Example
.my-class {
-  font-family: $font-family-serif;
-}
font-family-sans-serif
$font-family-sans-serif: $font-stack-sans-serif !default;
Description
Font Family Sans Serif.
Type
List
Example
.my-class {
-  font-family: $font-family-sans-serif;
-}
font-family-monospace
$font-family-monospace: $font-stack-monospace !default;
Description
Font Family Monospace.
Type
List
Example
.my-class {
-  font-family: $font-family-monospace;
-}
base-font-family
$base-font-family: $font-family-sans-serif !default;
Description
Base Font Family Setting.
Type
List
Example
.my-class {
-  font-family: $base-font-family;
-}
heading-font-family
$heading-font-family: $font-family-serif !default;
Description
Heading Font Family.
Type
List
Example
.my-class {
-  font-family: $heading-font-family;
-}
code-font-family
$code-font-family: $font-family-monospace !default;
Description
Code Font Family.
Type
List
Example
.my-class {
-  font-family: $code-font-family;
-}
base-line-height
$base-line-height: 1.5 !default;
Description
Base Line Height.
Type
Number
TODO's
  • find out where this is used and let people know. I assume everywhere.
heading-line-height
$heading-line-height: 1.2 !default;
Description
Heading Line Height.
Type
Number
TODO's
  • find out where this is used and let people know. I assume everywhere.
all-headlines
$all-headlines: 'h1, h2, h3, h4, h5, h6' !default;
Description
All Headlines list selector
Type
List
variables|vertical-rhythm
variables
base-spacing
$base-spacing: modular-scale(0) !default;
Description
Base vertical spacing. Uses the bourbon function modular-scale to procude an em size.
Type
String
Example
$_spacing: $base-spacing; // 1.77689em
Links
small-spacing
$small-spacing: modular-scale(-1) !default;
Description
Small vertical spacing. Uses the bourbon function modular-scale to procude an em size.
Type
String
Example
$_spacing: $small-spacing; // 0.75019em
Links

\ No newline at end of file
+ }" data-collapsed="%keep-together { ... }">%keep-together { ... }

Description

Keep text together A more elegant solution than peppering your markup with  

\ No newline at end of file diff --git a/docs/functions/index.html b/docs/functions/index.html index d2beb31d1..e390719eb 100644 --- a/docs/functions/index.html +++ b/docs/functions/index.html @@ -1,5 +1,14 @@ Decanter - v0.1.0-alpha1

core functions

functions

color

Font Loading & Management
functions
_check-loaded-font
@function _check-loaded-font() { ... }
Description
Checks the global variable for loaded fonts
Parameters
None.
_log-loaded-font
@function _log-loaded-font() { ... }
Description
Internal function to keep track of loaded fonts so we don't duplicate calls.
Parameters
None.
Functions
functions
color
@function color($color: null, $color-palette: $colors) { ... }
Description
Return a color from the color map.
Parameters
NameDescriptionTypeDefault value
$color
The color returned by the function
Colornull
$color-palette
The color map to use to retrieve the color
Map$colors
Example
SCSS
background-color: color(white);
CSS
background-color: #fff;
General
functions
_adjust-container-margin
@function color($color: null, $color-palette: $colors) { ... }
Description
Return a color from the color map.
Parameters
NameDescriptionTypeDefault value
$color
The color returned by the function
Colornull
$color-palette
The color map to use to retrieve the color
Map$colors
Example
SCSS
background-color: color(white);
CSS
background-color: #fff;
material-shadow
@function material-shadow($Depth) { ... }
Description
Returns a material-design style shadow.
May be flat, shallow, medium, or deep, or a number between 1-12
Parameters
NameDescriptionTypeDefault value
$Depth
How deep the shadow appears to be.
Keyword (flat or Shallow or Medium or Deep) or Number(unitless, 1-12)—
Example
SCSS
.element {
+  box-shadow: material-shadow(shallow)
+}
CSS
.element {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15), 0px 3px 3px rgba(0, 0, 0, 0.15);
+}
Links
Author
  • Kevin Garcia
smart-merge
@function smart-merge($default-map, $map: null) { ... }
Description
Returns a merged map, a single map, or a null value, depending on the results of the function's operations
Limitations: When merging nested maps, the map merge will replace the value of the entire nested map. This is a limitation of Sass's implementation. This means if you want to replace a single property in a :before nested declaration, for example, you'll have to redeclare the entire element in the override map.
Parameters
NameDescriptionTypeDefault value
$default-map
The default map the mixin consumes
Map—
$map
The optional override map to merge in
Mapnull
Example
SCSS
$map--default: (
+  property1: value1,
+  property2: value2,
+  property3: value3,
+  // etc...
+)!default;
+
+$my-new-map: (
+  property1: my-value1,
+  property3: null, // By explicitly declaring a
+                   // null value in the merged map,
+                   // we can suppress this property
+  my-new-property: my-new-value,
+  // etc...
+);
+
+$merged-map: smart-merge($map--default, $my-new-map);
+
Merged SCSS Map
$merged-map: (
+  property1: my-value1,
+  property2: value2,
+  my-new-property: my-new-value,
+  // etc...
+);
Author
  • Kevin Garcia
em
@function em() { ... }
Description
Returns em relative units
Parameters
None.
Requires
Links
Author
  • Jakob Eriksen
rem
@function rem() { ... }
Description
Returns REM root units
Parameters
None.
Requires
Links
Author
  • Jakob Eriksen
to-unit
@function to-unit() { ... }
Description
Conversion function
Parameters
None.
Throws
  • Could not convert to #{$unit} – must be a valid CSS unit
Used by
  • [function] em
  • [function] rem
Links
Author
  • Jakob Eriksen
_adjust-container-margin
@function _adjust-container-margin() { ... }
Description
Adjust Container Margin Adjusts the margin of a container by growing or shrinking it by a certain number of columns. This is a companion function to set-container-padding, which allows a container to break out of it's own boundaries.
todo: Documentation
Parameters
None.
_set-container-padding
@function _adjust-container-margin() { ... }
Description
Adjusts the margin of a container by growing or shrinking it by a certain number of columns. This is a companion function to set-container-padding, which allows a container to break out of it's own boundaries.
Parameters
None.
TODO's
  • : Documentation
_set-container-padding
@function _set-container-padding($columns: null, $grid: $neat-grid, $v-space: 1em, $max-width: false) { ... }
Description
Set Container padding Creates a fluid container of a certain number of columns. Can be constrained to a specific max width, or to the project's global $max-container-width.
Parameters
NameDescriptionTypeDefault value
$columns
The number of columns the container spans (ex: 1 or 1 of 2)
Number or Stringnull
$grid
The grid to base the calculations on.
Map$neat-grid
$v-space
The value for padding-top and padding-bottom in a container
Length(with unit)1em
$max-width
Whether the container's columns are based on the full parent width, or on a set max width
Booleanfalse

\ No newline at end of file
diff --git a/docs/mixins/index.html b/docs/mixins/index.html
index 3e46855e4..92e281cc8 100644
--- a/docs/mixins/index.html
+++ b/docs/mixins/index.html
@@ -1,25 +1,60 @@
 Decanter - v0.1.0-alpha1
mixins
mixins
material-shadow
Font Loading & Management
variables
fonts
$fonts: () !default;
Description
Global default fonts.
Used by
loaded-fonts
$loaded-fonts: () !default;
Description
Keeps track of already loaded fonts.
Used by
mixins
load-fonts
@mixin material-shadow($Depth: shallow) { ... }
Description
Creates a material-design style shadow. May be flat, shallow, medium, or deep.
Parameters
NameDescriptionTypeDefault value
$Depth
How deep the shadow appears to be. Default is Shallow.
Stringshallow
Example
SCSS
.element {
-  @include material-shadow(shallow);
-}
CSS
.element {
-  box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.10), 2px 4px 7px 0px rgba(0,0,0,0.15);
-}
Author
  • Kevin Garcia
mixins|theme
variables
default-theme-group
$default-theme-group: (
+ }" data-collapsed="@mixin load-fonts() { ... }">@mixin load-fonts() { ... }
Description
Load a collection of @font-face fonts
Parameters
None.
Requires
functions|color
variables
default-theme-group
$default-theme-group: (
     default:  ( palette: $colors, selector: '&' ),
-) !default;
mixins
color-themes
mixins
color-themes
@mixin color-themes($theme-group: $default-theme-group) { ... }
Description
color-themes consumes a map to render multiple color variations on a specific block. For each theme group in the theme group map, the $color-themes mixin iterates over that group with the specified selector.
Parameters
NameDescriptionTypeDefault value
$theme-group
@property {string} selector ['&'] @property {map} palette [$color]
Map$default-theme-group
Content
This mixin allows extra content to be passed (through the @content directive). Role: `color-theme` will temporarily override the default color map with the attributes of the specified `$palette`. This change is scoped to within the mixin block, and once the mixin has ended, the default color map will revert to its original state as defined by `$color`.
Example
$green-theme: (
+ }" data-collapsed="@mixin color-themes($theme-group: $default-theme-group) { ... }">@mixin color-themes($theme-group: $default-theme-group) { ... }
Description
color-themes consumes a map to render multiple color variations on a specific block. For each theme group in the theme group map, the $color-themes mixin iterates over that group with the specified selector.
Parameters
NameDescriptionTypeDefault value
$theme-group
@property {string} selector ['&'] @property {map} palette [$color]
Map$default-theme-group
Content
This mixin allows extra content to be passed (through the @content directive). Role: `color-theme` will temporarily override the default color map with the attributes of the specified `$palette`. This change is scoped to within the mixin block, and once the mixin has ended, the default color map will revert to its original state as defined by `$color`.
Example
SCSS
$green-theme: (
   brand:                        #2c853c,
   action:                       #00992b,
   action--active:                #007b38,
@@ -64,7 +99,7 @@
     background-color: color(background);
     color: color(text-active);
   }
-}
.card {
+}
CSS Output
.card {
   background-color: #fff;
   color: #808080;
 }
@@ -75,12 +110,42 @@
 .card.theme--blue {
   background-color: #fff;
   color: #297C85;
-}
Requires
General
mixins
center-block
@mixin center-block() { ... }
Description
Center block
Parameters
None.
on-event
Requires
Mixins
mixins
[private] _nested-properties
@mixin _nested-properties($_property, $_value) { ... }
Description
Returns a list of recursively nested $property: $value pairs. The mixin will continue to iterate as long as any map value is a nested map.
Parameters
NameDescriptionTypeDefault value
$_property
The CSS Property
Css property—
$_value
The CSS Value the property contains, or, if a map, the properties of the nested selector.
Css value or Map—
Used by
Author
  • Kevin Garcia
font-size
Deprecated!
@mixin font-size() { ... }
Description
Mixin font-size
Parameters
None.
material_shadow
Deprecated!
This mixin is deprecated in favor of the material-shadow function
@mixin material_shadow($Depth: shallow) { ... }
Description
Creates a material-design style shadow. May be flat, shallow, medium, or deep.
Parameters
NameDescriptionTypeDefault value
$Depth
How deep the shadow appears to be. Default is Shallow.
Stringshallow
Example
SCSS
.element {
+  @include material-shadow(shallow);
+}
CSS
.element {
+  box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.10), 2px 4px 7px 0px rgba(0,0,0,0.15);
+}
Author
  • Kevin Garcia
on-event
Deprecated!
in favor of the $hocus and $pocus variables
@mixin on-event($self: false) { ... }
Description
Event wrapper
Parameters
NameDescriptionTypeDefault value
$self
Whether or not to include current selector
Boolfalse
Links
Author
  • Harry Roberts
centered-container
@mixin on-event($self: false) { ... }
Description
Event wrapper
Parameters
NameDescriptionTypeDefault value
$self
Whether or not to include current selector
Boolfalse
Links
Author
  • Harry Roberts
properties
@mixin properties($default-settings, $settings: null) { ... }
Description
Returns a list of $property: $value pairs
Parameters
NameDescriptionTypeDefault value
$default-settings
The default map the mixin consumes
Map—
$settings
The optional override map to merge in
Mapnull
Example
source SCSS
$default-map: (
+    color: blue,
+    margin: 0 auto,
+);
+
+$map-override: (
+    color: red,
+    overflow: hidden,
+);
+
+.default-element {
+  @include properties($default-map);
+}
+
+.override-element {
+  @include properties($map-override);
+}
+
+.merged-element {
+  @include properties($default-map, $map-override);
+}
output CSS
.default-element {
+  color: blue;
+  margin: 0 auto;
+}
+
+.override-element: {
+   color: red;
+   overflow: hidden;
+};
+
+.merged-element {
+  color: red;
+  margin: 0 auto;
+  overflow: hidden;
+}
When to use default + merged elements (scss)
 // The main use case is when one wants to output variations of an element.
+
+ $default-button: (
+    background-color: #333333,
+    color: white,
+    margin: 0 auto,
+    padding: 1em,
+ );
+
+ $blue-button: (
+    background-color: blue,
+ );
+
+ // You can pass it a default map
+ .button {
+    @include element-properties($default-button);
+ }
+
+ // You can pass it a named map
+ .button--blue {
+    @include element-properties($default-button, $blue-button);
+ }
+
+ // You may also pass it an inline map
+.button--green {
+    @include element-properties($default-button, (font-size: 1.125em, background-color: green, color: inherit, margin: null, ));
+ }
When to use default + merged elements (output)
.button: {
+   background-color: #333333;
+   color: white;
+   margin: 0 auto;
+   padding: 1em;
+};
+
+.button--blue: (
+   background-color: blue;
+   color: white;
+   margin: 0 auto;
+   padding: 1em;
+);
+
+/* Notice that explicitly null values in overrides are removed from the output */
+.button--green: (
+   background-color: green; /* <- overriden value */
+   color: inherit; /* <- overriden value */
+   padding: 1em; /* <- Notice that the margin property is gone. */
+   font-size: 1.125em /* <- values not present in the default map are amended to the end */
+);
+
Requires
Author
  • Kevin Garcia
mixins center block
mixins
center-block
@mixin center-block() { ... }
Parameters
None.
mixins|color
mixins
color-theme
@mixin color-theme($palette: $colors, $selector: '&') { ... }
Description
color-theme allows you to change the default color palette within the specified block. optionally, it lets you target a specific selector.
Parameters
NameDescriptionTypeDefault value
$palette
The color palette to be used within the scope of the block.
Map$colors
$selector
the $selector argument allows you to specify a different class than the current. It's especially useful when used with the render-color-themes mixin.
String'&'
Content
This mixin allows extra content to be passed (through the @content directive). Role: `color-theme` will temporarily override the default color map with the attributes of the specified `$palette`. This change is scoped to within the mixin block, and once the mixin has ended, the default color map will revert to its original state as defined by `$color`.
Example
SCSS
$green-theme: (
+  brand:                        #2c853c,
+  action:                       #00992b,
+  action-active:                #007b38,
+  background:                   #fff,
+  background-secondary:         #f4f4f4,
+  border:                       #ccc,
+  text:                         #121111,
+  text-active:                  #00992b,
+  reverse-text:                 #fff,
+  reverse-text-active:          #fff,
+);
+.card {
+  @include color-theme($green-theme) {
+    background-color: color(background);
+    color: color(text-active);
+  }
+}
CSS output
.card {
+  background-color: #fff;
+  color: #121111;
+}
SCSS
@include color-theme($green-theme, '.card') {
+  background-color: color(background);
+  color: color(text-active);
+}
CSS output
.card {
+  background-color: #fff;
+  color: #121111;
+}
Used by
General
mixins
button
@mixin button() { ... }
Description
The button mixin is a functional alias of the properties mixin, however, it's there to provide a semantic demarcation for it's intended purpose. Namely, we are using it to mimic the extend functionality for cases where CSS inheritance causes unintended cascading of button properties. In those cases, you can @include button($base-button, $secondary-button), and have this mixin provide all the computed values that would normally be overriden if we had used %extend
Parameters
None.
Requires
adjust-container-width
@mixin adjust-container-width() { ... }
Description
Adjust the current container by insetting or breaking out by X columns Can accept negative numbers todo: documentation.
Parameters
None.
centered-container
@mixin centered-container() { ... }
Description
centered-container mixin Creates a wrapper-less centered container using padding Depends on Neat. We use the global neat-grid variable for grid default, but you may pass it any value.
Parameters
None.
Used by
flex-container
@mixin centered-container() { ... }
Description
centered-container mixin Creates a wrapper-less centered container using padding Depends on Neat. We use the global neat-grid variable for grid default, but you may pass it any value.
Parameters
None.
Used by
Links
flex-container
@mixin responsive-container() { ... }
Description
Responsive container Creates a responsive container on each grid media as specified by the specified map
Parameters
None.
Requires
color-theme
@mixin color-theme($palette: $colors, $selector: '&') { ... }
Description
color-theme allows you to change the default color palette within the specified block. optionally, it lets you target a specific selector.
Parameters
NameDescriptionTypeDefault value
$palette
The color palette to be used within the scope of the block.
Map$colors
$selector
the $selector argument allows you to specify a different class than the current. It's especially useful when used with the render-color-themes mixin.
String'&'
Content
This mixin allows extra content to be passed (through the @content directive). Role: `color-theme` will temporarily override the default color map with the attributes of the specified `$palette`. This change is scoped to within the mixin block, and once the mixin has ended, the default color map will revert to its original state as defined by `$color`.
Example
$green-theme: (
-  brand:                        #2c853c,
-  action:                       #00992b,
-  action-active:                #007b38,
-  background:                   #fff,
-  background-secondary:         #f4f4f4,
-  border:                       #ccc,
-  text:                         #121111,
-  text-active:                  #00992b,
-  reverse-text:                 #fff,
-  reverse-text-active:          #fff,
-);
-.card {
-  @include color-theme($green-theme) {
-    background-color: color(background);
-    color: color(text-active);
-  }
-}
.card {
-  background-color: #fff;
-  color: #121111;
-}
@include color-theme($green-theme, '.card') {
-  background-color: color(background);
-  color: color(text-active);
-}
.card {
-  background-color: #fff;
-  color: #121111;
-}
Used by

\ No newline at end of file
+ }" data-collapsed="@mixin responsive-container() { ... }">@mixin responsive-container() { ... }
Description
Responsive container Creates a responsive container on each grid media as specified by the specified map
Parameters
None.
Requires

\ No newline at end of file
diff --git a/docs/variables/index.html b/docs/variables/index.html
index b94ab1586..28c78d760 100644
--- a/docs/variables/index.html
+++ b/docs/variables/index.html
@@ -1,46 +1,5 @@
 Decanter - v0.1.0-alpha1
variables | animations
variables
base-property
$base-property: all !default;
Description
Base property animation default.
base-delay
$base-delay: null !default;
Description
Base delay animation default.
base-duration
$base-duration: 250ms !default;
Description
Base duration animation default.
base-timing
$base-timing: ease-in-out !default;
Description
Base timing animation default.
base-transition
$base-transition: $base-property $base-duration $base-timing !default;
Description
Base transition animation default.
variables | borders
variables
base-border-radius
$base-border-radius: 3px !default;
Description
Base border radius.
base-border
$base-border: 1px solid color(border) !default;
Description
Base Border.
variables | breakpoint boundaries
variables
screen-xs-min
$screen-xs-min: 0px !default;
Description
Lower Boundary for extra small screens
Type
Variable
Used by
screen-sm-min
$screen-sm-min: 576px !default;
Description
Lower boundary for small screens
Type
Variable
Used by
screen-md-min
$screen-md-min: 768px !default;
Description
Lower boundary for medium screens
Type
Variable
Used by
screen-lg-min
$screen-lg-min: 992px !default;
Description
Lower boundary for large screens
Type
Variable
Used by
screen-xl-min
$screen-xl-min: $max-container-width !default;
Description
Lower boundary for extra large screens
Type
Variable
Used by
screen-xs-max
$screen-xs-max: $screen-sm-min - 1px !default;
Description
Upper boundary for extra small screens
Type
Variable
Requires
Used by
screen-sm-max
$screen-sm-max: $screen-md-min - 1px !default;
Description
Upper boundary for small screens
Type
Variable
Requires
Used by
screen-md-max
$screen-md-max: $screen-lg-min - 1px !default;
Description
Upper boundary for medium screens
Type
Variable
Requires
Used by
screen-lg-max
$screen-lg-max: $screen-xl-min - 1px !default;
Description
Upper boundary for large screens
Type
Variable
Requires
Used by
variables | colors
variables
colors
$colors: (
-    brand:                        #004fdc,
-    action:                       #004991,
-    action--active:               #005ddc,
-    background:                   #fff,
-    background--secondary:        #ddd,
-    border:                       #999,
-    text:                         #112,
-    text--active:                 #808080,
-    reverse-text:                 #fff,
-    reverse-text--active:         #dceefe,
-) !default;
Description
This variable is a sass map that overrides our generic color map. Use this to define your project's color palette.
Type
Map
Map structure
NameDescriptionTypeValue
brand
Brand Color
Color#004fdc
action
Action Color (such as links)
Color#004991
action--active
Action Color (when in hover, active and focus states)
Color#005ddc
background
Background color
Color#fff
background--secondary
Secondary Background Color
Color#ddd
border
Border Color
Color#999
text
Text color
Color#112
text--active
Text Color (when interacted with. This is an edge case)
Color$808080
reverse-text
Reverse Text Color (when the background is a dark color)
Color#fff
reverse-text--active
Reverse Text Color (when in hover, active and focus states)
Color#dceefe
custom-color-palette
$custom-color-palette: ()!default;
Description
If you would like to have multiple color palettes in a single project, you can do this by defining a new map stored within a variable of your choosing. This variable can then be passed directly to the color() function, such as color(red, $my-custom-colors). Note that you don't need to define any colors that you want to default to the default color map, and colors that don't exist in the color map will be defined in your custom color palette only.
Type
Map
Map structure
NameDescriptionTypeValue
brand
Brand Color
Color#004fdc
action
Action Color (such as links)
Color#004991
action--active
Action Color (when in hover, active and focus states)
Color#005ddc
background
Background color
Color#fff
background--secondary
Secondary Background Color
Color#ddd
border
Border Color
Color#999
text
Text color
Color#112
text--active
Text Color (when interacted with. This is an edge case)
Color$808080
reverse-text
Reverse Text Color (when the background is a dark color)
Color#fff
reverse-text--active
Reverse Text Color (when in hover, active and focus states)
Color#dceefe
variables | grid media
variables
media-xs
$media-xs: (
-    media: $screen-xs-min,
-) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)$screen-xs-min
Requires
variables | neat media queries
variables
media-xs-only
$media-xs-only: (
-    media: 'only screen and (max-width: #{$screen-xs-max})',
-) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)'only screen and (max-width: $screen-xs-max)'
Requires
media-xs-max
$media-xs-max: (
-    media: 'only screen and (max-width: #{$screen-xs-max})',
-) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)'only screen and (max-width: $screen-xs-max)'
Requires
media-sm
$media-sm: (
-    media: $screen-sm-min,
-) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)$screen-sm-min
Requires
media-sm-only
$media-sm-only: (
-    media: 'only screen and (min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max})',
-) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)'only screen and (min-width: $screen-sm-min) and (max-width: $screen-sm-max)'
Requires
media-sm-max
$media-sm-max: (
-    media: 'only screen and (max-width: #{$screen-sm-max})',
-) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)'only screen and (max-width: $screen-sm-max)'
Requires
media-md
$media-md: (
-    media: $screen-md-min,
-) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
$screen-md-min]
Grid media query.
String or Number (with unit)—
Requires
media-md-only
$media-md-only: (
-    media: 'only screen and (min-width: #{$screen-md-min}) and (max-width: #{$screen-md-max})',
-) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)'only screen and (min-width: $screen-md-min) and (max-width: $screen-md-max)'
Requires
media-md-max
$media-md-max: (
-    media: 'only screen and (max-width: #{$screen-md-max})',
-) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)'only screen and (max-width: $screen-md-max)'
Requires
media-lg
$media-lg: (
-    media: $screen-lg-min,
-) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
$screen-lg-min]
Grid media query.
String or Number (with unit)—
Requires
media-lg-only
$media-lg-only: (
-    media: 'only screen and (min-width: #{$screen-lg-min}) and (max-width: #{$screen-lg-max})',
-) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)'only screen and (min-width: $screen-lg-min) and (max-width: $screen-lg-max)'
Requires
media-lg-max
$media-lg-max: (
-    media: 'only screen and (max-width: #{$screen-lg-max})',
-) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)'only screen and (max-width: $screen-lg-max)'
Requires
media-xl
$media-xl: (
-    media: $screen-xl-min,
-) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
$screen-xl-min]
Grid media query.
String or Number (with unit)—
Requires
media-print
$media-print: (
-    columns: 12,
-    gutter: .25in,
-    media: 'only print',
-) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)12
gutter
Default grid gutter width between columns.
Number (with unit).25in
'only
print'] Grid media query.
String or Number (with unit)—
variables|bourbon
variables
bourbon
$bourbon: (
+">
Decanter Settings
variables
root-font-size
$root-font-size: 10px !default;
Description
Root font size in pixels. Used for converting rem to pixels.
Type
Number or Pixel measurement
base-font-size
$base-font-size: 18px !default;
Description
Base font size in pixels. Used for converting between em and absolute lengths.
Type
Number or Pixel measurement
grid-columns
$grid-columns: 12 !default;
Description
Grid Columns How many columns in the default grid
Type
Number
gutter
$gutter: 20px !default;
Description
Gutter The space on the left and right of default grid elements
Type
Number or Pixel measurement
max-container-width
$max-container-width: 1200px !default;
Type
Number or Pixel measurement
max-content-width
$max-content-width: $max-container-width - ($gutter * 2) !default;
Description
Max Content Width Removes gutters from the max-container-width constant to give us a computed content-width.
Type
Number or Pixel measurement
breakpoint-helper
$breakpoint-helper: true;
Description
Breakpoint Helper. Generates a set of configurable breakpoint visual prompts to aid during development.
Type
Bool
Bourbon Settings
variables
bourbon
$bourbon: (
     "modular-scale-ratio": 1.25,
 ) !default;
Description
Bourbon Settings
Bourbon default overrides for decanter.
Type
Map
Map structure
NameDescriptionTypeValue
contrast-switch-dark-color
Global dark color for the contrast-switch function.
Color#000
contrast-switch-light-color
Global light color for the contrast-switch function.
Color#fff
global-font-file-formats
Global font file formats for the font-face mixin.
List("ttf", "woff2", "woff")
modular-scale-base
Global base value for the modular-scale function.
Number or Em measurement1em
{number$default-theme-group:
( default: ( palette: $colors, selector: '&' ), ) !default;} modular-scale-ratio [$major-third (1.25)] Global base ratio for the modular-scale function.
Map—
rails-asset-pipeline
Set this to true when using the Rails Asset Pipeline and Bourbon will write asset paths using sass-rails’ asset helpers.
Booleanfalse
Example
$bourbon: (
   "contrast-switch-dark-color": #000,
@@ -49,28 +8,75 @@
   "modular-scale-base": 1em,
   "modular-scale-ratio": $major-third,
   "rails-asset-pipeline": false,
-);
Links
variables|buttons
variables
base-button
$base-button: (
-    bg-color: color(action),
-    color: color(reverse-text),
-    border: none,
-    cursor: pointer,
-    display: inline-block,
-    material-shadow: flat,
-    font-family: $base-font-family,
-    line-height: $base-line-height,
-    font-weight: inherit,
-    font-size: inherit,
+);
Links
Neat Settings
variables
neat-grid
$neat-grid: (
+    columns: $grid-columns,
+    gutter:  $gutter,
+    media: null,
+    color: rgba(#00d4ff, 0.25),
+    direction: ltr,
+) !default;
Description
This variable is a sass map that overrides Neat's default grid settings. Use this to define your project's grid properties incluting gutters and total column count.
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)12
gutter
Default grid gutter width between columns.
Number (with unit)20px
media
Grid media query.
String or Number (with unit)null
color
Default visual grid color.
Colorrgba(#00d4ff, 0.25)
Example
SCSS
$neat-grid: (
+  columns: 12,
+  gutter: 20px,
+);
Links
Animation & Transition Variables
variables
base-property
$base-property: all !default;
Description
Base property animation default.
base-delay
$base-delay: null !default;
Description
Base delay animation default.
base-duration
$base-duration: 250ms !default;
Description
Base duration animation default.
base-timing
$base-timing: ease-in-out !default;
Description
Base timing animation default.
base-transition
$base-transition: $base-property $base-duration $base-timing !default;
Description
Base transition animation default.
Used by
Border Variables
variables
base-border-radius
$base-border-radius: 3px !default;
Description
Base border radius.
base-border
$base-border: 1px solid color(border) !default;
Description
Base Border.
Used by
Breakpoint Variables
variables
screen-xs-min
$screen-xs-min: 0px !default;
Description
Lower Boundary for extra small screens
Type
Variable
Used by
screen-sm-min
$screen-sm-min: 576px !default;
Description
Lower boundary for small screens
Type
Variable
Used by
screen-md-min
$screen-md-min: 768px !default;
Description
Lower boundary for medium screens
Type
Variable
Used by
screen-lg-min
$screen-lg-min: 992px !default;
Description
Lower boundary for large screens
Type
Variable
Used by
screen-xl-min
$screen-xl-min: $max-container-width !default;
Description
Lower boundary for extra large screens
Type
Variable
Used by
screen-xs-max
$screen-xs-max: $screen-sm-min - 1px !default;
Description
Upper boundary for extra small screens
Type
Variable
Requires
Used by
screen-sm-max
$screen-sm-max: $screen-md-min - 1px !default;
Description
Upper boundary for small screens
Type
Variable
Requires
Used by
screen-md-max
$screen-md-max: $screen-lg-min - 1px !default;
Description
Upper boundary for medium screens
Type
Variable
Requires
Used by
screen-lg-max
$screen-lg-max: $screen-xl-min - 1px !default;
Description
Upper boundary for large screens
Type
Variable
Requires
Used by
Button Variables
variables
base-button
$base-button: (
+  box-shadow: material-shadow(flat),
+  appearance: none,
+  background-color: color(action),
+  border: none,
+  color: color(reverse-text),
+  cursor: pointer,
+  display: inline-block,
+  font-family: $base-font-family,
+  font-size: inherit,
+  -webkit-font-smoothing: antialiased,
+  font-weight: inherit,
+  line-height: $base-line-height,
+  padding: em(6px) em($small-spacing) em(7px),
+  text-align: center,
+  text-decoration: none,
+  user-select: none,
+  vertical-align: middle,
+  transition: $base-transition,
+
+  '#{$hocus}': (
+    background-color: color(action--active),
+    color: color(reverse-text--active),
     text-decoration: none,
-    transition: $base-transition,
-    padding: 'em(6px) em($_spacing) em(7px)',
-    text-align: center,
-    spacing: $small-spacing,
-    bg-color--active: color(action--active),
-    color--active: color(reverse-text--active),
-    border--active: null,
-    material-shadow--active: null,
-    text-decoration--active: none,
-);
Description
This variable is a sass map that overrides our generic button map.
Map structure
NameDescriptionTypeValue
bg-color
Background color
Colorcolor(action)
color
Text Color
Colorcolor(reverse-text)
border
Border properties. Accepts shorthand.
Length(with unit) or String'none'
variables|containers
variables
default-container
$default-container: (
+  ),
+
+  '&:disabled, &.disabled': (
+    background-color: color(action),
+    color: color(reverse-text),
+    cursor: not-allowed,
+    opacity: .5,
+
+    '&:hover': (
+      cursor: not-allowed,
+    ),
+  ),
+) !default;
Description
This variable is a sass map that overrides our generic button map.
Requires
secondary-button
$secondary-button: (
+  background-color: inherit,
+  border: $base-border,
+  color: color(text),
+  font-weight: 600,
+  padding: em(7px) em($base-spacing) em(9px),
+
+  '#{$hocus}': (
+    background-color: inherit,
+    border-color: color(action),
+    color: color(action),
+  ),
+) !default;
Requires
Color Variables
variables
colors
$colors: (
+    brand:                        #004fdc,
+    action:                       #006cb8,
+    action--active:               #33548F,
+    background:                   #fff,
+    background--secondary:        #ddd,
+    border:                       #999,
+    text:                         #112,
+    text--active:                 #808080,
+    reverse-text:                 #fff,
+    reverse-text--active:         #dceefe,
+) !default;
Description
This variable is a sass map that overrides our generic color map. Use this to define your project's color palette.
Type
Map
Map structure
NameDescriptionTypeValue
brand
Brand Color
Color#004fdc
action
Action Color (such as links)
Color#33548F
action--active
Action Color (when in hover, active and focus states)
Color#33548F
background
Background color
Color#fff
background--secondary
Secondary Background Color
Color#ddd
border
Border Color
Color#999
text
Text color
Color#112
text--active
Text Color (when interacted with. This is an edge case)
Color$808080
reverse-text
Reverse Text Color (when the background is a dark color)
Color#fff
reverse-text--active
Reverse Text Color (when in hover, active and focus states)
Color#dceefe
custom-color-palette
$custom-color-palette: ()!default;
Description
If you would like to have multiple color palettes in a single project, you can do this by defining a new map stored within a variable of your choosing. This variable can then be passed directly to the color() function, such as color(red, $my-custom-colors). Note that you don't need to define any colors that you want to default to the default color map, and colors that don't exist in the color map will be defined in your custom color palette only.
Type
Map
Map structure
NameDescriptionTypeValue
brand
Brand Color
Color#004fdc
action
Action Color (such as links)
Color#004991
action--active
Action Color (when in hover, active and focus states)
Color#005ddc
background
Background color
Color#fff
background--secondary
Secondary Background Color
Color#ddd
border
Border Color
Color#999
text
Text color
Color#112
text--active
Text Color (when interacted with. This is an edge case)
Color$808080
reverse-text
Reverse Text Color (when the background is a dark color)
Color#fff
reverse-text--active
Reverse Text Color (when in hover, active and focus states)
Color#dceefe
Container Variables
variables
default-container
$default-container: (
   xs: ( columns: 12, grid-media: $media-xs-only,  v-space: 1em, max-width: false, grid-collapse: false ),
   sm: ( columns: 12, grid-media: $media-sm-only,  v-space: 1em, max-width: false, grid-collapse: false ),
   md: ( columns: 12, grid-media: $media-md-only,  v-space: 1em, max-width: false, grid-collapse: false ),
@@ -84,38 +90,61 @@
   "modular-scale-base": 1em,
   "modular-scale-ratio": $major-third,
   "rails-asset-pipeline": false,
-);
default-container--collapsed
$default-container--collapsed: (
+);
default-container--collapsed
$default-container--collapsed: (
   xs: ( columns: 12, grid-media: $media-xs-only,  v-space: 1em, max-width: false, grid-collapse: true ),
   sm: ( columns: 12, grid-media: $media-sm-only,  v-space: 1em, max-width: false, grid-collapse: true ),
   md: ( columns: 12, grid-media: $media-md-only,  v-space: 1em, max-width: false, grid-collapse: true ),
   lg: ( columns: 12, grid-media: $media-lg-only,  v-space: 1em, max-width: false, grid-collapse: true ),
   xl: ( columns: 12, grid-media: $media-xl,       v-space: 1em, max-width: true,  grid-collapse: true ),
   print: ( columns: 12, grid-media: $media-print, v-space: 1em, max-width: false, grid-collapse: true ),
-) !default;
custom-container
$custom-container: () !default;
Description
You can create any number of custom responsive containers
variables|decanter
variables
root-font-size
$root-font-size: 10px !default;
Description
Root font size in pixels. Used for converting rem to pixels.
Type
Number or Pixel measurement
base-font-size
$base-font-size: 18px !default;
Description
Base font size in pixels. Used for converting between em and absolute lengths.
Type
Number or Pixel measurement
grid-columns
$grid-columns: 12 !default;
Description
Grid Columns How many columns in the default grid
Type
Number
gutter
$gutter: 20px !default;
Description
Gutter The space on the left and right of default grid elements
Type
Number or Pixel measurement
max-container-width
$max-container-width: 1200px !default;
Type
Number or Pixel measurement
max-content-width
$max-content-width: $max-container-width - ($gutter * 2) !default;
Description
Max Content Width Removes gutters from the max-container-width constant to give us a computed content-width.
Type
Number or Pixel measurement
breakpoint-helper
$breakpoint-helper: true;
Description
Breakpoint Helper. Generates a set of configurable breakpoint visual prompts to aid during development.
Type
Bool
variables|forms
variables
form-box-shadow
$form-box-shadow: inset 0 1px 3px rgba(color(black), 0.06) !default;
Description
Form box shadow default.
form-box-shadow-focus
$form-box-shadow-focus: $form-box-shadow, 0 0 5px adjust-color(color(blue), $lightness: -5%, $alpha: -0.3) !default;
Description
Form box shadow focus default.
variables|neat
variables
neat-grid
$neat-grid: (
-    columns: $grid-columns,
-    gutter:  $gutter,
-    media: null,
-    color: rgba(#00d4ff, 0.25),
-    direction: ltr,
-) !default;
Description
This variable is a sass map that overrides Neat's default grid settings. Use this to define your project's grid properties incluting gutters and total column count.
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)12
gutter
Default grid gutter width between columns.
Number (with unit)20px
media
Grid media query.
String or Number (with unit)null
color
Default visual grid color.
Colorrgba(#00d4ff, 0.25)
Example
SCSS
$neat-grid: (
-  columns: 12,
-  gutter: 20px,
-);
Links
variables|typography
variables
font-stack-monospace
$font-stack-monospace: 'Source Code Pro', $font-stack-monaco !default;
Description
Font Stack Monospace.
This is outputted via font-family: $font-stack-monospace;
Type
List
Example
.my-class {
-  font-family: $font-stack-monospace;
-}
monospace-source
$monospace-source: 'https://fonts.googleapis.com/css?family=Source+Code+Pro' !default;
Description
Monospace Source.
The Monospace font files from google fonts.
Type
String
font-stack-sans-serif
$font-stack-sans-serif: 'Noto Sans', $font-stack-helvetica !default;
Description
Font stack sans serif
This is outputted via font-family: $font-stack-sans-serif;
Type
List
Example
.my-class {
-  font-family: $font-stack-sans-serif;
-}
sans-serif-source
$sans-serif-source: 'https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i' !default;
Description
Sans serif source.
The Noto Sans font files from google fonts.
Type
String
font-stack-serif
$font-stack-serif: 'Noto Serif', $font-stack-georgia !default;
Description
Font stack serif
This is outputted via font-family: $font-stack-serif;
Type
List
Example
.my-class {
-  font-family: $font-stack-serif;
-}
serif-source
$serif-source: 'https://fonts.googleapis.com/css?family=Noto+Serif:400,400i,700,700i' !default;
Description
Serif Source.
The Noto Serif font files from google fonts.
Type
String
font-family-serif
$font-family-serif: $font-stack-serif !default;
Description
Font Family Serif.
Type
List
Example
.my-class {
-  font-family: $font-family-serif;
-}
font-family-sans-serif
$font-family-sans-serif: $font-stack-sans-serif !default;
Description
Font Family Sans Serif.
Type
List
Example
.my-class {
-  font-family: $font-family-sans-serif;
-}
font-family-monospace
$font-family-monospace: $font-stack-monospace !default;
Description
Font Family Monospace.
Type
List
Example
.my-class {
-  font-family: $font-family-monospace;
-}
base-font-family
$base-font-family: $font-family-sans-serif !default;
Description
Base Font Family Setting.
Type
List
Example
.my-class {
-  font-family: $base-font-family;
-}
heading-font-family
$heading-font-family: $font-family-serif !default;
Description
Heading Font Family.
Type
List
Example
.my-class {
-  font-family: $heading-font-family;
-}
code-font-family
$code-font-family: $font-family-monospace !default;
Description
Code Font Family.
Type
List
Example
.my-class {
-  font-family: $code-font-family;
-}
base-line-height
$base-line-height: 1.5 !default;
Description
Base Line Height.
Type
Number
TODO's
  • find out where this is used and let people know. I assume everywhere.
heading-line-height
$heading-line-height: 1.2 !default;
Description
Heading Line Height.
Type
Number
TODO's
  • find out where this is used and let people know. I assume everywhere.
all-headlines
$all-headlines: 'h1, h2, h3, h4, h5, h6' !default;
Description
All Headlines list selector
Type
List
variables|vertical-rhythm
variables
base-spacing
$base-spacing: modular-scale(0) !default;
Description
Base vertical spacing. Uses the bourbon function modular-scale to procude an em size.
Type
String
Example
$_spacing: $base-spacing; // 1.77689em
Links
small-spacing
$small-spacing: modular-scale(-1) !default;
Description
Small vertical spacing. Uses the bourbon function modular-scale to procude an em size.
Type
String
Example
$_spacing: $small-spacing; // 0.75019em
Links

\ No newline at end of file
+) !default;
custom-container
$custom-container: () !default;
Description
You can create any number of custom responsive containers
Form Variables
variables
form-box-shadow
$form-box-shadow: inset 0 1px 3px rgba(color(black), 0.06) !default;
Description
Default form box-shadow
form-box-shadow--focus
$form-box-shadow--focus: $form-box-shadow, 0 0 5px adjust-color(color(blue), $lightness: -5%, $alpha: -0.3) !default;
Description
Default focused form box-shadow
Links
Grid Media Variables
variables
media-xs
$media-xs: (
+    media: $screen-xs-min,
+) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)$screen-xs-min
Requires
Links
media-xs-only
$media-xs-only: (
+    media: 'only screen and (max-width: #{$screen-xs-max})',
+) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)'only screen and (max-width: $screen-xs-max)'
Requires
Links
media-xs-max
$media-xs-max: (
+    media: 'only screen and (max-width: #{$screen-xs-max})',
+) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)'only screen and (max-width: $screen-xs-max)'
Requires
Links
media-sm
$media-sm: (
+    media: $screen-sm-min,
+) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)$screen-sm-min
Requires
Links
media-sm-only
$media-sm-only: (
+    media: 'only screen and (min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max})',
+) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)'only screen and (min-width: $screen-sm-min) and (max-width: $screen-sm-max)'
Requires
Links
media-sm-max
$media-sm-max: (
+    media: 'only screen and (max-width: #{$screen-sm-max})',
+) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)'only screen and (max-width: $screen-sm-max)'
Requires
Links
media-md
$media-md: (
+    media: $screen-md-min,
+) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
$screen-md-min]
Grid media query.
String or Number (with unit)—
Requires
Links
media-md-only
$media-md-only: (
+    media: 'only screen and (min-width: #{$screen-md-min}) and (max-width: #{$screen-md-max})',
+) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)'only screen and (min-width: $screen-md-min) and (max-width: $screen-md-max)'
Requires
Links
media-md-max
$media-md-max: (
+    media: 'only screen and (max-width: #{$screen-md-max})',
+) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)'only screen and (max-width: $screen-md-max)'
Requires
Links
media-lg
$media-lg: (
+    media: $screen-lg-min,
+) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
$screen-lg-min]
Grid media query.
String or Number (with unit)—
Requires
Links
media-lg-only
$media-lg-only: (
+    media: 'only screen and (min-width: #{$screen-lg-min}) and (max-width: #{$screen-lg-max})',
+) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)'only screen and (min-width: $screen-lg-min) and (max-width: $screen-lg-max)'
Requires
Links
media-lg-max
$media-lg-max: (
+    media: 'only screen and (max-width: #{$screen-lg-max})',
+) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
media
Grid media query.
String or Number (with unit)'only screen and (max-width: $screen-lg-max)'
Requires
Links
media-xl
$media-xl: (
+    media: $screen-xl-min,
+) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)null
gutter
Default grid gutter width between columns.
Number (with unit)null
$screen-xl-min]
Grid media query.
String or Number (with unit)—
Requires
Links
media-print
$media-print: (
+    columns: 12,
+    gutter: .25in,
+    media: 'only print',
+) !default;
Type
Map
Map structure
NameDescriptionTypeValue
columns
Default number of the total grid columns.
Number (unitless)12
gutter
Default grid gutter width between columns.
Number (with unit).25in
'only
print'] Grid media query.
String or Number (with unit)—
Links
Typography Variables
variables
base-fonts
$base-fonts: (
+  monospace:    'https://fonts.googleapis.com/css?family=Source+Code+Pro',
+  sans-serif:   'https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i',
+  serif:        'https://fonts.googleapis.com/css?family=Noto+Serif:400,400i,700,700i',
+) !default;
base-font-families
$base-font-families: (
+  monospace:  "'Source Code Pro', #{$font-stack-monaco}",
+  sans-serif: "'Noto Sans', #{$font-stack-helvetica}",
+  serif:      "'Noto Serif', #{$font-stack-georgia}"
+) !default;
base-font-family
$base-font-family: unquote(map-get($base-font-families, sans-serif)) !default;
Description
Base Font Family Setting.
Used by
heading-font-family
$heading-font-family: unquote(map-get($base-font-families, serif)) !default;
Description
Heading Font Family.
monospace-font-family
$monospace-font-family: unquote(map-get($base-font-families, monospace)) !default;
Description
Monospace Font Family.
base-line-height
$base-line-height: 1.5 !default;
Description
Base Line Height.
Used by
TODO's
  • find out where this is used and let people know. I assume everywhere.
heading-line-height
$heading-line-height: 1.2 !default;
Description
Heading Line Height.
TODO's
  • find out where this is used and let people know. I assume everywhere.
all-headlines
$all-headlines: 'h1, h2, h3, h4, h5, h6' !default;
Description
All Headlines selector
Note: This selector must be used with variable interpolation when used to declare an element.
Example
Use Documentation
#{$all-headlines} {
+  font-weight: bold;
+}
Output
h1, h2, h3, h4, h5, h6 {
+  font-weight: bold;
+}
Links
hocus
$hocus: '&:hover, &:active, &:focus' !default;
Description
hover, active, focus pseudo-class variable
Note: This selector must be used with variable interpolation when used to declare an element.
Example
Use Documentation
#{$hocus} {
+  font-weight: bold;
+}
Output
&:hover, &:active, &:focus {
+  font-weight: bold;
+}
Used by
Links
pocus
$pocus: '&:hover, &:focus' !default;
Description
hover, focus pseudo-class variable
Note: This pseudo-class must be used with variable interpolation when used to declare an element.
Example
Use Documentation
#{$pocus} {
+  font-weight: bold;
+}
Output
&:hover, &:focus {
+  font-weight: bold;
+}
Links
Vertical Rhythm Variables
variables
base-spacing
$base-spacing: modular-scale(0) !default;
Description
Base vertical spacing. Uses the bourbon function modular-scale to produce an em size.
Type
String
Example
$_spacing: $base-spacing; // 1.77689em
Used by
Links
small-spacing
$small-spacing: modular-scale(-1) !default;
Description
Small vertical spacing. Uses the bourbon function modular-scale to produce an em size.
Type
String
Example
$_spacing: $small-spacing; // 0.75019em
Used by
Links

\ No newline at end of file
diff --git a/examples/css/index.css b/examples/css/index.css
index 9d1197adc..12a84b846 100644
--- a/examples/css/index.css
+++ b/examples/css/index.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 62.5%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.8888888889em;
   line-height: 1.5;
-  padding: 0.1666666667em 0.8em 0.1944444444em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.8888888889em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
+}
+
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3715,8 +3804,8 @@ ol {
 }
 
 ol li {
-  padding-left: 0.1111111111em;
-  margin-left: -0.1111111111em;
+  padding-left: 0.2222222222em;
+  margin-left: -0.2222222222em;
 }
 
 ol ol {
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-q::before {
-  content: open-quote;
 }
 
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
-}
-
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.3333333333em 0.8em 0.3888888889em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
diff --git a/examples/layout/four-column/molive/css/molive.css b/examples/layout/four-column/molive/css/molive.css
index f924ec531..0663b36da 100644
--- a/examples/layout/four-column/molive/css/molive.css
+++ b/examples/layout/four-column/molive/css/molive.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 62.5%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.8888888889em;
   line-height: 1.5;
-  padding: 0.1666666667em 0.8em 0.1944444444em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.8888888889em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
+}
+
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3715,8 +3804,8 @@ ol {
 }
 
 ol li {
-  padding-left: 0.1111111111em;
-  margin-left: -0.1111111111em;
+  padding-left: 0.2222222222em;
+  margin-left: -0.2222222222em;
 }
 
 ol ol {
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-q::before {
-  content: open-quote;
 }
 
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
-}
-
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.3333333333em 0.8em 0.3888888889em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
diff --git a/examples/layout/four-column/molive/scss/molive.scss b/examples/layout/four-column/molive/scss/molive.scss
index a9d8b89e2..0cb6ba08f 100644
--- a/examples/layout/four-column/molive/scss/molive.scss
+++ b/examples/layout/four-column/molive/scss/molive.scss
@@ -1,8 +1,7 @@
 @charset 'UTF-8';
 
 // I like big fonts I cannot lie.
-$root-font-size: 20px;
-$base-font-size: 36px;
+$base-font-size: 18px;
 
 // Decant.
 @import "decanter";
diff --git a/examples/layout/full-width/bricks/css/bricks.css b/examples/layout/full-width/bricks/css/bricks.css
index 39e81184a..ec45e832d 100644
--- a/examples/layout/full-width/bricks/css/bricks.css
+++ b/examples/layout/full-width/bricks/css/bricks.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 62.5%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.8888888889em;
   line-height: 1.5;
-  padding: 0.1666666667em 0.8em 0.1944444444em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.8888888889em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
+}
+
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3715,8 +3804,8 @@ ol {
 }
 
 ol li {
-  padding-left: 0.1111111111em;
-  margin-left: -0.1111111111em;
+  padding-left: 0.2222222222em;
+  margin-left: -0.2222222222em;
 }
 
 ol ol {
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-q::before {
-  content: open-quote;
 }
 
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
-}
-
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.3333333333em 0.8em 0.3888888889em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
diff --git a/examples/layout/full-width/bricks/scss/bricks.scss b/examples/layout/full-width/bricks/scss/bricks.scss
index da1bc6708..08b36d30b 100644
--- a/examples/layout/full-width/bricks/scss/bricks.scss
+++ b/examples/layout/full-width/bricks/scss/bricks.scss
@@ -1,8 +1,7 @@
 @charset 'UTF-8';
 
 // I like big fonts I cannot lie.
-$root-font-size: 20px;
-$base-font-size: 36px;
+$base-font-size: 18px;
 
 // Decant.
 @import "decanter";
diff --git a/examples/layout/one-column/basic/css/basic.css b/examples/layout/one-column/basic/css/basic.css
index f1a7dfc83..9b54717a7 100644
--- a/examples/layout/one-column/basic/css/basic.css
+++ b/examples/layout/one-column/basic/css/basic.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 125%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
   line-height: 1.5;
-  padding: 0.1666666667em 0.8em 0.1944444444em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
+}
+
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-q::before {
-  content: open-quote;
-}
-
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
 }
 
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.1666666667em 0.8em 0.1944444444em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
diff --git a/examples/layout/three-column/bars/css/bars.css b/examples/layout/three-column/bars/css/bars.css
index da8e492db..364b9642c 100644
--- a/examples/layout/three-column/bars/css/bars.css
+++ b/examples/layout/three-column/bars/css/bars.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 125%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
   line-height: 1.5;
-  padding: 0.1666666667em 0.8em 0.1944444444em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
+}
+
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-q::before {
-  content: open-quote;
-}
-
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
 }
 
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.1666666667em 0.8em 0.1944444444em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
diff --git a/examples/layout/three-column/battleship/css/battleship.css b/examples/layout/three-column/battleship/css/battleship.css
index d4aee2f16..5dce5c5ab 100644
--- a/examples/layout/three-column/battleship/css/battleship.css
+++ b/examples/layout/three-column/battleship/css/battleship.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 125%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
   line-height: 1.5;
-  padding: 0.1666666667em 0.8em 0.1944444444em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
+}
+
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-q::before {
-  content: open-quote;
-}
-
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
 }
 
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.1666666667em 0.8em 0.1944444444em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
diff --git a/examples/layout/three-column/blastila/left/css/blastila-left.css b/examples/layout/three-column/blastila/left/css/blastila-left.css
index 6983141d9..9cb2f39fb 100644
--- a/examples/layout/three-column/blastila/left/css/blastila-left.css
+++ b/examples/layout/three-column/blastila/left/css/blastila-left.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 125%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
   line-height: 1.5;
-  padding: 0.1666666667em 0.8em 0.1944444444em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
+}
+
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-q::before {
-  content: open-quote;
-}
-
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
 }
 
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.1666666667em 0.8em 0.1944444444em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
diff --git a/examples/layout/three-column/blastila/right/css/blastila-right.css b/examples/layout/three-column/blastila/right/css/blastila-right.css
index b0f7f81bc..091c7466d 100644
--- a/examples/layout/three-column/blastila/right/css/blastila-right.css
+++ b/examples/layout/three-column/blastila/right/css/blastila-right.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 125%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
   line-height: 1.5;
-  padding: 0.1666666667em 0.8em 0.1944444444em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
+}
+
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-q::before {
-  content: open-quote;
-}
-
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
 }
 
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.1666666667em 0.8em 0.1944444444em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
diff --git a/examples/layout/three-column/chess/css/chess.css b/examples/layout/three-column/chess/css/chess.css
index 3d44beacb..3afd89207 100644
--- a/examples/layout/three-column/chess/css/chess.css
+++ b/examples/layout/three-column/chess/css/chess.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 125%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
   line-height: 1.5;
-  padding: 0.1666666667em 0.8em 0.1944444444em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
+}
+
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-q::before {
-  content: open-quote;
-}
-
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
 }
 
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.1666666667em 0.8em 0.1944444444em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
diff --git a/examples/layout/three-column/cuttoner/left/css/cuttoner-left.css b/examples/layout/three-column/cuttoner/left/css/cuttoner-left.css
index 86d2b5f97..1dcaf9432 100644
--- a/examples/layout/three-column/cuttoner/left/css/cuttoner-left.css
+++ b/examples/layout/three-column/cuttoner/left/css/cuttoner-left.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 125%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
   line-height: 1.5;
-  padding: 0.1666666667em 0.8em 0.1944444444em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
+}
+
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-q::before {
-  content: open-quote;
-}
-
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
 }
 
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.1666666667em 0.8em 0.1944444444em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
diff --git a/examples/layout/three-column/cuttoner/right/css/cuttoner-right.css b/examples/layout/three-column/cuttoner/right/css/cuttoner-right.css
index 5891efdc2..7e9865fb1 100644
--- a/examples/layout/three-column/cuttoner/right/css/cuttoner-right.css
+++ b/examples/layout/three-column/cuttoner/right/css/cuttoner-right.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 125%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
   line-height: 1.5;
-  padding: 0.1666666667em 0.8em 0.1944444444em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
+}
+
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-q::before {
-  content: open-quote;
-}
-
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
 }
 
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.1666666667em 0.8em 0.1944444444em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
diff --git a/examples/layout/three-column/percles/left/css/percles-left.css b/examples/layout/three-column/percles/left/css/percles-left.css
index a06cc6145..bce662304 100644
--- a/examples/layout/three-column/percles/left/css/percles-left.css
+++ b/examples/layout/three-column/percles/left/css/percles-left.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 125%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
   line-height: 1.5;
-  padding: 0.1666666667em 0.8em 0.1944444444em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
+}
+
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-q::before {
-  content: open-quote;
-}
-
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
 }
 
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.1666666667em 0.8em 0.1944444444em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
diff --git a/examples/layout/three-column/percles/right/css/percles-right.css b/examples/layout/three-column/percles/right/css/percles-right.css
index 2a533c7d8..ab623a575 100644
--- a/examples/layout/three-column/percles/right/css/percles-right.css
+++ b/examples/layout/three-column/percles/right/css/percles-right.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 125%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
   line-height: 1.5;
-  padding: 0.1666666667em 0.8em 0.1944444444em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
+}
+
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-q::before {
-  content: open-quote;
-}
-
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
 }
 
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.1666666667em 0.8em 0.1944444444em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
diff --git a/examples/layout/three-column/robot/css/robot.css b/examples/layout/three-column/robot/css/robot.css
index 2b3e774d8..a8b97d48c 100644
--- a/examples/layout/three-column/robot/css/robot.css
+++ b/examples/layout/three-column/robot/css/robot.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 125%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
   line-height: 1.5;
-  padding: 0.1666666667em 0.8em 0.1944444444em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
+}
+
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-q::before {
-  content: open-quote;
-}
-
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
 }
 
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.1666666667em 0.8em 0.1944444444em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
diff --git a/examples/layout/three-column/space-invader/css/space-invader.css b/examples/layout/three-column/space-invader/css/space-invader.css
index d2b547a53..b1b35d72d 100644
--- a/examples/layout/three-column/space-invader/css/space-invader.css
+++ b/examples/layout/three-column/space-invader/css/space-invader.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 125%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
   line-height: 1.5;
-  padding: 0.1666666667em 0.8em 0.1944444444em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
+}
+
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-q::before {
-  content: open-quote;
-}
-
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
 }
 
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.1666666667em 0.8em 0.1944444444em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
diff --git a/examples/layout/three-column/strigges/css/strigges.css b/examples/layout/three-column/strigges/css/strigges.css
index f02a35375..7963a77dc 100644
--- a/examples/layout/three-column/strigges/css/strigges.css
+++ b/examples/layout/three-column/strigges/css/strigges.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 125%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
   line-height: 1.5;
-  padding: 0.1666666667em 0.8em 0.1944444444em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
+}
+
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-q::before {
-  content: open-quote;
-}
-
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
 }
 
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.1666666667em 0.8em 0.1944444444em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
diff --git a/examples/layout/three-column/sunset-delorean/left/css/sunset-delorean-left.css b/examples/layout/three-column/sunset-delorean/left/css/sunset-delorean-left.css
index 7fddf0048..bdf0f8269 100644
--- a/examples/layout/three-column/sunset-delorean/left/css/sunset-delorean-left.css
+++ b/examples/layout/three-column/sunset-delorean/left/css/sunset-delorean-left.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 125%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
   line-height: 1.5;
-  padding: 0.1666666667em 0.8em 0.1944444444em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
+}
+
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-q::before {
-  content: open-quote;
-}
-
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
 }
 
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.1666666667em 0.8em 0.1944444444em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
diff --git a/examples/layout/three-column/sunset-delorean/right/css/sunset-delorean-right.css b/examples/layout/three-column/sunset-delorean/right/css/sunset-delorean-right.css
index 4cb22f2e2..ebff9a8b8 100644
--- a/examples/layout/three-column/sunset-delorean/right/css/sunset-delorean-right.css
+++ b/examples/layout/three-column/sunset-delorean/right/css/sunset-delorean-right.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 125%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
   line-height: 1.5;
-  padding: 0.1666666667em 0.8em 0.1944444444em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
+}
+
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-q::before {
-  content: open-quote;
-}
-
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
 }
 
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.1666666667em 0.8em 0.1944444444em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
diff --git a/examples/layout/three-column/thions/bottom/css/thions-bottom.css b/examples/layout/three-column/thions/bottom/css/thions-bottom.css
index c9231bc18..4757c9530 100644
--- a/examples/layout/three-column/thions/bottom/css/thions-bottom.css
+++ b/examples/layout/three-column/thions/bottom/css/thions-bottom.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 125%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
   line-height: 1.5;
-  padding: 0.1666666667em 0.8em 0.1944444444em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
+}
+
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-q::before {
-  content: open-quote;
-}
-
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
 }
 
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.1666666667em 0.8em 0.1944444444em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
diff --git a/examples/layout/three-column/thions/top/css/thions-top.css b/examples/layout/three-column/thions/top/css/thions-top.css
index 7af6f1262..e64eefd75 100644
--- a/examples/layout/three-column/thions/top/css/thions-top.css
+++ b/examples/layout/three-column/thions/top/css/thions-top.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 125%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
   line-height: 1.5;
-  padding: 0.1666666667em 0.8em 0.1944444444em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
+}
+
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-q::before {
-  content: open-quote;
-}
-
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
 }
 
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.1666666667em 0.8em 0.1944444444em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
diff --git a/examples/layout/three-column/valmer/left/css/valmer-left.css b/examples/layout/three-column/valmer/left/css/valmer-left.css
index 562682c96..58f0fa254 100644
--- a/examples/layout/three-column/valmer/left/css/valmer-left.css
+++ b/examples/layout/three-column/valmer/left/css/valmer-left.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 125%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
   line-height: 1.5;
-  padding: 0.1666666667em 0.8em 0.1944444444em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
+}
+
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-q::before {
-  content: open-quote;
-}
-
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
 }
 
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.1666666667em 0.8em 0.1944444444em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
diff --git a/examples/layout/three-column/valmer/right/css/valmer-right.css b/examples/layout/three-column/valmer/right/css/valmer-right.css
index f8bb3b133..a8d291031 100644
--- a/examples/layout/three-column/valmer/right/css/valmer-right.css
+++ b/examples/layout/three-column/valmer/right/css/valmer-right.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 125%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
   line-height: 1.5;
-  padding: 0.1666666667em 0.8em 0.1944444444em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
+}
+
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-q::before {
-  content: open-quote;
-}
-
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
 }
 
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.1666666667em 0.8em 0.1944444444em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
diff --git a/examples/layout/two-column/donies/css/donies.css b/examples/layout/two-column/donies/css/donies.css
index cf23bd5e1..93bcd640c 100644
--- a/examples/layout/two-column/donies/css/donies.css
+++ b/examples/layout/two-column/donies/css/donies.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 125%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
   line-height: 1.5;
-  padding: 0.1666666667em 0.8em 0.1944444444em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
+}
+
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-q::before {
-  content: open-quote;
-}
-
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
 }
 
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.1666666667em 0.8em 0.1944444444em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
diff --git a/examples/layout/two-column/frogger/css/frogger.css b/examples/layout/two-column/frogger/css/frogger.css
index 6ae9386dc..3c362e276 100644
--- a/examples/layout/two-column/frogger/css/frogger.css
+++ b/examples/layout/two-column/frogger/css/frogger.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 125%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
   line-height: 1.5;
-  padding: 0.1666666667em 0.8em 0.1944444444em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
+}
+
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-q::before {
-  content: open-quote;
-}
-
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
 }
 
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.1666666667em 0.8em 0.1944444444em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
diff --git a/examples/layout/two-column/pacman/left/css/pacman-left.css b/examples/layout/two-column/pacman/left/css/pacman-left.css
index bd75f93be..ec2300dee 100644
--- a/examples/layout/two-column/pacman/left/css/pacman-left.css
+++ b/examples/layout/two-column/pacman/left/css/pacman-left.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 125%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
   line-height: 1.5;
-  padding: 0.1666666667em 0.8em 0.1944444444em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
+}
+
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-q::before {
-  content: open-quote;
-}
-
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
 }
 
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.1666666667em 0.8em 0.1944444444em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
diff --git a/examples/layout/two-column/pacman/right/css/pacman-right.css b/examples/layout/two-column/pacman/right/css/pacman-right.css
index fc7732792..52da96582 100644
--- a/examples/layout/two-column/pacman/right/css/pacman-right.css
+++ b/examples/layout/two-column/pacman/right/css/pacman-right.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 125%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
   line-height: 1.5;
-  padding: 0.1666666667em 0.8em 0.1944444444em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
+}
+
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-q::before {
-  content: open-quote;
-}
-
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
 }
 
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.1666666667em 0.8em 0.1944444444em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
diff --git a/examples/layout/two-column/plakes/left/css/plakes-left.css b/examples/layout/two-column/plakes/left/css/plakes-left.css
index db4492eab..f615e671f 100644
--- a/examples/layout/two-column/plakes/left/css/plakes-left.css
+++ b/examples/layout/two-column/plakes/left/css/plakes-left.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 125%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
   line-height: 1.5;
-  padding: 0.1666666667em 0.8em 0.1944444444em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
+}
+
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-q::before {
-  content: open-quote;
-}
-
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
 }
 
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.1666666667em 0.8em 0.1944444444em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
diff --git a/examples/layout/two-column/plakes/right/css/plakes-right.css b/examples/layout/two-column/plakes/right/css/plakes-right.css
index 037583370..03d73acbc 100644
--- a/examples/layout/two-column/plakes/right/css/plakes-right.css
+++ b/examples/layout/two-column/plakes/right/css/plakes-right.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 125%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
   line-height: 1.5;
-  padding: 0.1666666667em 0.8em 0.1944444444em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
+}
+
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-q::before {
-  content: open-quote;
-}
-
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
 }
 
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.1666666667em 0.8em 0.1944444444em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
diff --git a/examples/layout/two-column/toucan/css/toucan.css b/examples/layout/two-column/toucan/css/toucan.css
index 56f5e01c2..fa526036a 100644
--- a/examples/layout/two-column/toucan/css/toucan.css
+++ b/examples/layout/two-column/toucan/css/toucan.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 125%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
   line-height: 1.5;
-  padding: 0.1666666667em 0.8em 0.1944444444em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
+}
+
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-q::before {
-  content: open-quote;
-}
-
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
 }
 
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.1666666667em 0.8em 0.1944444444em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
diff --git a/examples/layout/two-column/trunks/left/css/trunks-left.css b/examples/layout/two-column/trunks/left/css/trunks-left.css
index 933bbcd3d..d03dcd314 100644
--- a/examples/layout/two-column/trunks/left/css/trunks-left.css
+++ b/examples/layout/two-column/trunks/left/css/trunks-left.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 125%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
   line-height: 1.5;
-  padding: 0.1666666667em 0.8em 0.1944444444em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
+}
+
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-q::before {
-  content: open-quote;
-}
-
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
 }
 
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.1666666667em 0.8em 0.1944444444em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
diff --git a/examples/layout/two-column/trunks/right/css/trunks-right.css b/examples/layout/two-column/trunks/right/css/trunks-right.css
index 3711f8e06..c856efde0 100644
--- a/examples/layout/two-column/trunks/right/css/trunks-right.css
+++ b/examples/layout/two-column/trunks/right/css/trunks-right.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 125%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
   line-height: 1.5;
-  padding: 0.1666666667em 0.8em 0.1944444444em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
+}
+
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-q::before {
-  content: open-quote;
-}
-
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
 }
 
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.1666666667em 0.8em 0.1944444444em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
diff --git a/examples/layout/two-column/wedge/left/css/wedge-left.css b/examples/layout/two-column/wedge/left/css/wedge-left.css
index 09f0941ac..fd18aa0a9 100644
--- a/examples/layout/two-column/wedge/left/css/wedge-left.css
+++ b/examples/layout/two-column/wedge/left/css/wedge-left.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 125%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
   line-height: 1.5;
-  padding: 0.1666666667em 0.8em 0.1944444444em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.4444444444em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
+}
+
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-q::before {
-  content: open-quote;
-}
-
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
 }
 
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.1666666667em 0.8em 0.1944444444em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
diff --git a/examples/layout/two-column/wedge/right/css/wedge-right.css b/examples/layout/two-column/wedge/right/css/wedge-right.css
index 72d9bb1d4..46492cc7a 100644
--- a/examples/layout/two-column/wedge/right/css/wedge-right.css
+++ b/examples/layout/two-column/wedge/right/css/wedge-right.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 62.5%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.8888888889em;
   line-height: 1.5;
-  padding: 0.1666666667em 0.8em 0.1944444444em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.8888888889em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
+}
+
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3715,8 +3804,8 @@ ol {
 }
 
 ol li {
-  padding-left: 0.1111111111em;
-  margin-left: -0.1111111111em;
+  padding-left: 0.2222222222em;
+  margin-left: -0.2222222222em;
 }
 
 ol ol {
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-q::before {
-  content: open-quote;
 }
 
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
-}
-
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.4444444444em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.3333333333em 0.8em 0.3888888889em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
diff --git a/examples/layout/two-column/wedge/right/scss/wedge-right.scss b/examples/layout/two-column/wedge/right/scss/wedge-right.scss
index 25ef0a48e..29d8a0b50 100644
--- a/examples/layout/two-column/wedge/right/scss/wedge-right.scss
+++ b/examples/layout/two-column/wedge/right/scss/wedge-right.scss
@@ -1,8 +1,7 @@
 @charset 'UTF-8';
 
 // I like big fonts I cannot lie.
-$root-font-size: 20px;
-$base-font-size: 36px;
+$base-font-size: 18px;
 
 // Decant.
 @import "decanter";
diff --git a/examples/mixins/adjust-container-width/css/adjust-container-width.css b/examples/mixins/adjust-container-width/css/adjust-container-width.css
index 4a1fec5c1..6b745493d 100644
--- a/examples/mixins/adjust-container-width/css/adjust-container-width.css
+++ b/examples/mixins/adjust-container-width/css/adjust-container-width.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 62.5%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.8888888889em;
   line-height: 1.5;
-  padding: 0.3333333333em 0.8em 0.3888888889em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.8888888889em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
+}
+
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
 }
 
-q::before {
-  content: open-quote;
-}
-
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
-}
-
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.8888888889em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.8888888889em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.3333333333em 0.8em 0.3888888889em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
diff --git a/examples/mixins/centered-container/css/style.css b/examples/mixins/centered-container/css/style.css
index ea6b58ee6..0dacf3f71 100644
--- a/examples/mixins/centered-container/css/style.css
+++ b/examples/mixins/centered-container/css/style.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 62.5%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.8888888889em;
   line-height: 1.5;
-  padding: 0.3333333333em 0.8em 0.3888888889em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.8888888889em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
+}
+
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
+}
+
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-q::before {
-  content: open-quote;
 }
 
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
-}
-
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.8888888889em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.8888888889em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.3333333333em 0.8em 0.3888888889em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
@@ -4207,10 +4175,10 @@ body > header::after {
 }
 
 #example-5 {
-  padding: 1em calc(50% - (400px - 20px));
   margin-left: -20px;
   margin-right: -20px;
   width: calc(100% + 40px);
+  padding: 1em calc(50% - (400px - 20px));
   background-color: #378a65;
 }
 
@@ -4325,16 +4293,11 @@ body > header::after {
     display: block;
     margin: -1em -30px;
     transition: all .3s ease .25s;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
     color: #fff;
   }
 }
 
-@media only screen and (max-width: 575px) {
-  #example-6 .xs {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (min-width: 576px) and (max-width: 767px) {
   #example-6 {
     background-color: rgba(61, 153, 112, 0.3);
@@ -4349,16 +4312,11 @@ body > header::after {
     display: block;
     margin: -1em -30px;
     transition: all .3s ease .25s;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
     color: #fff;
   }
 }
 
-@media only screen and (min-width: 576px) and (max-width: 767px) {
-  #example-6 .sm {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (min-width: 768px) and (max-width: 991px) {
   #example-6 {
     background-color: rgba(255, 133, 27, 0.3);
@@ -4373,12 +4331,7 @@ body > header::after {
     display: block;
     margin: -1em -30px;
     transition: all .3s ease .25s;
-  }
-}
-
-@media only screen and (min-width: 768px) and (max-width: 991px) {
-  #example-6 .md {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   }
 }
 
@@ -4396,12 +4349,7 @@ body > header::after {
     display: block;
     margin: -1em -30px;
     transition: all .3s ease .25s;
-  }
-}
-
-@media only screen and (min-width: 992px) and (max-width: 1199px) {
-  #example-6 .lg {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   }
 }
 
@@ -4419,16 +4367,11 @@ body > header::after {
     display: block;
     margin: -1em -30px;
     transition: all .3s ease .25s;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
     color: #fff;
   }
 }
 
-@media only screen and (min-width: 1200px) {
-  #example-6 .xl {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only print {
   #example-6 {
     background-color: #ddd;
@@ -4442,6 +4385,7 @@ body > header::after {
     display: block;
     transition: null;
     margin: -1em -0.375in;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15), 0px 3px 3px rgba(0, 0, 0, 0.15);
   }
 }
 
diff --git a/examples/mixins/centered-container/scss/style.scss b/examples/mixins/centered-container/scss/style.scss
index a1ea319bc..963447642 100644
--- a/examples/mixins/centered-container/scss/style.scss
+++ b/examples/mixins/centered-container/scss/style.scss
@@ -155,7 +155,7 @@ body > header {
       display: block;
       margin: -1em (-$_gutter * 1.5);
       transition: all .3s ease .25s;
-      @include material-shadow(medium);
+      box-shadow: material-shadow(medium);
       color: color(reverse-text);
     }
   }
@@ -172,7 +172,7 @@ body > header {
       display: block;
       margin: -1em (-$_gutter * 1.5);
       transition: all .3s ease .25s;
-      @include material-shadow(medium);
+      box-shadow: material-shadow(medium);
       color: color(reverse-text);
     }
   }
@@ -189,7 +189,7 @@ body > header {
       display: block;
       margin: -1em (-$_gutter * 1.5);
       transition: all .3s ease .25s;
-      @include material-shadow(medium);
+      box-shadow: material-shadow(medium);
     }
   }
   @include grid-media($media-lg-only) {
@@ -205,7 +205,7 @@ body > header {
       display: block;
       margin: -1em (-$_gutter * 1.5);
       transition: all .3s ease .25s;
-      @include material-shadow(medium);
+      box-shadow: material-shadow(medium);
     }
   }
   @include grid-media($media-xl) {
@@ -221,7 +221,7 @@ body > header {
       display: block;
       margin: -1em (-$_gutter * 1.5);
       transition: all .3s ease .25s;
-      @include material-shadow(medium);
+      box-shadow: material-shadow(medium);
       color: color(reverse-text);
     }
   }
@@ -237,7 +237,7 @@ body > header {
       display: block;
       transition: null;
       margin: -1em (-$_gutter * 1.5);
-      @include material-shadow(shallow);
+      box-shadow: material-shadow(shallow);
     }
   }
 }
\ No newline at end of file
diff --git a/examples/mixins/color-system/css/style.css b/examples/mixins/color-system/css/style.css
index 73885abac..956da147a 100644
--- a/examples/mixins/color-system/css/style.css
+++ b/examples/mixins/color-system/css/style.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 62.5%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.8888888889em;
   line-height: 1.5;
-  padding: 0.3333333333em 0.8em 0.3888888889em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.8888888889em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
+}
+
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
 }
 
-q::before {
-  content: open-quote;
-}
-
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
-}
-
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.8888888889em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.8888888889em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.3333333333em 0.8em 0.3888888889em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
@@ -4166,4 +4134,20 @@ body > header::after {
   padding: 1em;
 }
 
+.example-4 p:nth-of-type(1) {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+}
+
+.example-4 p:nth-of-type(2) {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15), 0px 3px 3px rgba(0, 0, 0, 0.15);
+}
+
+.example-4 p:nth-of-type(3) {
+  box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.205), 0px 8px 9px rgba(0, 0, 0, 0.205);
+}
+
+.example-4 p:nth-of-type(4) {
+  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.25), 0px 11px 12px rgba(0, 0, 0, 0.25);
+}
+
 /*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/examples/mixins/color-system/scss/style.scss b/examples/mixins/color-system/scss/style.scss
index fa628d561..9bd389276 100644
--- a/examples/mixins/color-system/scss/style.scss
+++ b/examples/mixins/color-system/scss/style.scss
@@ -67,4 +67,16 @@ $custom-theme-group: (
     background-color: color(background);
     padding: 1em;
   }
+  p:nth-of-type(1) {
+    box-shadow: material-shadow(flat);
+  }
+  p:nth-of-type(2) {
+    box-shadow: material-shadow(shallow);
+  }
+  p:nth-of-type(3) {
+    box-shadow: material-shadow(7);
+  }
+  p:nth-of-type(4) {
+    box-shadow: material-shadow(deep);
+  }
 }
diff --git a/examples/mixins/items-per-row/css/style.css b/examples/mixins/items-per-row/css/style.css
index 6696e6736..fe6f82bb7 100644
--- a/examples/mixins/items-per-row/css/style.css
+++ b/examples/mixins/items-per-row/css/style.css
@@ -3501,6 +3501,14 @@ template {
   white-space: nowrap;
 }
 
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
 body {
   min-height: 100vh;
   display: flex;
@@ -3517,78 +3525,169 @@ body > nav {
   order: -40;
 }
 
-body > main {
+body > main,
+body > #main {
   order: 1;
+  overflow: hidden;
+  background-color: #fff;
+  flex: 1;
 }
 
 body > footer {
   order: 50;
 }
 
-main {
-  overflow: hidden;
-  background-color: #fff;
-  flex: 1;
+html {
+  font-size: 62.5%;
 }
 
-@media print {
-  main {
-    background: transparent;
-  }
+body {
+  line-height: 1.5;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: 1.8em;
 }
 
-html {
-  font-size: 62.5%;
-  box-sizing: border-box;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Noto Serif', Georgia, Times, Times New Roman, serif;
+  font-weight: 700;
+  line-height: 1.2;
+  margin: 0.8em 0 0.512em;
 }
 
-*, *::before, *::after {
-  box-sizing: inherit;
+h1 {
+  font-size: 3.0517578125em;
 }
 
-body {
-  font-size: 1.8em;
+h2 {
+  font-size: 2.44140625em;
 }
 
-button, [type='button'], [type='reset'], [type='submit'] {
-  appearance: none;
-  background-color: #004991;
-  border: none;
-  color: #fff;
-  cursor: pointer;
-  display: inline-block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: inherit;
-  -webkit-font-smoothing: antialiased;
-  font-weight: inherit;
+h3 {
+  font-size: 2.44140625em;
+}
+
+h4 {
+  font-size: 1.5625em;
+}
+
+h5 {
+  font-size: 1.5625em;
+}
+
+h6 {
+  font-size: 1.5625em;
+}
+
+p {
+  margin: 0 0 1.25em;
+}
+
+dfn, cite, em, i {
+  font-style: italic;
+}
+
+blockquote {
+  margin: 0 1.5625em;
+  quotes: "“" "”" "‘" "’";
+}
+
+blockquote::before {
+  content: open-quote;
+}
+
+blockquote::after {
+  content: close-quote;
+}
+
+q {
+  quotes: "“" "”" "‘" "’";
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+address {
+  margin: 0 0 1.5625em;
+}
+
+pre {
+  background: rgba(221, 221, 221, 0.6);
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.8888888889em;
   line-height: 1.5;
-  padding: 0.3333333333em 0.8em 0.3888888889em;
-  text-align: center;
-  text-decoration: none;
-  user-select: none;
-  vertical-align: middle;
-  transition: all 250ms ease-in-out;
+  margin-bottom: 1.5625em;
+  max-width: 100%;
+  overflow: auto;
+  padding: 1.6em;
+  border: 1px solid #aaa;
+  white-space: pre-wrap;
 }
 
-@media screen {
-  button, [type='button'], [type='reset'], [type='submit'] {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
+code, kbd, var, samp {
+  font-family: 'Source Code Pro', Monaco, Consolas, Lucida Console, monospace;
+  font-size: 0.8888888889em;
+  padding: 0.1073741824em 0.32768em;
+  position: relative;
+  background-color: rgba(221, 221, 221, 0.6);
+  border: 1px solid #aaa;
+}
+
+abbr, acronym {
+  border-bottom: 1px dotted #999;
+  cursor: help;
+}
+
+mark, ins, del {
+  padding: 0 0.25em 0.15em;
+}
+
+del {
+  color: #112;
+  background: #ffcdcd;
+  text-decoration: line-through;
+  text-decoration-color: #ff4136;
 }
 
-button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active {
+ins {
+  color: #112;
+  background: #90ff90;
   text-decoration: none;
 }
 
-button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
-  background-color: #004991;
-  color: #fff;
-  cursor: not-allowed;
-  opacity: .5;
+mark {
+  color: #112;
+  background: #fafa55;
+  text-decoration: none;
 }
 
-button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
-  cursor: not-allowed;
+small, .small-text {
+  font-size: 0.8888888889em;
+}
+
+.large-text {
+  font-size: 1.25em;
+}
+
+hr {
+  border-top: 0;
+  border-right: 0;
+  border-bottom: 1px solid #999;
+  border-left: 0;
+  margin: 1.25em 0;
+}
+
+a {
+  color: #006cb8;
+  text-decoration: none;
+}
+
+a:hover, a:active, a:focus {
+  text-decoration: underline;
 }
 
 fieldset {
@@ -3614,7 +3713,7 @@ input,
 select,
 textarea {
   display: block;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
@@ -3668,25 +3767,15 @@ select {
 }
 
 ul.plain,
-ol.plain {
+ol.plain,
+dl.plain,
+dt.plain {
+  font-weight: normal;
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-dl.plain {
-  margin: 0;
-}
-
-dt.plain {
-  font-weight: 600;
-  margin: 0;
-}
-
-dd.plain {
-  margin: 0;
-}
-
 ul,
 ol {
   margin: 0 0 1em 1.25em;
@@ -3750,15 +3839,6 @@ dd {
   margin: 0 0 1em;
 }
 
-img,
-picture,
-figure {
-  width: auto;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-}
-
 table {
   border-collapse: collapse;
   margin: 0.8em 0;
@@ -3784,156 +3864,55 @@ th {
   vertical-align: middle;
 }
 
-body {
-  color: #112;
-  font-family: "Noto Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-  font-size: 1.8em;
-  line-height: 1.5;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Noto Serif", "Georgia", "Times", "Times New Roman", serif;
-  line-height: 1.2;
-  margin: 0.8em 0 0.512em;
-  font-weight: 700;
-}
-
-h2 {
-  font-size: 2.44140625em;
-}
-
-h3 {
-  font-size: 1.953125em;
-}
-
-h4 {
-  font-size: 1.5625em;
-}
-
-h5 {
-  font-size: 1.25em;
-}
-
-h6 {
-  font-size: 1em;
-}
-
-p {
-  margin: 0 0 1.25em;
-}
-
-dfn, cite, em, i {
-  font-style: italic;
-}
-
-blockquote {
-  margin: 0 1.5625em;
-  quotes: "\201c" "\201d" "\2018" "\2019";
-}
-
-blockquote::before {
-  content: open-quote;
-}
-
-blockquote::after {
-  content: close-quote;
-}
-
-q {
+img,
+picture,
+figure {
+  width: auto;
+  max-width: 100%;
+  height: auto;
   margin: 0;
-  quotes: "\201c" "\201d" "\2018" "\2019";
 }
 
-q::before {
-  content: open-quote;
-}
-
-q::after {
-  content: close-quote;
-}
-
-address {
-  margin: 0 0 1.5625em;
-}
-
-pre {
-  background: rgba(221, 221, 221, 0.6);
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.8888888889em;
+button, [type='button'], [type='reset'], [type='submit'] {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
+  appearance: none;
+  background-color: #006cb8;
+  border: none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: 'Noto Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: inherit;
+  -webkit-font-smoothing: antialiased;
+  font-weight: inherit;
   line-height: 1.5;
-  margin-bottom: 1.5625em;
-  max-width: 100%;
-  overflow: auto;
-  padding: 1.6em;
-  border: 1px solid #aaa;
-  white-space: pre-wrap;
-}
-
-code, kbd, tt, var {
-  font-family: "Source Code Pro", "Monaco", "Consolas", "Lucida Console", monospace;
-  font-size: 0.8888888889em;
-  padding: 0.1073741824em 0.32768em;
-  position: relative;
-  background-color: rgba(221, 221, 221, 0.6);
-  border: 1px solid #aaa;
-}
-
-abbr, acronym {
-  border-bottom: 1px dotted #999;
-  cursor: help;
-}
-
-mark, ins, del {
-  padding: 0 .25em .15em;
-}
-
-del {
-  color: #112;
-  background: #ffcdcd;
-  text-decoration: line-through;
-  text-decoration-color: #ffcdcd;
-}
-
-ins {
-  color: #112;
-  background: #90ff90;
-  text-decoration: none;
-}
-
-mark {
-  color: #112;
-  background: #fafa55;
+  padding: 0.3333333333em 0.8em 0.3888888889em;
+  text-align: center;
   text-decoration: none;
+  user-select: none;
+  vertical-align: middle;
+  transition: all 250ms ease-in-out;
 }
 
-small,
-.small-text {
-  font-size: 0.8888888889em;
-}
-
-big,
-.large-text {
-  font-size: 1.25em;
-}
-
-a {
-  color: #004991;
+button:hover, [type='button']:hover, [type='reset']:hover, [type='submit']:hover, button:active, [type='button']:active, [type='reset']:active, [type='submit']:active, button:focus, [type='button']:focus, [type='reset']:focus, [type='submit']:focus {
+  background-color: #33548F;
+  color: #dceefe;
   text-decoration: none;
 }
 
-a:hover, a:active, a:focus {
-  text-decoration: underline;
+button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled, button.disabled, .disabled[type='button'], .disabled[type='reset'], .disabled[type='submit'] {
+  background-color: #006cb8;
+  color: #fff;
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
-hr {
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid #999;
-  border-left: 0;
-  margin: 1.25em 0;
+button:disabled:hover, [type='button']:disabled:hover, [type='reset']:disabled:hover, [type='submit']:disabled:hover, button.disabled:hover, .disabled[type='button']:hover, .disabled[type='reset']:hover, .disabled[type='submit']:hover {
+  cursor: not-allowed;
 }
 
 #breakpoint-helper {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1), 0px 0px 5px rgba(0, 0, 0, 0.1);
   background-color: rgba(51, 51, 51, 0.8);
   border-radius: 3px;
   border-top-right-radius: 0;
@@ -3952,24 +3931,13 @@ hr {
   z-index: 9999;
 }
 
-@media screen {
-  #breakpoint-helper {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
-  }
-}
-
 #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2), 0px 7px 10px rgba(0, 0, 0, 0.2);
   right: 0;
   overflow: hidden;
   font-size: .75em;
 }
 
-@media screen {
-  #breakpoint-helper:hover, #breakpoint-helper:active, #breakpoint-helper:focus {
-    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.09), 0px 7px 10px 0px rgba(0, 0, 0, 0.15);
-  }
-}
-
 @media only screen and (max-width: 575px) {
   #breakpoint-helper {
     background-color: #0074d9;
diff --git a/examples/scss/index.scss b/examples/scss/index.scss
index 6266dc6e2..36774a365 100644
--- a/examples/scss/index.scss
+++ b/examples/scss/index.scss
@@ -1,8 +1,7 @@
 @charset 'UTF-8';
 
 // I like big fonts I cannot lie.
-$root-font-size: 20px;
-$base-font-size: 36px;
+$base-font-size: 18px;
 
 // Decant.
 @import "decanter";