Moving sass and js files in to the assets directory.

assets/sass/components/box/_box.scss

@@ -0,0 +1,57 @@
+// Box
+//
+// A simple box style.
+//
+// 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.
+//
+// "box" is the name of our component, so we define a `.box` class that we can
+// apply to any HTML element that needs the box styling. We also provide a
+// `%box` placeholder selector so that we can easily extend the basic box
+// component with `@extend %box;`.
+//
+// Take a look at the source code for this component for more information about
+// building a good component.
+//
+// :hover - The hover/focus styling.
+// .box--highlight - The "highlight" box variant.
+
+.box,
+%box {
+  @include margin-bottom(1);
+  border: 5px solid $border;
+  padding: 1em;
+
+  // Sass compiles this to the selector: .box__title, %box__title {}
+  // The "__" (double underscore) is part of a BEM naming convention that
+  // indicates the "title" is an _element_ of (a piece of) the "box" component.
+  &__title {
+    margin: 0;
+  }
+
+  // Sass compiles this nested ruleset's selector into:
+  // .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,
+  &.is-focus,
+  &--is-focus {
+    border-color: $text;
+  }
+
+  // Sass compiles this to the selector: .box--highlight, %box--highlight {}
+  // The "--" (double dash) is part of a BEM naming convention that indicates
+  // the "highlight" is a _modifier_, creating a new variation of the standard
+  // "box" component.
+  &--highlight {
+    border-color: $link;
+  }
+}

assets/sass/components/box/box.json

@@ -0,0 +1,4 @@
+{
+  "title": "Box title",
+  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+}

assets/sass/components/button/_button.scss

@@ -0,0 +1,111 @@
+// Button
+//
+// In addition to the default styling of `<button>` and
+// `<input type="submit|image|reset|button">` elements, the `.button` class and
+// its variants can apply buttons styles to various elements (like an `<a>`
+// link).
+//
+// :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,
+[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 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.
+  line-height: inherit;
+  text-decoration: none;
+  // Improve usability and consistency of cursor style between image-type `input` and others.
+  cursor: pointer;
+  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;
+    padding: 0;
+  }
+
+  // Restore the focus styles unset by the previous rule.
+  &:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+  // sass-lint:enable no-vendor-prefixes
+
+  &:hover,
+  &:focus,
+  &:active {
+    // Override any link underlines and color changes.
+    text-decoration: none;
+    color: $button;
+  }
+
+  &:active {
+    border-color: #555;
+    text-shadow: $button 0 -1px 0;
+    background: $grey-dark;
+    color: $text-bg;
+  }
+}
+
+// Add button variations here.
+.button,
+%button {
+  &--variant-name {
+    // Add styles here.
+  }
+}
+
+// The disabled variation should always go last, so that it overrides any
+// other variations.
+%button--disabled[disabled] {
+  // Re-set default cursor for disabled elements.
+  cursor: default;
+  color: $button-disabled;
+  background-color: $grey-extra-light;
+  border-color: $grey-extra-light;
+  background-image: none;
+  text-shadow: none;
+
+  &:hover,
+  &:focus,
+  &:active {
+    // Override any link underlines and color changes.
+    color: $button-disabled;
+  }
+}

assets/sass/components/clearfix/_clearfix.scss

@@ -0,0 +1,9 @@
+// Clearfix
+//
+// Allows the bottom of an element to extend to the bottom of all floated child
+// elements. See http://nicolasgallagher.com/micro-clearfix-hack/
+
+.clearfix,
+%clearfix {
+  @include clearfix();
+}

assets/sass/components/divider/_divider.scss

@@ -0,0 +1,15 @@
+// Divider
+//
+// Can be used as an `<hr>`, an empty `<div>` or as a container.
+
+.divider,
+%divider {
+  @include margin(1 0);
+  border: 0;
+  border-top: 1px solid $border;
+
+  // If used as a container, add a top margin to the first child.
+  > :first-child {
+    @include margin-top(1);
+  }
+}

assets/sass/components/divider/divider.json

@@ -0,0 +1,3 @@
+{
+  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+}

assets/sass/components/header/_header.scss

@@ -0,0 +1,58 @@
+// Dependencies.
+@import 'base/grouping/grouping';
+
+// Branding header
+
+.header,
+%header {
+  @include respond-to(s) {
+    display: flex;
+  }
+
+  // Wrapping link for logo.
+  &__logo {
+    margin: 0 $zen-gutters 0 0;
+
+    @include rtl() {
+      margin: 0 0 0 $zen-gutters;
+    }
+  }
+
+  // Logo image.
+  &__logo-image {
+    vertical-align: bottom;
+  }
+
+  // The name of the website.
+  &__site-name {
+    @extend %h1;
+    margin: 0;
+    display: inline-block;
+  }
+
+  // The link around the name of the website.
+  &__site-link {
+    &:link,
+    &:visited {
+      color: $text;
+      text-decoration: none;
+    }
+
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+    }
+  }
+
+  // Wrapper for any blocks placed in the header region.
+  &__region {
+    @include respond-to(s) {
+      margin-left: auto;
+
+      @include rtl() {
+        margin-right: auto;
+        margin-left: 0;
+      }
+    }
+  }
+}

assets/sass/components/hidden/_hidden.scss

@@ -0,0 +1,29 @@
+// Hidden
+//
+// Hide elements from all users. Compare to the visually-hidden component.
+//
+// Used for elements which should not be immediately displayed to any user. An
+// example would be a collapsible fieldset that will be expanded with a click
+// from a user.
+//
+// For anything you want to hide on page load when JavaScript is enabled, use
+// the `.js-hidden` class.
+
+.hidden,
+%hidden {
+  display: none;
+}
+
+.js-hidden,
+%js-hidden {
+  html.js & {
+    @extend %hidden;
+  }
+}
+
+.nojs-hidden,
+%nojs-hidden {
+  html.nojs & {
+    @extend %hidden;
+  }
+}

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

@@ -0,0 +1,12 @@
+// Highlight mark
+//
+// 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.
+
+.highlight-mark,
+%highlight-mark {
+  color: $mark-highlight;
+  // Remove background highlighting from <mark> in normalize.
+  background-color: transparent;
+}

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

@@ -0,0 +1,20 @@
+// Inline links
+//
+// A list of links that are inline with each other.
+
+.inline-links,
+%inline-links {
+  padding: 0;
+
+  &__item {
+    display: inline;
+    list-style-type: none;
+    padding: 0 1em 0 0;
+
+    @include rtl() {
+      // Bug in Safari causes display: inline to fail.
+      display: inline-block;
+      padding: 0 0 0 1em;
+    }
+  }
+}

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

@@ -0,0 +1,29 @@
+// Inline sibling
+//
+// An element that needs to appear inline with the content that follows.
+
+.inline-sibling,
+%inline-sibling {
+  display: inline;
+  margin-right: 10px;
+
+  @include rtl() {
+    margin-right: 0;
+    margin-left: 10px;
+  }
+
+  // All of the children of the element need to be inline as well.
+  &__child,
+  * {
+    display: inline;
+  }
+
+  // The next element (and its first-child element, if the markup is nested)
+  // needs to be inline.
+  &__adjacent,
+  + *,
+  + * > :first-child,
+  + * > :first-child > :first-child {
+    display: inline;
+  }
+}

assets/sass/components/inverted-box/_inverted-box.scss

@@ -0,0 +1,26 @@
+// A inverted box style.
+
+.inverted-box,
+%inverted-box {
+  @include padding(.5);
+  background: $brand;
+  color: $text-bg;
+  border-radius: 5px;
+
+  :link,
+  :visited {
+    color: $text-bg;
+  }
+
+  p,
+  ul,
+  ol {
+    &:first-of-type {
+      margin-top: 0;
+    }
+
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+}

assets/sass/components/list-straight-left/_list-straight-left.scss

@@ -0,0 +1,60 @@
+// Lists with a straight left margin.
+
+%ul-straight-left {
+  display: table;
+  list-style: none;
+  padding: 0;
+
+  & > li {
+    display: table-row;
+
+    &::before {
+      @include font-size(s);
+      @include padding-right(.5);
+      display: table-cell;
+      content: '\2022';
+
+      @include respond-to(xxl) {
+        @include font-size(s-2);
+      }
+    }
+  }
+}
+
+%ol-straight-left {
+  display: table;
+  list-style: none;
+  padding: 0;
+
+  & > li {
+    display: table-row;
+    counter-increment: table-ol;
+
+    &::before {
+      @include font-size(s);
+      @include padding-right(.5);
+      display: table-cell;
+      content: counter(table-ol) '.';
+      text-align: right;
+
+      @include respond-to(xxl) {
+        @include font-size(s-2);
+      }
+    }
+  }
+}
+
+%ul-straight-left--off {
+  display: block;
+  list-style: inherit;
+
+  & > li {
+    display: list-item;
+
+    &::before {
+      content: '';
+      display: inline;
+      padding: inherit;
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+// Do not print
+//
+// Removes an element from the print version of the web site.
+//
+// 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.
+
+.print-none,
+%print-none {
+  @media print {
+    display: none;
+  }
+}

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

@@ -0,0 +1,32 @@
+// Responsive video
+//
+// Using a wrapper div, embedded videos can be made responsive so that their
+// intrinsic aspect ratio is preserved at any screen width. The
+// `responsive-video__embed` class is optional if the embed is an `iframe`.
+//
+// .responsive-video--4-3 - A video with a 4:3 aspect ratio instead of the
+//                          default 16:9 one.
+
+.responsive-video,
+%responsive-video {
+  position: relative;
+  padding-bottom: (9/16)*100%; // 16:9 aspect ratio
+  padding-top: 25px; // Height of video controls
+  height: 0;
+
+  iframe {
+    @extend %responsive-video__embed;
+  }
+
+  &__embed {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  &--4-3 {
+    padding-bottom: (3/4)*100%; // 4:3 aspect ratio
+  }
+}

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

@@ -0,0 +1,24 @@
+// Visually hidden
+//
+// Make an element visually hidden, but accessible to screen readers, etc.
+//
+// .visually-hidden--off        - Turns off the visually-hidden effect.
+// .visually-hidden--focusable  - Makes an element visually hidden by default,
+//                                but visible when receiving focus.
+// .visually-hidden--focusable:focus  - A focused, and visible, element.
+
+.visually-hidden,
+%visually-hidden {
+  @include visually-hidden();
+
+  &--off {
+    @include visually-hidden--off();
+  }
+
+  &--focusable {
+    &:active,
+    &:focus {
+      @extend %visually-hidden--off;
+    }
+  }
+}

assets/sass/components/visually-hidden/visually-hidden.json

@@ -0,0 +1,3 @@
+{
+  "content": "This text will be read by screen readers, but will be visually hidden."
+}

assets/sass/components/watermark/_watermark.scss

@@ -0,0 +1,20 @@
+// Watermark
+//
+// Make the element appear beneath sibling elements, like a watermark.
+
+.watermark,
+%watermark {
+  @include typeface(compact);
+  display: block;
+  height: 0;
+  overflow: visible;
+  // Remove background highlighting from <mark> in normalize.
+  background-color: transparent;
+  color: $watermark;
+  font-size: 75px;
+  line-height: 1;
+  text-align: center;
+  // sass-lint:disable no-color-literals
+  text-shadow: 0 0 1px rgba(0, 0, 0, .1);
+  word-wrap: break-word;
+}

assets/sass/components/watermark/watermark.json

@@ -0,0 +1,4 @@
+{
+  "content": "Unpublished",
+  "sibling": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+}

assets/sass/components/wireframe/_wireframe.scss

@@ -0,0 +1,35 @@
+$with-wireframes: false !default;
+
+// Wireframe
+//
+// Add wireframes around main layout elements. [Wireframes](http://www.boxesandarrows.com/view/html_wireframes_and_prototypes_all_gain_and_no_pain)
+// are useful when prototyping a website.
+//
+// This design is not applied to the site unless you set the following Sass
+// variable: `$with-wireframes: true;`
+
+@if $with-wireframes {
+
+  .wireframe,
+  %wireframe {
+    outline: 1px solid $border;
+  }
+
+  //
+  // Zen selectors.
+  //
+
+  .layout {
+    &__header,
+    &__footer,
+    &__main,
+    &__navigation,
+    &__first-sidebar,
+    &__second-sidebar,
+    &__page-top,
+    &__page-bottom {
+      @extend %wireframe;
+    }
+  }
+
+}