Reset som Hugo Zen changes from Drupal Zen.

sass/base/text/_text.scss

@@ -46,10 +46,6 @@ strong {
 // Cite
 //
 // The `<cite>` element represents a reference to a creative work.
-//
-// Markup: text-cite.twig
-//
-// Style guide: base.text.cite
 
 cite {
   // Add your styles.

sass/components/box/_box.scss

@@ -2,7 +2,7 @@
 //
 // A simple box style.
 //
-// A Drupal block is often styled as a box. However, this design component is
+// A 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.
 //

sass/components/button/_button.scss

@@ -7,10 +7,6 @@
 //
 // :hover  - Hover styling.
 // :active - Depressed button styling.
-//
-// Markup: button.twig
-//
-// Style guide: forms.button
 
 // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 //    controls in Android 4.
@@ -33,10 +29,14 @@ button,
 [type='button'],
 [type='reset'],
 [type='submit'] {
+  // sass-lint:disable no-color-hex, no-color-literals
   @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 6px;
+  padding: 2px 10px;
   // 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.
@@ -45,6 +45,14 @@ 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.
@@ -66,6 +74,13 @@ 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.
@@ -82,6 +97,10 @@ 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/clearfix/_clearfix.scss

@@ -2,10 +2,6 @@
 //
 // Allows the bottom of an element to extend to the bottom of all floated child
 // elements. See http://nicolasgallagher.com/micro-clearfix-hack/
-//
-// Markup: clearfix.twig
-//
-// Style guide: components.clearfix
 
 .clearfix,
 %clearfix {

sass/components/divider/_divider.scss

@@ -1,10 +1,6 @@
 // Divider
 //
 // Can be used as an `<hr>`, an empty `<div>` or as a container.
-//
-// Markup: divider.twig
-//
-// Style guide: components.divider
 
 .divider,
 %divider {

sass/components/header/_header.scss

@@ -1,26 +1,20 @@
 // Dependencies.
 @import 'base/grouping/grouping';
-@import 'components/clearfix/clearfix';
 
 // Branding header
-//
-// Markup: header.twig
-//
-// Style guide: components.header
 
 .header,
 %header {
-  @extend %clearfix;
+  @include respond-to(s) {
+    display: flex;
+  }
 
   // Wrapping link for logo.
   &__logo {
-    float: left;
+    margin: 0 $zen-gutters 0 0;
-    margin: 0 10px 0 0;
-    padding: 0;
 
     @include rtl() {
-      float: right;
+      margin: 0 0 0 $zen-gutters;
-      margin: 0 0 0 10px;
     }
   }
 
@@ -29,15 +23,11 @@
     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.
@@ -54,23 +44,15 @@
     }
   }
 
-  // The slogan (or tagline) of a website.
-  &__site-slogan {
-    margin: 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.
+    @include respond-to(s) {
-    clear: both;
+      margin-left: auto;
+
+      @include rtl() {
+        margin-right: auto;
+        margin-left: 0;
+      }
+    }
   }
 }

sass/components/hidden/_hidden.scss

@@ -8,10 +8,6 @@
 //
 // For anything you want to hide on page load when JavaScript is enabled, use
 // the `.js-hidden` class.
-//
-// Markup: hidden.twig
-//
-// Style guide: components.hidden
 
 .hidden,
 %hidden {
@@ -25,14 +21,9 @@
   }
 }
 
-//
+.nojs-hidden,
-// Drupal selectors.
+%nojs-hidden {
-//
+  html.nojs & {
-
+    @extend %hidden;
-.element-hidden {
+  }
-  @extend %js-hidden;
-}
-
-.js-hide {
-  @extend %js-hidden;
 }

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

@@ -3,10 +3,6 @@
 // The "new" or "updated" marker. This is a very thin component. A front-end
 // developer may choose to delete this component and just style the `<mark>`
 // element directly.
-//
-// Markup: highlight-mark.twig
-//
-// Style guide: components.highlight-mark
 
 .highlight-mark,
 %highlight-mark {
@@ -14,12 +10,3 @@
   // 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

@@ -1,10 +1,6 @@
 // Inline links
 //
 // A list of links that are inline with each other.
-//
-// Markup: inline-links.twig
-//
-// Style guide: components.inline-links
 
 .inline-links,
 %inline-links {
@@ -22,15 +18,3 @@
     }
   }
 }
-
-//
-// Drupal selectors.
-//
-
-.inline.links {
-  @extend %inline-links;
-
-  li {
-    @extend %inline-links__item;
-  }
-}

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

@@ -1,10 +1,6 @@
 // Inline sibling
 //
 // An element that needs to appear inline with the content that follows.
-//
-// Markup: inline-sibling.twig
-//
-// Style guide: components.inline-sibling
 
 .inline-sibling,
 %inline-sibling {
@@ -31,25 +27,3 @@
     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/responsive-video/_responsive-video.scss

@@ -6,10 +6,6 @@
 //
 // .responsive-video--4-3 - A video with a 4:3 aspect ratio instead of the
 //                          default 16:9 one.
-//
-// Markup: responsive-video.twig
-//
-// Style guide: components.responsive-video
 
 .responsive-video,
 %responsive-video {
@@ -34,12 +30,3 @@
     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

@@ -6,10 +6,6 @@
 // .visually-hidden--focusable  - Makes an element visually hidden by default,
 //                                but visible when receiving focus.
 // .visually-hidden--focusable:focus  - A focused, and visible, element.
-//
-// Markup: visually-hidden.twig
-//
-// Style guide: components.visually-hidden
 
 .visually-hidden,
 %visually-hidden {
@@ -26,16 +22,3 @@
     }
   }
 }
-
-//
-// Drupal selectors.
-//
-
-.element-invisible {
-  @extend %visually-hidden;
-}
-
-.element-focusable {
-  @extend %visually-hidden;
-  @extend %visually-hidden--focusable;
-}

sass/components/watermark/_watermark.scss

@@ -1,10 +1,6 @@
 // Watermark
 //
 // Make the element appear beneath sibling elements, like a watermark.
-//
-// Markup: watermark.twig
-//
-// Style guide: components.watermark
 
 .watermark,
 %watermark {

sass/components/wireframe/_wireframe.scss

@@ -7,10 +7,6 @@ $with-wireframes: false !default;
 //
 // This design is not applied to the site unless you set the following Sass
 // variable: `$with-wireframes: true;`
-//
-// Markup: wireframe.twig
-//
-// Style guide: components.wireframe
 
 @if $with-wireframes {
 
@@ -20,14 +16,20 @@ $with-wireframes: false !default;
   }
 
   //
-  // Drupal selectors.
+  // Zen selectors.
   //
 
-  .header,
+  .layout {
-  .layout-3col > div,
+    &__header,
-  .footer,
+    &__footer,
-  .region-bottom {
+    &__main,
-    @extend %wireframe;
+    &__navigation,
+    &__first-sidebar,
+    &__second-sidebar,
+    &__page-top,
+    &__page-bottom {
+      @extend %wireframe;
+    }
   }
 
 }

sass/navigation/more-link/_more-link.scss

@@ -1,10 +1,6 @@
 // "More" link
 //
-// Styles the "Read more…" and "Help" links common in Drupal.
+// Styles the "Read more…" and "Help" links common on the web.
-//
-// Markup: more-link.twig
-//
-// Style guide: navigation.more-link
 
 .more-link,
 %more-link {
@@ -26,15 +22,3 @@
     }
   }
 }
-
-//
-// Drupal selectors.
-//
-
-.more-help-link {
-  @extend %more-link;
-
-  a {
-    @extend %more-link__help-icon;
-  }
-}

sass/navigation/navbar/_navbar.scss

@@ -29,21 +29,3 @@
     }
   }
 }
-
-//
-// Drupal selectors.
-//
-
-.main-navigation {
-  // Hide the block titles put into the main-navigation area of the page.tpl.php.
-  .block-menu .block__title,
-  .block-menu-block .block__title {
-    @extend %visually-hidden;
-  }
-
-  // Main menu and secondary menu links and menu block links.
-  .links,
-  .menu {
-    @extend %navbar;
-  }
-}

sass/navigation/pager/_pager.scss

@@ -27,7 +27,7 @@
 }
 
 //
-// Drupal selectors.
+// Zen selectors.
 //
 
 // .pager-item     - A list item containing a page number in the list of pages.