Updated the normalise css.

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) {
-    display: flex;
-  }
+  @extend %clearfix;
 
   // 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.
-  &__region {
-    @include respond-to(s) {
-      margin-left: auto;
+  // The slogan (or tagline) of a website.
+  &__site-slogan {
+    margin: 0;
+  }
 
-      @include rtl() {
-        margin-right: auto;
-        margin-left: 0;
-      }
+  // The secondary menu (login, etc.)
+  &__secondary-menu {
+    float: right;
+
+    @include rtl() {
+      float: left;
     }
   }
+
+  // Wrapper for any blocks placed in the header region.
+  &__region {
+    // Clear the logo.
+    clear: both;
+  }
 }

sass/components/hidden/_hidden.scss

@@ -25,9 +25,14 @@
   }
 }
 
-.nojs-hidden,
-%nojs-hidden {
-  html.nojs & {
-    @extend %hidden;
-  }
+//
+// Drupal selectors.
+//
+
+.element-hidden {
+  @extend %js-hidden;
+}
+
+.js-hide {
+  @extend %js-hidden;
 }

sass/components/highlight-mark/_highlight-mark.scss

@@ -14,3 +14,12 @@
   // Remove background highlighting from <mark> in normalize.
   background-color: transparent;
 }
+
+//
+// Drupal selectors. (In case a module doesn't use theme_mark().)
+//
+
+.new,
+.update {
+  @extend %highlight-mark;
+}

sass/components/inline-links/_inline-links.scss

@@ -22,3 +22,15 @@
     }
   }
 }
+
+//
+// Drupal selectors.
+//
+
+.inline.links {
+  @extend %inline-links;
+
+  li {
+    @extend %inline-links__item;
+  }
+}

sass/components/inline-sibling/_inline-sibling.scss

@@ -31,3 +31,25 @@
     display: inline;
   }
 }
+
+//
+// Drupal selectors.
+//
+
+// Drupal core.
+.field-label-inline {
+  .field-label {
+    @extend %inline-sibling;
+  }
+
+  // Revert core's ridiculous styling without polluting the component.
+  .field-label,
+  .field-items {
+    float: none;
+  }
+}
+
+// The inline field label used by the Fences 7.x-1.x module.
+span.field-label {
+  @extend %inline-sibling;
+}

sass/components/print-none/_print-none.scss

@@ -5,10 +5,6 @@
 // By importing these CSS rules in a file marked as media "all", we allow these
 // print rules to be aggregated with other stylesheets, for improved front-end
 // performance.
-//
-// Markup: print-none.twig
-//
-// Style guide: components.print-none
 
 .print-none,
 %print-none {

sass/components/responsive-video/_responsive-video.scss

@@ -34,3 +34,12 @@
     padding-bottom: (3/4)*100%; // 4:3 aspect ratio
   }
 }
+
+//
+// Drupal selectors.
+//
+
+.media-youtube-video,
+.media-vimeo-preview-wrapper {
+  @extend %responsive-video;
+}

sass/components/visually-hidden/_visually-hidden.scss

@@ -26,3 +26,16 @@
     }
   }
 }
+
+//
+// Drupal selectors.
+//
+
+.element-invisible {
+  @extend %visually-hidden;
+}
+
+.element-focusable {
+  @extend %visually-hidden;
+  @extend %visually-hidden--focusable;
+}

sass/components/wireframe/_wireframe.scss

@@ -16,24 +16,18 @@ $with-wireframes: false !default;
 
   .wireframe,
   %wireframe {
-    outline: 1px solid color(border) !important;
+    outline: 1px solid color(border);
   }
 
   //
-  // Zen selectors.
+  // Drupal selectors.
   //
 
-  .layout {
-    &__header,
-    &__footer,
-    &__main,
-    &__navigation,
-    &__first-sidebar,
-    &__second-sidebar,
-    &__page-top,
-    &__page-bottom {
-      @extend %wireframe;
-    }
+  .header,
+  .layout-3col > div,
+  .footer,
+  .region-bottom {
+    @extend %wireframe;
   }
 
 }