Updating to normalize.css 8.0.1 minus IE fixes. Other sass file cleanup as well.

assets/sass/_init.scss

@@ -4,55 +4,19 @@
 // project, each .scss file has a `@import 'init';` declaration. The _init.scss
 // file is in charge of importing all the other partials needed for the
 // project.
-//
-// The initialization partial is organized in this way:
-// - First we set any shared Sass variables.
-// - Next we import Sass modules.
-// - Last we define our custom mixins for this project.
-//
-// Weight: -1
-//
-// Style guide: sass.init
-
-
-// The following Sass functions/mixins are required to generate some variables'
-// values, so we load them first.
-@import 'init/breakpoint/respond-to';
 
+// Colours and variables.
 @import 'init/colors';
 @import 'init/variables';
 
-
-// 3rd party libraries
-//
-// The following sass modules are shared with all .scss files:
-// - [Breakpoint](http://breakpoint-sass.com/)
-// - [Typey](https://github.com/jptaranto/typey)
-//
-// Additional pre-built libraries can be found on the [Sache website](http://www.sache.in/).
-//
-// Style guide: sass.modules
-
 // Add typey to manage font sizes and margins.
 @import 'typey';
 
-
-// Mixins
-//
 // Custom mixins used on this site.
-//
+@import 'init/breakpoint/respond-to';
-// Weight: 1
-//
-// Style guide: sass.mixins
 @import 'init/clearfix/clearfix';
 @import 'init/rtl/rtl';
 @import 'init/visually-hidden/visually-hidden';
 
-// Functions
-//
 // Custom functions used on this site.
-//
-// Weight: 1
-//
-// Style guide: sass.functions
 @import 'init/image-url/image-url';

assets/sass/_zen.scss

@@ -1,10 +1,5 @@
 // Zen custom styles
 
-p,
-pre {
-  @include margin(.75 0);
-}
-
 // Page
 
 body {
@@ -245,33 +240,6 @@ figcaption {
   text-decoration: none;
 }
 
-// Messages
-
-.message {
-  padding: 10px;
-  border-width: 1px;
-  border-style: solid;
-  width: 95%;
-
-  &.status {
-    background-color: $status-bg;
-    color: $status;
-    border-color: $status;
-  }
-
-  &.warning {
-    background-color: $warning-bg;
-    color: $warning;
-    border-color: $warning;
-  }
-
-  &.error {
-    background-color: $error-bg;
-    color: $error;
-    border-color: $error;
-  }
-}
-
 // Search
 
 .search-form {
@@ -282,22 +250,6 @@ figcaption {
   @include type-layout(l, 1);
 }
 
-// Language selector
-
-.language-selector {
-  .navbar {
-    &::before {
-      content: '';
-      background-image: url('../images/language-icon.png');
-      background-size: 24px;
-      background-repeat: no-repeat;
-      height: 24px;
-      width: 24px;
-      margin-right: 8px;
-    }
-  }
-}
-
 // Form
 
 .content {

assets/sass/base/_normalize.scss

@@ -1,29 +1,15 @@
 // Normalize.css is intended to be used as an alternative to CSS resets.
 //
-// @see http://nicolasgallagher.com/about-normalize-css/
+// @see https://necolas.github.io/normalize.css/
-//
-// Also: @see http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/
-//       @see http://snook.ca/archives/html_and_css/no_css_reset/
 //
 // This directory is a slight fork of this original source:
-// normalize-scss 7.0.0 | MIT/GPLv2 License | bit.ly/normalize-scss
+// normalize.css 8.0.1 | MIT License
 
 
 // Universal
 // ==========================================================================
 
-// Use the saner border-box model for all elements.
+// Broken into modular pieces to make it easier to edit.
-html {
-  box-sizing: border-box;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: inherit;
-}
-
-// Normalize-scss is broken into modular pieces to make it easier to edit.
 @import 'document/document';
 @import 'sections/sections';
 @import 'grouping/grouping';
@@ -34,7 +20,6 @@ html {
 @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.

assets/sass/base/document/_document.scss

@@ -16,8 +16,18 @@ html {
   // On short pages, we want any background gradients to fill the entire height
   // of the browser.
   min-height: 100%;
+  // Use the saner border-box model.
+  box-sizing: border-box;
 
   @include respond-to(xxl) {
     @include define-type-sizing($base-font-size-2, $base-line-height-2);
   }
 }
+
+// Use the saner border-box model for all elements.
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+

assets/sass/base/embedded/_embedded.scss

@@ -1,18 +1,9 @@
 // Embedded content
-//
-// Weight: 2
 
 // Audio
 
 audio {
-  // Add the correct display in IE 9-.
+  // Add your styles.
-  display: inline-block;
-}
-
-// Add the correct display in iOS 4-7.
-audio:not([controls]) {
-  display: none;
-  height: 0;
 }
 
 // Image
@@ -20,8 +11,7 @@ audio:not([controls]) {
 // An `<img>` element represents an image.
 
 img {
-  // Remove the border on images inside links in IE 10-.
+  // Add your styles.
-  border-style: none;
 }
 
 img,
@@ -34,18 +24,8 @@ svg {
   height: auto;
 }
 
-// Scalable vector
-//
-// A `<svg>` element represents an image encoded as a Scalable Vector Graphic.
-
-svg:not(:root) {
-  // Hide the overflow in IE.
-  overflow: hidden;
-}
-
 // Video
 
 video {
-  // Add the correct display in IE 9-.
+  // Add your styles.
-  display: inline-block;
 }

assets/sass/base/forms/_forms.scss

@@ -6,8 +6,6 @@
 //
 // Component classes can override these styles, but if no class applies a style
 // to an HTML form element, these styles will be the ones displayed.
-//
-// Weight: -1
 
 //
 // The following rules are from normalize.css and help to fix inconsistencies
@@ -216,8 +214,6 @@ select {
 // 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;
 }

assets/sass/base/grouping/_grouping.scss

@@ -2,8 +2,6 @@
 @import 'components/divider/divider';
 
 // Grouping content
-//
-// Weight: 1
 
 
 // Block quotes
@@ -24,8 +22,6 @@ blockquote {
 
 // Lists
 //
-// Weight: -1
-//
 // Style guide: base.grouping.lists
 
 // Unordered list
@@ -41,8 +37,6 @@ blockquote {
 // Description list
 //
 // The `<dl>` element is a list of terms with their associated descriptions.
-//
-// Weight: 1
 
 dl,
 ol,
@@ -86,15 +80,11 @@ ul {
 // caption of the figure.
 
 figure {
-  // Add the correct margin in IE 8.
+  // Add your styles.
-  @include margin(1 0);
-  // Add the correct display in IE 9-.
-  display: block;
 }
 
 figcaption {
-  // Add the correct display in IE 9-.
+  // Add your styles.
-  display: block;
 }
 
 // Horizontal rule
@@ -117,8 +107,7 @@ hr {
 // The `<main>` element represents the main content of the page.
 
 main {
-  // Add the correct display in IE.
+  // Add your styles.
-  display: block;
 }
 
 // Body copy
@@ -126,13 +115,10 @@ main {
 // 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.
-//
-// Weight: -2
 
 p,
 pre {
-  // Set 1 unit of vertical rhythm on the top and bottom margin.
+  @include margin(.75 0);
-  @include margin(1 0);
 }
 
 // Preformatted text

assets/sass/base/hidden/_hidden.scss

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

assets/sass/base/interactive/_interactive.scss

@@ -17,8 +17,6 @@ summary {
 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;
 

assets/sass/base/links/_links.scss

@@ -33,9 +33,4 @@ a:focus {
 
 a:active {
   color: $link-active;
-
-  &:not(.button) {
-    // Remove the gray background on active links in IE 10.
-    background-color: transparent;
-  }
 }

assets/sass/base/scripting/_scripting.scss

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

assets/sass/base/sections/_sections.scss

@@ -11,16 +11,6 @@ body {
   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`

assets/sass/base/tables/_tables.scss

@@ -1,8 +1,6 @@
 // Tables
 //
 // The `<table>` element displays tabular data in rows, columns, and cells.
-//
-// Weight: 1
 
 table {
   // Add vertical rhythm margins.

assets/sass/base/text/_text.scss

@@ -1,8 +1,6 @@
 // Text-level semantics
 //
 // The elements in this section give semantics to inline text.
-//
-// Weight: 1
 
 // Abbreviation / Acroynym
 //
@@ -25,8 +23,6 @@ abbr[title] {
 //
 // Feel free to use `<b>` in HTML5. `<b>` is meant to highlight words or phrases
 // without conveying additional importance.
-//
-// Weight: -1
 
 // Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 
@@ -76,8 +72,7 @@ del {
 // The `<dfn>` element represents the defining instance of a term.
 
 dfn {
-  // Add the correct font style in Android 4.3-.
+  // Add your styles.
-  font-style: italic;
 }
 
 // Italics
@@ -87,8 +82,6 @@ dfn {
 //
 // Feel free to use `<i>` element in HTML5. `<i>` is meant to convey voice,
 // technical terms, etc.
-//
-// Weight: -1
 
 i,
 em {
@@ -109,9 +102,7 @@ ins {
 // context.
 
 mark {
-  // Add the correct background and color in IE 9-.
+  // Add your styles.
-  background-color: $mark-bg;
-  color: $text;
 }
 
 // Quote

assets/sass/components/button/_button.scss

@@ -8,21 +8,6 @@
 // :hover  - Hover styling.
 // :active - Depressed button styling.
 
-// 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,
-// 1
-html [type='button'],
-[type='reset'],
-[type='submit'] {
-  // sass-lint:disable no-vendor-prefixes
-  -moz-appearance: button;
-  -webkit-appearance: button; // 2
-}
-
 .button,
 %button,
 button,
@@ -53,8 +38,11 @@ button,
   border-bottom-color: #b4b4b4;
   border-radius: 2px;
 
-
   // sass-lint:disable no-vendor-prefixes
+  // Correct the inability to style clickable types in iOS and Safari.
+  -moz-appearance: button;
+  -webkit-appearance: button;
+
   // Remove the inner border and padding in Firefox.
   &::-moz-focus-inner {
     border-style: none;

assets/sass/components/language-selector/_language-selector.scss

@@ -0,0 +1,15 @@
+// Language selector
+
+.language-selector {
+  .navbar {
+    &::before {
+      content: '';
+      background-image: url('../images/language-icon.png');
+      background-size: 24px;
+      background-repeat: no-repeat;
+      height: 24px;
+      width: 24px;
+      margin-right: 8px;
+    }
+  }
+}

assets/sass/components/messages/_messages.scss

@@ -0,0 +1,26 @@
+// Messages
+
+.message {
+  padding: 10px;
+  border-width: 1px;
+  border-style: solid;
+  width: 95%;
+
+  &.status {
+    background-color: $status-bg;
+    color: $status;
+    border-color: $status;
+  }
+
+  &.warning {
+    background-color: $warning-bg;
+    color: $warning;
+    border-color: $warning;
+  }
+
+  &.error {
+    background-color: $error-bg;
+    color: $error;
+    border-color: $error;
+  }
+}

assets/sass/init/_variables.scss

@@ -148,8 +148,6 @@ $zen-gutters: 20px;
 // `$indent-amount` controls the amount lists, blockquotes and comments are indented.
 //
 // `$include-rtl` controls whether RTL styles are output.
-//
-// weight: 10
 
 $indent-amount: 2 * $base-font-size;
 

assets/sass/print.scss

@@ -4,14 +4,10 @@
 // Colors and Sass
 //
 // Documentation for colors and Sass mixins and variables.
-//
-// Weight: -1
 
 @import 'init';
 
 // Components
-//
-// Weight: 1
 
 @import 'components/print-none/print-none';
 

assets/sass/styles.scss

@@ -4,12 +4,9 @@
 // We categorize our components by creating headings in this file. See the
 // description on the style guide home page for more information.
 
-
 // Colors and Sass
 //
 // Documentation for colors and Sass mixins and variables.
-//
-// Weight: -1
 
 @import 'init';
 
@@ -36,8 +33,6 @@
 //
 // Design components are reusable designs that can be applied using just the CSS
 // class names specified in the component.
-//
-// Weight: 1
 
 @import 'components/box/box';
 @import 'components/clearfix/clearfix';
@@ -47,7 +42,9 @@
 @import 'components/inline-links/inline-links';
 @import 'components/inline-sibling/inline-sibling';
 @import 'components/inverted-box/inverted-box';
+@import 'components/language-selector/language-selector';
 @import 'components/list-straight-left/list-straight-left';
+@import 'components/messages/messages';
 @import 'components/responsive-video/responsive-video';
 @import 'components/visually-hidden/visually-hidden';
 @import 'components/watermark/watermark';
@@ -57,8 +54,6 @@
 //
 // Navigation components are specialized design components that are used for
 // page navigation.
-//
-// Weight: 2
 
 @import 'navigation/more-link/more-link';
 @import 'navigation/navbar/navbar';