Updated the normalise css.

.sass-lint.yml

@@ -31,15 +31,19 @@ rules:
   single-line-per-selector: 2
 
   # Disallows
-  # no-color-keywords: 2
+  no-attribute-selectors: 0
-  # no-color-literals: 2
+  no-color-hex: 2
-  # no-css-comments: 2
+  no-color-keywords: 2
+  no-color-literals: 2
+  no-combinators: 0
+  no-css-comments: 2
   no-debug: 2
-  # no-duplicate-properties: 2
+  no-disallowed-properties: 2
-  no-empty-rulesets: 2
+  no-duplicate-properties: 2
+  no-empty-rulesets: 0
   no-extends: 0
-  # no-ids: 2
+  no-ids: 2
-  # no-important: 2
+  no-important: 2
   no-invalid-hex: 2
   no-mergeable-selectors: 2
   no-misspelled-properties:
@@ -52,10 +56,12 @@ rules:
       - '*vertical-align'
       - '*width'
   no-qualifying-elements: 0
+  no-trailing-whitespace: 2
   no-trailing-zero: 2
-  no-transition-all: 1
+  no-transition-all: 0
+  no-universal-selectors: 0
   no-url-protocols: 2
-  # no-vendor-prefixes: 2
+  no-vendor-prefixes: 2
   no-warn: 2
   property-units: 0
 
@@ -79,6 +85,7 @@ rules:
   variable-name-format: 2
 
   # Style Guide
+  attribute-quotes: 2
   bem-depth: 0
   border-zero: 2
   brace-style:
@@ -89,12 +96,13 @@ rules:
   empty-args: 0
   hex-length: 2
   hex-notation: 2
-  # indentation: 2
+  indentation: 2
   leading-zero: 2
   nesting-depth:
     - 2
     - max-depth: 4
   property-sort-order: 0
+  pseudo-element: 1
   quotes: 2
   shorthand-values: 2
   url-quotes: 2
@@ -114,14 +122,3 @@ rules:
   # Final Items
   trailing-semicolon: 2
   final-newline: 2
-
-  # Work-around for sass-lint not having per-file/block/line rule config.
-  # @TODO: Re-enable these disabled rules. See https://www.drupal.org/node/2717117
-  indentation: 0
-  no-color-keywords: 0
-  no-color-literals: 0
-  no-css-comments: 0
-  no-duplicate-properties: 0
-  no-ids: 0
-  no-important: 0
-  no-vendor-prefixes: 0

sass/_custom.scss

@@ -1,4 +1,3 @@
-/**
+// sass-lint:disable no-css-comments, no-color-hex, no-color-literals
- * @file
+
- * Site custom styles
+// Site custom styles
- */

sass/_zen.scss

@@ -1,9 +1,4 @@
-/**
+// Zen custom styles
- * @file
- * Zen custom styles
- */
-
-/* Zen overrides */
 
 p,
 pre {
@@ -11,7 +6,7 @@ pre {
   @include margin(.75 0);
 }
 
-/* Page */
+// Page
 
 body {
   background-color: color(backdrop);
@@ -40,7 +35,7 @@ body {
   }
 }
 
-/* Apply smaller text to blocks, footer etc. */
+// Apply smaller text to blocks, footer etc.
 
 th,
 label,
@@ -63,7 +58,7 @@ article > header,
   }
 }
 
-/* Apply heading font stack to heading, labels etc. */
+// Apply heading font stack to heading, labels etc.
 
 h1,
 h2,
@@ -215,7 +210,7 @@ figcaption {
   }
 }
 
-/* Navigation */
+// Navigation
 
 .main-menu {
   @include margin-top(.5);
@@ -251,7 +246,7 @@ figcaption {
   text-decoration: none;
 }
 
-/* Messages */
+// Messages
 
 .message {
   padding: 10px;
@@ -278,7 +273,7 @@ figcaption {
   }
 }
 
-/* Search */
+// Search
 
 .search-form {
   @include padding(.5 0);
@@ -288,7 +283,7 @@ figcaption {
   @include type-layout(l, 1);
 }
 
-/* Form */
+// Form
 
 .content {
   input,

sass/base/_fonts.scss

@@ -9,6 +9,7 @@
 // websites where you can find Open Source fonts to download:
 // - http://www.fontsquirrel.com/fontface
 // - http://www.theleagueofmoveabletype.com
+// - https://fonts.google.com
 //
 // In order to use these fonts, you will need to convert them into formats
 // suitable for web fonts. We recommend the free-to-use Font Squirrel's

sass/base/_html5.scss

@@ -1,45 +0,0 @@
-// HTML5 display definitions
-// ==========================================================================
-
-// Add the correct display in IE <10.
-// Add the correct display in Edge, IE, and Firefox for `details` or `summary`.
-// Add the correct display in IE for `main`.
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-main,
-menu,
-nav,
-section,
-summary {
-  display: block;
-}
-
-// Add the correct display in IE <10.
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-}
-
-// Add the correct display and remove excess height in iOS 4-7.
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-
-// Add the correct vertical alignment in Chrome, Firefox, and Opera.
-progress {
-  vertical-align: baseline;
-}
-
-// Add the correct display in IE <11, Safari <8, and Firefox <22.
-template,
-[hidden] {
-  display: none;
-}

sass/base/_normalize.scss

@@ -6,19 +6,29 @@
 //       @see http://snook.ca/archives/html_and_css/no_css_reset/
 //
 // This directory is a slight fork of this original source:
-// - normalize-scss 5.0.3 | MIT/GPLv2 License | bit.ly/normalize-scss
+// normalize-scss 7.0.0 | MIT/GPLv2 License | bit.ly/normalize-scss
 
 
+// Universal
+// ==========================================================================
+
+// Use the saner border-box model for all elements.
+* {
+  box-sizing: border-box;
+}
+
 // Normalize-scss is broken into modular pieces to make it easier to edit.
-@import 'root';
+@import 'document/document';
-@import 'html5';
+@import 'sections/sections';
-@import 'links/links';
-@import 'headings/headings';
-@import 'text/text';
 @import 'grouping/grouping';
+@import 'links/links';
+@import 'text/text';
 @import 'embedded/embedded';
 @import 'forms/forms';
 @import 'tables/tables';
+@import 'interactive/interactive';
+@import 'scripting/scripting';
+@import 'hidden/hidden';
 
 // Note: we allow the .button component (loaded by forms) to override :link, by
 // loading links first.

sass/base/document/_document.scss

@@ -0,0 +1,23 @@
+// sass-lint:disable no-vendor-prefixes
+
+// Document
+//
+// The default font styles are inherited from the `<html>` element.
+
+html {
+  // Change the default font family in all browsers (opinionated).
+  @include typeface(body);
+  // Correct the line height in all browsers.
+  @include define-type-sizing();
+  // Prevent adjustments of font size after orientation changes in IE on Windows
+  // Phone and in iOS.
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  // On short pages, we want any background gradients to fill the entire height
+  // of the browser.
+  min-height: 100%;
+
+  @include respond-to(xxl) {
+    @include define-type-sizing($base-font-size-2, $base-line-height-2);
+  }
+}

sass/base/embedded/_embedded.scss

@@ -1,19 +1,26 @@
 // Embedded content
 //
 // Weight: 2
-//
+
-// Style guide: base.embedded
+// Audio
+
+audio {
+  // Add the correct display in IE 9-.
+  display: inline-block;
+}
+
+// Add the correct display in iOS 4-7.
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
 
 // Image
 //
 // An `<img>` element represents an image.
-//
-// Markup: embedded-img.twig
-//
-// Style guide: base.embedded.img
 
 img {
-  // Remove the border on images inside links in IE <11.
+  // Remove the border on images inside links in IE 10-.
   border-style: none;
 }
 
@@ -30,12 +37,15 @@ svg {
 // Scalable vector
 //
 // A `<svg>` element represents an image encoded as a Scalable Vector Graphic.
-//
-// Markup: embedded-svg.twig
-//
-// Style guide: base.embedded.svg
 
 svg:not(:root) {
   // Hide the overflow in IE.
   overflow: hidden;
 }
+
+// Video
+
+video {
+  // Add the correct display in IE 9-.
+  display: inline-block;
+}

sass/base/forms/_forms.scss

@@ -8,8 +8,6 @@
 // to an HTML form element, these styles will be the ones displayed.
 //
 // Weight: -1
-//
-// Style guide: forms.base
 
 //
 // The following rules are from normalize.css and help to fix inconsistencies
@@ -22,11 +20,13 @@ input,
 optgroup,
 select,
 textarea {
+  // Change the font styles in all browsers (opinionated).
+  @include typeface(body);
+  @include line-height(1);
+  font-size: 100%;
   // Keep form elements constrained in their containers.
   box-sizing: border-box;
   max-width: 100%;
-  // Change font properties to `inherit` in all browsers (opinionated).
-  font: inherit;
   // Remove the margin in Firefox and Safari.
   margin: 0;
 }
@@ -59,19 +59,13 @@ input {
   // Correct the outline style in Safari.
   outline-offset: -2px;
 
-  // Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
+  // Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
   &::-webkit-search-cancel-button,
   &::-webkit-search-decoration {
     -webkit-appearance: none;
   }
 }
 
-// Correct the text style of placeholders in Chrome, Edge, and Safari.
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: .54;
-}
-
 ::-webkit-file-upload-button {
   // Correct the inability to style clickable types in iOS and Safari.
   -webkit-appearance: button;
@@ -79,6 +73,20 @@ input {
   font: inherit;
 }
 
+// Buttons
+//
+// Buttons built with the `<button>` element are the most flexible for styling
+// purposes. But `<input>` elements with `type` set to `submit`, `image`,
+// `reset`, or `button` are also supported.
+//
+// Below is the default button styling. To see variations on the button styling
+// see the [button component](section-forms.html#kssref-forms-button).
+//
+// :hover        - Hover styling.
+// :active:hover - Depressed button styling.
+
+@import 'components/button/button';
+
 // The %text-form-element can be used to style `<input>` text types and
 // `<textarea>` elements at the same time.
 %text-form-element {
@@ -91,9 +99,18 @@ input {
 // HTML5 types: `text`, `search`, `tel`, `url`, `email`, `password`, `date`,
 // `time`, `number`, `range`, `color`, and `file`.
 //
-// Markup: forms-input.twig
+// Note: Certain font size values applied to `number` inputs cause the cursor
+// style of the decrement button to change from `default` to `text`.
 //
-// Style guide: forms.base.input
+// Note: The search input is not fully stylable by default. In Chrome and Safari
+// on OSX/iOS you can't control `font`, `padding`, `border`, or `background`. In
+// Chrome and Safari on Windows you can't control `border` properly. It will
+// apply `border-width` but will only show a border color (which cannot be
+// controlled) for the outer 1px of that border. Applying
+// `-webkit-appearance: textfield` addresses these issues without removing the
+// benefits of search inputs (e.g. showing past searches). Safari (but not
+// Chrome) will clip the cancel button on when it has padding (and `textfield`
+// appearance).
 
 [type='text'],
 [type='search'],
@@ -124,30 +141,22 @@ input {
 // If an `<input>` element has the `type='checkbox'` attribute set, the form
 // field is displayed as a checkbox.
 //
-// It's recommended that you don't attempt to style these elements. Firefox's
+// It is recommended that you do not style checkbox and radio inputs as
-// implementation doesn't respect `box-sizing`, `padding`, or `width`.
+// Firefox's implementation does not respect box-sizing, padding, or width.
-//
-// Markup: forms-input-checkbox.twig
-//
-// Style guide: forms.base.input-checkbox
 
 // Radio buttons
 //
 // If an `<input>` element has the `type='radio'` attribute set, the form field
 // is displayed as a radio button.
 //
-// It's recommended that you don't attempt to style these elements. Firefox's
+// It is recommended that you do not style checkbox and radio inputs as
-// implementation doesn't respect `box-sizing`, `padding`, or `width`.
+// Firefox's implementation does not respect box-sizing, padding, or width.
-//
-// Markup: forms-input-radio.twig
-//
-// Style guide: forms.base.input-radio
 
 [type='checkbox'],
 [type='radio'] {
-  // Add the correct box sizing in IE <11.
+  // Add the correct box sizing in IE 10-.
   box-sizing: border-box;
-  // Remove the padding in IE <11.
+  // Remove the padding in IE 10-.
   padding: 0;
 }
 
@@ -155,16 +164,11 @@ input {
 //
 // The `<fieldset>` element groups a set of form fields, optionally under a
 // common name given by the `<legend>` element.
-//
-// Markup: forms-fieldset.twig
-//
-// Style guide: forms.base.fieldset
 
 fieldset {
-  // Change the border, margin, and padding in all browsers (opinionated).
+  // Correct the padding in Firefox.
-  @include padding(.35 .625 .65);
+  @include padding(.35 .5 .65);
   border: 1px solid color(border);
-  margin: 0 2px;
 }
 
 legend {
@@ -172,13 +176,13 @@ legend {
   box-sizing: border-box;
   display: table;
   max-width: 100%;
-  white-space: normal;
-  // Correct the color inheritance from `fieldset` elements in IE.
-  color: inherit;
   // Align legend text with a fieldset's text while removing left padding so
   // people aren't caught out if they zero out fieldset padding.
   margin-left: -5px;
   padding: 0 5px;
+  // Correct the color inheritance from `fieldset` elements in IE.
+  color: inherit;
+  white-space: normal;
 }
 
 // Labels
@@ -186,12 +190,9 @@ legend {
 // The `<label>` element represents a caption of a form field. The label can be
 // associated with a specific form control by using the `for` attribute or by
 // putting the form control inside the label element itself.
-//
-// Markup: forms-label.twig
-//
-// Style guide: forms.base.label
 
 label {
+  // Drupal-style form labels.
   display: block;
   font-weight: bold;
 }
@@ -202,28 +203,28 @@ label {
 // options.
 //
 // Known limitation: by default, Chrome and Safari on OS X allow very limited
-// styling of `<select>`, unless a `border` property is set.
+// styling of `<select>`, unless a `border` property is set. The default font
-//
+// weight on `optgroup` elements cannot safely be changed in Chrome on OSX and
-// Markup: forms-select.twig
+// Safari on OS X.
-//
-// Style guide: forms.base.select
 
 select {
   // Add your styles.
 }
 
-optgroup {
+// Progress
-  // Restore the font weight unset by a previous rule.
+//
-  font-weight: bold;
+// The `<progress>` element represents the completion progress of a task.
+
+progress {
+  // Add the correct display in IE 9-.
+  display: inline-block;
+  // Add the correct vertical alignment in Chrome, Firefox, and Opera.
+  vertical-align: baseline;
 }
 
 // Text areas
 //
 // The `<textarea>` element represents a multi-line plain text form field.
-//
-// Markup: forms-textarea.twig
-//
-// Style guide: forms.base.textarea
 
 textarea {
   @extend %text-form-element !optional;

sass/base/grouping/_grouping.scss

@@ -1,12 +1,9 @@
 // Dependencies.
-@import 'base/text/text';
 @import 'components/divider/divider';
 
 // Grouping content
 //
 // Weight: 1
-//
-// Style guide: base.grouping
 
 
 // Block quotes
@@ -18,10 +15,6 @@
 //
 // Optionally, add a `<footer>` to identify the source of the quote, wrapping
 // the name of the source work in `<cite>`.
-//
-// Markup: grouping-blockquote.twig
-//
-// Style guide: base.grouping.blockquote
 
 blockquote {
   // Set 1 unit of vertical rhythm on the top and bottom margin.
@@ -39,47 +32,24 @@ blockquote {
 //
 // The `<ul>` element is a list of items in which the order does <em>not</em>
 // explicitly matter.
-//
-// Markup: grouping-ul.twig
-//
-// Style guide: base.grouping.lists.ul
 
 // Ordered list
 //
 // The `<ol>` element is a list of items in which the order <em>does</em>
 // explicitly matter.
-//
-// Markup: grouping-ol.twig
-//
-// Style guide: base.grouping.lists.ol
 
 // Description list
 //
 // The `<dl>` element is a list of terms with their associated descriptions.
 //
-// Markup: grouping-dl.twig
-//
 // Weight: 1
-//
-// Style guide: base.grouping.lists.dl
 
 dl,
-menu,
 ol,
 ul {
-  // Address margins set differently in IE 6/7.
   @include margin(1 0);
 }
 
-// Turn off margins on nested lists.
-ol,
-ul {
-  ol,
-  ul {
-    margin: 0;
-  }
-}
-
 dt {
   // Add your styles.
 }
@@ -92,8 +62,6 @@ dd {
   }
 }
 
-// Address paddings set differently in IE 6/7.
-menu,
 ol,
 ul {
   padding: 0 0 0 $indent-amount;
@@ -101,6 +69,12 @@ ul {
   @include rtl {
     padding: 0 $indent-amount 0 0;
   }
+
+  // Turn off margins on nested lists.
+  ol,
+  ul {
+    margin: 0;
+  }
 }
 
 // Figures
@@ -110,18 +84,17 @@ ul {
 //
 // Optionally, a `<figcaption>` element inside the `<figure>` represents the
 // caption of the figure.
-//
-// Markup: grouping-figure.twig
-//
-// Style guide: base.grouping.figure
 
 figure {
   // Add the correct margin in IE 8.
   @include margin(1 0);
+  // Add the correct display in IE 9-.
+  display: block;
 }
 
 figcaption {
-  // Add your styles.
+  // Add the correct display in IE 9-.
+  display: block;
 }
 
 // Horizontal rule
@@ -129,10 +102,6 @@ figcaption {
 // The `<hr>` element represents a paragraph-level thematic break, e.g. a scene
 // change in a story, or a transition to another topic within a section of a
 // reference book.
-//
-// Markup: grouping-hr.twig
-//
-// Style guide: base.grouping.hr
 
 hr {
   @extend %divider;
@@ -143,17 +112,22 @@ hr {
   overflow: visible;
 }
 
+// Main
+//
+// The `<main>` element represents the main content of the page.
+
+main {
+  // Add the correct display in IE.
+  display: block;
+}
+
 // Body copy
 //
 // The default `font-size` and `line-height` properties are applied to the
 // `<body>` element and all paragraphs. In addition, `<p>` (paragraphs) receive
 // a top and bottom margin.
 //
-// Markup: grouping-p.twig
-//
 // Weight: -2
-//
-// Style guide: base.grouping.p
 
 p,
 pre {
@@ -165,10 +139,14 @@ pre {
 //
 // The `<pre>` element represents a block of preformatted text, such as
 // fragments of computer code, ASCII art, etc.
-//
+
-// Markup: grouping-pre.twig
+%monospace {
-//
+  // Correct the inheritance and scaling of font size in all browsers.
-// Style guide: base.grouping.pre
+  // The font-family value ends with ", serif".
+  @include typeface(monospace);
+  // Correct the odd `em` font sizing in all browsers.
+  font-size: 1em;
+}
 
 pre {
   @extend %monospace;

sass/base/hidden/_hidden.scss

@@ -0,0 +1,8 @@
+// Hidden
+//
+// Some older browsers do not hide elements that have a `hidden` attribute.
+
+[hidden] {
+  // Add the correct display in IE 10-.
+  display: none;
+}

sass/base/interactive/_interactive.scss

@@ -0,0 +1,35 @@
+// Interactive
+
+// Details
+
+details {
+  // Add the correct display in Edge, IE, and Firefox.
+  display: block;
+}
+
+summary {
+  // Add the correct display in all browsers.
+  display: list-item;
+}
+
+// Menu
+
+menu {
+  // Set 1 unit of vertical rhythm on the top and bottom margin.
+  @include margin(1 0);
+  // Add the correct display in IE 9-.
+  display: block;
+  // Set consistent space for the list style image.
+  padding: 0 0 0 $indent-amount;
+
+  @include rtl {
+    padding: 0 $indent-amount 0 0;
+  }
+
+  // Turn off margins on nested lists.
+  menu &,
+  ol &,
+  ul & {
+    margin: 0;
+  }
+}

sass/base/links/_links.scss

@@ -10,14 +10,11 @@
 // :hover   - A link that is being hovered over.
 // :focus   - A link that has been given keyboard focus.
 // :active  - A link that is being actively clicked.
-//
-// Markup: links-a.twig
-//
-// Style guide: base.link
 
 a,
 %link {
   color: color(link);
+  // sass-lint:disable no-vendor-prefixes
   // Remove gaps in links underline in iOS 8+ and Safari 8+.
   -webkit-text-decoration-skip: objects;
 }
@@ -42,10 +39,3 @@ a:active {
     background-color: transparent;
   }
 }
-
-// Remove the outline on focused links when they are also active or hovered
-// in all browsers (opinionated).
-a:active,
-a:hover {
-  outline-width: 0;
-}

sass/base/scripting/_scripting.scss

@@ -0,0 +1,18 @@
+// Scripting
+
+// Canvas
+
+canvas {
+  // Add the correct display in IE 9-.
+  display: inline-block;
+}
+
+// Template
+//
+// Some older browsers do not hide elements the web components' `template`
+// element.
+
+template {
+  // Add the correct display in IE.
+  display: none;
+}

sass/base/sections/_sections.scss

@@ -0,0 +1,122 @@
+// Sections
+// ==========================================================================
+
+
+body {
+  // Output a horizontal grid to help with debugging typography. The
+  // $typey-debug variable will toggle its output.
+  @include typey-debug-grid();
+  // Remove the margin in all browsers (opinionated).
+  margin: 0;
+  padding: 0;
+}
+
+// Add the correct display in IE 9-.
+article,
+aside,
+footer,
+header,
+nav,
+section {
+  display: block;
+}
+
+// Headings
+//
+// All HTML headings, `<h1>` through `<h6>`, are available. `%h1` through `%h6`
+// classes are also available, for when you want to match the font styling of a
+// heading but still want your text to be displayed inline.
+
+// Correct the font size and margin on `h1` elements within `section` and
+// `article` contexts in Chrome, Firefox, and Safari.
+h1,
+%h1 {
+  // Set the font-size and line-height while keeping a proper vertical rhythm.
+  @include type-layout(xxl, 1.5);
+
+  // Set 1 unit of vertical rhythm on the top and bottom margins.
+  @include margin-top(1, xxl);
+  @include margin-bottom(1, xxl);
+}
+
+h2,
+%h2 {
+  @include type-layout(xl, 1.5);
+  @include margin-top(1, xl);
+  @include margin-bottom(1, xl);
+}
+
+h3,
+%h3 {
+  @include type-layout(l, 1.5);
+  @include margin-top(1, l);
+  @include margin-bottom(1, l);
+}
+
+h4,
+%h4 {
+  @include type-layout(m, 1);
+  @include margin-top(1, m);
+  @include margin-bottom(1, m);
+}
+
+h5,
+%h5 {
+  @include type-layout(s, 1);
+  @include margin-top(1, s);
+  @include margin-bottom(1, s);
+}
+
+h6,
+%h6 {
+  @include type-layout(xs, 1);
+  @include margin-top(1, xs);
+  @include margin-bottom(1, xs);
+}
+
+@include respond-to(s) {
+  h1,
+  %h1 {
+    // Set the font-size and line-height while keeping a proper vertical rhythm.
+    @include type-layout(xxl-2, 2);
+
+    // Set 1 unit of vertical rhythm on the top and bottom margins.
+    @include margin-top(1, xxl-2);
+    @include margin-bottom(1, xxl-2);
+  }
+
+  h2,
+  %h2 {
+    @include type-layout(xl-2, 1.5);
+    @include margin-top(1, xl-2);
+    @include margin-bottom(1, xl-2);
+  }
+
+  h3,
+  %h3 {
+    @include type-layout(l-2, 1.5);
+    @include margin-top(1, l-2);
+    @include margin-bottom(1, l-2);
+  }
+
+  h4,
+  %h4 {
+    @include type-layout(m-2, 1);
+    @include margin-top(1, m-2);
+    @include margin-bottom(1, m-2);
+  }
+
+  h5,
+  %h5 {
+    @include type-layout(s-2, 1);
+    @include margin-top(1, s-2);
+    @include margin-bottom(1, s-2);
+  }
+
+  h6,
+  %h6 {
+    @include type-layout(xs-2, 1);
+    @include margin-top(1, xs-2);
+    @include margin-bottom(1, xs-2);
+  }
+}

sass/base/tables/_tables.scss

@@ -2,11 +2,7 @@
 //
 // The `<table>` element displays tabular data in rows, columns, and cells.
 //
-// Markup: tables-table.twig
-//
 // Weight: 1
-//
-// Style guide: base.table
 
 table {
   // Add vertical rhythm margins.

sass/base/text/_text.scss

@@ -3,24 +3,26 @@
 // The elements in this section give semantics to inline text.
 //
 // Weight: 1
-//
-// Style guide: base.text
 
 // Abbreviation / Acroynym
 //
 // The `<abbr>` element makes the meanings of abbreviations and acronyms visible
 // on hover.
-//
-// Markup: text-abbr.twig
-//
-// Style guide: base.text.abbr
 
 abbr[title] {
-  // Remove the bottom border in Firefox <40.
+  // Remove the bottom border in Chrome 57- and Firefox 39-.
   border-bottom: 0;
+  // sass-lint:disable no-duplicate-properties
   // Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   text-decoration: underline;
   text-decoration: underline dotted;
+
+  @media print {
+    // Add visible title after abbreviations.
+    &::after {
+      content: ' (' attr(title) ')';
+    }
+  }
 }
 
 // Bold
@@ -31,11 +33,7 @@ abbr[title] {
 // Feel free to use `<b>` in HTML5. `<b>` is meant to highlight words or phrases
 // without conveying additional importance.
 //
-// Markup: text-b.twig
-//
 // Weight: -1
-//
-// Style guide: base.text.b
 
 // Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 
@@ -45,8 +43,8 @@ strong {
 }
 
 // sass-lint:disable no-mergeable-selectors
-strong,
+b,
-b {
+strong {
   // Add the correct font weight in Chrome, Edge, and Safari.
   font-weight: bolder;
 }
@@ -66,34 +64,19 @@ cite {
 
 // Code
 //
-// The `<code>` element represents a fragment of computer code. The `<var>`
+// The `<code>` element represents a fragment of computer code. The `<samp>`
-// element represents a variable. The `<samp>` element represents (sample)
+// element represents (sample) output from a program or computing system. The
-// output from a program or computing system. The `<kbd>` element represents
+// `<kbd>` element represents user input (typically keyboard input.)
-// user input (typically keyboard input.)
-//
-// Markup: text-code.twig
-//
-// Style guide: base.text.code
 
-%monospace,
 code,
 kbd,
-samp,
+samp {
-var {
+  @extend %monospace;
-  // Correct the inheritance and scaling of font size in all browsers.
-  // The font-family value ends with ", serif".
-  @include typeface(monospace);
-  // Correct the odd `em` font sizing in all browsers.
-  font-size: 1em;
 }
 
 // Deleted text
 //
 // The `<del>` element indicates blocks of text that have been deleted.
-//
-// Markup: text-del.twig
-//
-// Style guide: base.text.del
 
 del {
   // Add your styles.
@@ -102,13 +85,9 @@ del {
 // Definition
 //
 // The `<dfn>` element represents the defining instance of a term.
-//
-// Markup: text-dfn.twig
-//
-// Style guide: base.text.dfn
 
 dfn {
-  // Add the correct font style in Android <4.4.
+  // Add the correct font style in Android 4.3-.
   font-style: italic;
 }
 
@@ -120,11 +99,7 @@ dfn {
 // Feel free to use `<i>` element in HTML5. `<i>` is meant to convey voice,
 // technical terms, etc.
 //
-// Markup: text-i.twig
-//
 // Weight: -1
-//
-// Style guide: base.text.i
 
 i,
 em {
@@ -134,10 +109,6 @@ em {
 // Inserted text
 //
 // The `<ins>` element indicates additions to the document.
-//
-// Markup: text-ins.twig
-//
-// Style guide: base.text.ins
 
 ins {
   // Add your styles.
@@ -147,13 +118,9 @@ ins {
 //
 // The `<mark>` element highlights a run of text due to its relevance in another
 // context.
-//
-// Markup: text-mark.twig
-//
-// Style guide: base.text.mark
 
 mark {
-  // Add the correct background and color in IE <10.
+  // Add the correct background and color in IE 9-.
   background-color: color(mark-bg);
   color: color(text);
 }
@@ -162,10 +129,6 @@ mark {
 //
 // The `<q>` element represents an inline quote from another source. Longer
 // quotes should use the `<blockquote>` element.
-//
-// Markup: text-q.twig
-//
-// Style guide: base.text.q
 
 q {
   // Add your styles.
@@ -174,10 +137,6 @@ q {
 // Strikethrough text
 //
 // The `<s>` element indicates blocks of text that are no longer relevant.
-//
-// Markup: text-s.twig
-//
-// Style guide: base.text.s
 
 s {
   // Add your styles.
@@ -187,10 +146,6 @@ s {
 //
 // For de-emphasizing inline or blocks of text, use the `<small>` element to set
 // text at 80% the size of the parent.
-//
-// Markup: text-small.twig
-//
-// Style guide: base.text.small
 
 small {
   // Add the correct font size in all browsers.
@@ -201,10 +156,6 @@ small {
 //
 // The `<sup>` element represents a superscript and the `<sub>` element
 // represents a subscript.
-//
-// Markup: text-sub.twig
-//
-// Style guide: base.text.sub
 
 sub,
 sup {
@@ -228,10 +179,6 @@ sup {
 //
 // To underline text use the `<u>` element. Not recommended since underlines are
 // used by web browsers to style hyperlinks.
-//
-// Markup: text-u.twig
-//
-// Style guide: base.text.u
 
 u {
   // Add your styles.

sass/components/box/_box.scss

@@ -2,7 +2,7 @@
 //
 // A simple box style.
 //
-// A block is often styled as a box. However, this design component is
+// A Drupal block is often styled as a box. However, this design component is
 // not applied to any blocks by default; it is used as an example of how to
 // build and document a CSS component.
 //
@@ -16,10 +16,6 @@
 //
 // :hover - The hover/focus styling.
 // .box--highlight - The "highlight" box variant.
-//
-// Markup: box.twig
-//
-// Style guide: components.box
 
 .box,
 %box {
@@ -35,9 +31,19 @@
   }
 
   // Sass compiles this nested ruleset's selector into:
-  // .box:focus, .box:hover, %box:focus, %box:hover
+  // .box:focus, .box:hover, .box.is-focus, .box--is-focus,
+  // %box:focus, %box:hover, %box.is-focus, %box--is-focus {}
+  //
+  // The ".box--is-focus" class is a stray class we don't actually want, but we
+  // deal with it because we often want a placeholder selector like
+  // %box--is-focus in case we need to use @extends later.
+  //
+  // The ".is-" part of the class name is a Drupal 8 BEM naming convention that
+  // indicates the "focus" is a _state_ of the "box" component.
   &:focus,
-  &:hover {
+  &:hover,
+  &.is-focus,
+  &--is-focus {
     border-color: color(text);
   }
 

sass/components/button/_button.scss

@@ -12,6 +12,9 @@
 //
 // Style guide: forms.button
 
+// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+//    controls in Android 4.
+// 2. Correct the inability to style clickable types in iOS and Safari.
 .button,
 %button,
 button,
@@ -19,6 +22,7 @@ button,
 html [type='button'],
 [type='reset'],
 [type='submit'] {
+  // sass-lint:disable no-vendor-prefixes
   -moz-appearance: button;
   -webkit-appearance: button; // 2
 }
@@ -30,12 +34,9 @@ button,
 [type='reset'],
 [type='submit'] {
   @extend %button--disabled;
-  @include typeface(headings);
-  @include margin-right(.75);
-  @include margin-bottom(.75);
   // Some styles don't apply to <a> links since they are inline elements by default.
   display: inline-block;
-  padding: 2px 10px;
+  padding: 2px 6px;
   // Address Firefox 4+ setting `line-height` on `input` using `!important` in
   // the UA stylesheet. And prevent its "line-height: normal" rule below from
   // breaking the "appearance: button" styling on the input elements.
@@ -44,15 +45,8 @@ button,
   // Improve usability and consistency of cursor style between image-type `input` and others.
   cursor: pointer;
   color: color(button);
-  text-align: center;
-  background-image: linear-gradient(#f6f6f6, #e2e2e2);
-  border: 1px solid #e4e4e4;
-  border-left-color: #d2d2d2;
-  border-right-color: #d2d2d2;
-  border-bottom-color: #b4b4b4;
-  border-radius: 2px;
-
 
+  // sass-lint:disable no-vendor-prefixes
   // Remove the inner border and padding in Firefox.
   &::-moz-focus-inner {
     border-style: none;
@@ -63,6 +57,7 @@ button,
   &:-moz-focusring {
     outline: 1px dotted ButtonText;
   }
+  // sass-lint:enable no-vendor-prefixes
 
   &:hover,
   &:focus,
@@ -71,13 +66,6 @@ button,
     text-decoration: none;
     color: color(button);
   }
-
-  &:active {
-    border-color: #555;
-    text-shadow: color(button) 0 -1px 0;
-    background: color(grey-dark);
-    color: color(text-bg);
-  }
 }
 
 // Add button variations here.
@@ -94,10 +82,6 @@ button,
   // Re-set default cursor for disabled elements.
   cursor: default;
   color: color(button-disabled);
-  background-color: color(grey-extra-light);
-  border-color: color(grey-extra-light);
-  background-image: none;
-  text-shadow: none;
 
   &:hover,
   &:focus,

sass/components/header/_header.scss

@@ -1,20 +1,26 @@
 // Dependencies.
-@import 'base/headings/headings';
+@import 'base/grouping/grouping';
+@import 'components/clearfix/clearfix';
 
 // Branding header
+//
+// Markup: header.twig
+//
+// Style guide: components.header
 
 .header,
 %header {
-  @include respond-to(s) {
+  @extend %clearfix;
-    display: flex;
-  }
 
   // Wrapping link for logo.
   &__logo {
-    margin: 0 $zen-gutters 0 0;
+    float: left;
+    margin: 0 10px 0 0;
+    padding: 0;
 
     @include rtl() {
-      margin: 0 0 0 $zen-gutters;
+      float: right;
+      margin: 0 0 0 10px;
     }
   }
 
@@ -23,11 +29,15 @@
     vertical-align: bottom;
   }
 
+  // Wrapper for website name and slogan.
+  &__name-and-slogan {
+    float: left;
+  }
+
   // The name of the website.
   &__site-name {
     @extend %h1;
     margin: 0;
-    display: inline-block;
   }
 
   // The link around the name of the website.
@@ -44,15 +54,23 @@
     }
   }
 
-  // Wrapper for any blocks placed in the header region.
+  // The slogan (or tagline) of a website.
-  &__region {
+  &__site-slogan {
-    @include respond-to(s) {
+    margin: 0;
-      margin-left: auto;
+  }
 
-      @include rtl() {
+  // The secondary menu (login, etc.)
-        margin-right: auto;
+  &__secondary-menu {
-        margin-left: 0;
+    float: right;
-      }
+
+    @include rtl() {
+      float: left;
     }
   }
+
+  // Wrapper for any blocks placed in the header region.
+  &__region {
+    // Clear the logo.
+    clear: both;
+  }
 }