Moving sass and js files in to the assets directory.

assets/js/contact.js

@@ -0,0 +1,63 @@
+/**
+ * @file
+ * A JavaScript file for the contact form.
+ */
+
+(function ($) {
+
+  'use strict';
+
+  // Contact form.
+  $('.contact-form').each(function () {
+    var $contact_form = $(this);
+    var $contact_button = $contact_form.find('.form-submit');
+    var contact_action = '/php/contact.php';
+
+    // Display the hidden form.
+    $contact_form.removeClass('hidden');
+    // Remove the "no javascript" messages
+    $('.contact-no-js').detach();
+
+    // Wait for a mouse to move, indicating they are human.
+    $('body').mousemove(function () {
+      // Unlock the form.
+      $contact_form.attr('action', contact_action);
+      $contact_button.attr('disabled', false);
+    });
+
+    // Wait for a touch move event, indicating that they are human.
+    $('body').on('touchmove', function () {
+      // Unlock the form.
+      $contact_form.attr('action', contact_action);
+      $contact_button.attr('disabled', false);
+    });
+
+    // A tab or enter key pressed can also indicate they are human.
+    $('body').keydown(function (e) {
+      if ((e.keyCode === 9) || (e.keyCode === 13)) {
+        // Unlock the form.
+        $contact_form.attr('action', contact_action);
+        $contact_button.attr('disabled', false);
+      }
+    });
+
+    // Mark the form as submitted.
+    $contact_button.click(function () {
+      $contact_form.addClass('js-submitted');
+    });
+
+    // Display messages.
+    if (location.search.substring(1) !== '') {
+      switch (location.search.substring(1)) {
+        case 'submitted':
+          $('.contact-submitted').removeClass('hidden');
+          break;
+
+        case 'error':
+          $('.contact-error').removeClass('hidden');
+          break;
+      }
+    }
+  });
+
+})(jQuery);

assets/js/script.js

@@ -0,0 +1,42 @@
+/**
+ * @file
+ * A JavaScript file for the theme.
+ */
+
+(function ($) {
+
+  'use strict';
+
+  // Add a js class to the html-tag when JavsScript is active.
+  $('html').removeClass('nojs').addClass('js');
+
+  // Activate the mobil menu for small screens.
+  if (window.matchMedia && $('.mobile-nav-wrapper').length) {
+    var mq = window.matchMedia('(max-width: 666px)');
+    if (mq.matches) {
+      // Show mobile menu.
+      $('.mobile-nav-wrapper').removeClass('hidden');
+
+      // Populate the mobile nav sheet.
+      $('.header__region').filter(':not(:empty)').removeClass('header__region region hidden').addClass('js-region').appendTo('.mobile-nav-sheet');
+      $('.main-menu').addClass('hidden').clone().removeClass('main-menu layout__navigation hidden').addClass('js-main-menu').appendTo('.mobile-nav-sheet').find('.navbar').removeClass('navbar').addClass('js-navbar');
+
+      // Toggle the mobile nav sheet.
+      $('.mobile-nav-cover, .mobile-nav-toggle').click(function (e) {
+        e.preventDefault();
+        $('body').scrollTop(0).toggleClass('js-nav-open');
+      });
+
+      // Close the nav sheet after click (needed for anchor links).
+      $('.mobile-nav-sheet').find('a').click(function () {
+        $('body').removeClass('js-nav-open');
+      });
+    }
+  }
+
+  // Display CSS grid layout warning to old browsers.
+  // if (!window.CSS || !window.CSS.supports || !window.CSS.supports('display', 'grid')) {
+  //   $('.header').after('<div class="layout__grid-notice" role="complementary">Your browsers does not support modern grid layout so this page will not look or behave as it should. Resent versions of Chrome, Firefox and Safari all works so please update. Support is coming in Microsoft Edge as well, until then use another browser. <a href="https://www.whatbrowser.org/">What Browser?</a></div>');
+  // }
+
+})(jQuery);

assets/sass/README.txt

@@ -0,0 +1,88 @@
+ZEN'S STYLESHEETS
+-----------------
+
+Don't panic!
+
+There are a lot of files in this Sass folder. A lot. 56, actually.
+
+I swear to you I'm going to give you a good reason not to panic. Just give me
+a minute. (ヘ･_･)ヘ┳━┳
+
+Okay, how about just panicking slightly while I collect my thoughts.
+(╯°□°）╯︵ ┻━┻
+
+Okay. Okay. There _are_ 56 Sass files in this sub-theme, but it's not as bad as
+it first seems.
+
+Why not just one stylesheet?
+
+- For performance reasons you should always have all of your CSS in a single
+  file to minimize the number of HTTP requests the user's browser needs to do.
+  Fortunately, Drupal has a "Aggregate and compress CSS" feature that will
+  automatically combine all the CSS files from its modules and themes into one
+  file. You can turn on that feature under "Bandwidth Optimization" on the page:
+    Administration > Configuration > Development > Performance
+  So Drupal allows us (if we want) to use more than one stylesheet file, but
+  still serves all the styles in one file to our users.
+
+- When developing a site using a single stylesheet, it can become unwieldy to
+  scroll and find the place you need to edit. As a deadline becomes imminent,
+  developers often start stuffing new styles at the bottom of the stylesheet,
+  completely destroying any stylesheet organization.
+
+- Instead of one monolithic stylesheet, Zen sub-themes' CSS files are organized
+  into many small stylesheets. Once you learn the organization (described
+  below) it becomes easier to find the right place to add new styles.
+
+- All the Sass files are imported into the styles.scss so all the CSS is output
+  to the styles.css file.
+
+ORGANIZATION OF STYLESHEETS
+---------------------------
+
+All of the styles in this sub-theme are built using component-based designs. To
+learn more about component-based design, watch the Drupalcon presentation,
+"Style Guide Driven Development: All hail the robot overlords!"
+https://events.drupal.org/losangeles2015/sessions/style-guide-driven-development-all-hail-robot-overlords
+
+The Sass files are organized in a simple file hierarchy, and, best of all are
+documented in a style guide which is super easy to keep up-to-date. Open the
+style guide to learn more about the styles and Sass used in this sub-theme.
+
+Open the styleguide/index.html file in a web browser.
+
+
+ABOUT SASS
+----------
+
+This directory includes Sass versions of Zen's CSS files.
+
+Sass is a language that is just normal CSS plus some extra features, like
+variables, nested rules, math, mixins, etc. If your stylesheets are written in
+Sass, helper applications can convert them to standard CSS so that you can
+include the CSS in the normal ways with your theme.
+
+To learn more about Sass, visit: http://sass-lang.com
+
+Since Sass is just a language, we also need an executable that can easily
+convert Sass files into CSS. We use node-sass to convert our files to CSS. And
+we use Gulp.js to run node-sass and many other useful front-end tasks.
+
+
+DEVELOPING WITH SASS
+--------------------
+
+To automatically generate the CSS versions of the scss while you are doing theme
+development, you'll need to tell Gulp to "watch" the sass directory so that
+any time a .scss file is changed it will automatically generate a CSS file in
+your sub-theme's css directory:
+
+  gulp watch
+
+
+MOVING YOUR CSS TO PRODUCTION
+-----------------------------
+
+Simple! Generate your CSS with: gulp
+
+And don't forget to turn on Drupal's CSS aggregation. :-)

assets/sass/_custom.scss

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

assets/sass/_init.scss

@@ -0,0 +1,58 @@
+// Initialization partial
+//
+// To make it easier to use all variables and mixins in any Sass file in this
+// 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';
+
+@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.
+//
+// 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

@@ -0,0 +1,340 @@
+// Zen custom styles
+
+p,
+pre {
+  @include margin(.75 0);
+}
+
+// Page
+
+body {
+  background-color: $backdrop;
+}
+
+.page {
+  background-color: $body-bg;
+}
+
+.header {
+  padding-top: $zen-gutters / 2;
+
+  @include respond-to(s) {
+    padding-top: $zen-gutters;
+  }
+}
+
+.footer {
+  @include margin-top(1.5);
+  @include padding(.5 0);
+  text-align: center;
+  border-top: 2px solid $brand;
+
+  p {
+    margin: 0;
+  }
+}
+
+// Apply smaller text to blocks, footer etc.
+
+th,
+label,
+legend,
+figcaption {
+  @include type-layout(s, 1);
+
+  @include respond-to(xxl) {
+    @include type-layout(s-2, 1);
+  }
+}
+
+.language-selector,
+article > header,
+.content-dates,
+.footer {
+  @include type-layout(xs, 1);
+
+  @include respond-to(xxl) {
+    @include type-layout(xs-2, 1);
+  }
+}
+
+// Apply heading font stack to heading, labels etc.
+
+h1,
+h2,
+h3,
+th,
+nav,
+label,
+legend,
+article > header,
+.content-dates,
+.header,
+.footer {
+  @include typeface(headings);
+  color: $headings;
+  font-weight: normal;
+}
+
+article > .content,
+aside {
+  ul {
+    @extend %ul-straight-left;
+  }
+
+  ol {
+    @extend %ol-straight-left;
+  }
+}
+
+article {
+
+  & > header {
+    color: $text-meta;
+
+    p {
+      @include margin(.2 0);
+    }
+
+  }
+
+  .submitted,
+  .tags {
+    @include respond-to(l) {
+      display: inline-block;
+      padding-right: 1rem;
+    }
+  }
+
+  .tags {
+    ul {
+      margin: 0;
+      padding: 0;
+    }
+
+    ul,
+    li {
+      display: inline;
+    }
+
+    li {
+      list-style-type: none;
+    }
+
+    a {
+      @include padding-right(.2);
+    }
+  }
+
+  code {
+    @include type-layout(xs, 1);
+    word-wrap: break-word;
+
+    @include respond-to(xxl) {
+      @include type-layout(xs-2, 1);
+    }
+  }
+
+  pre {
+    color: $code;
+    border-radius: 3px;
+    padding: 5px;
+    border: 1px solid $border;
+    background-color: $text-bg;
+    overflow: auto;
+    max-height: 250px;
+    max-width: 90vw;
+
+    @include respond-to(s) {
+      max-width: 600px;
+    }
+
+    & > code {
+      display: inline-block;
+      white-space: pre;
+    }
+  }
+
+  .content-dates {
+    color: $text-meta;
+    text-align: right;
+  }
+}
+
+.title-submitted {
+  margin-bottom: 0;
+}
+
+figure {
+  @include respond-to(s) {
+    display: table;
+
+    img {
+      display: block;
+    }
+
+    &.left {
+      @include padding(0 .5 .5 0);
+      margin: 0;
+      float: left;
+      clear: both;
+
+      figcaption {
+        @include padding(0 .5 .5 0);
+      }
+    }
+
+    &.right {
+      @include padding(0 0 .5 .5);
+      margin: 0;
+      float: right;
+      clear: both;
+
+      figcaption {
+        @include padding(0 0 .5 .5);
+      }
+    }
+  }
+}
+
+figcaption {
+  @include respond-to(s) {
+    display: table-caption;
+    caption-side: bottom;
+  }
+
+  h4,
+  p {
+    margin: 0;
+  }
+}
+
+// Navigation
+
+.main-menu {
+  @include margin-top(.5);
+  outline: 0;
+
+  li {
+    @include margin-right(.5);
+    @include margin-bottom(.5);
+    padding: 0;
+  }
+
+  a {
+    display: block;
+    background-color: $brand;
+    color: $text-bg;
+    padding: 2px 8px;
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+      background-color: $brand-dark;
+    }
+
+    &:active,
+    &.active {
+      background-color: $brand;
+      text-decoration: underline;
+    }
+  }
+}
+
+.menu a.active {
+  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 {
+  @include padding(.5 0);
+}
+
+.search-text {
+  @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 {
+  input,
+  textarea {
+    @include margin-bottom(.75);
+    width: 92%;
+
+    &:required+span::after {
+      content: ' *';
+      color: $red;
+      vertical-align: top;
+    }
+
+    &:not(:placeholder-shown):valid {
+      background-color: $status-bg;
+    }
+
+    &:not(:placeholder-shown):invalid {
+      background-color: $error-bg;
+    }
+  }
+
+  button {
+    display: block;
+  }
+}
+
+.js-submitted {
+  input,
+  textarea {
+    &:valid {
+      background-color: $status-bg;
+    }
+
+    &:invalid {
+      background-color: $error-bg;
+    }
+  }
+}

assets/sass/base/_fonts.scss

@@ -0,0 +1,34 @@
+// Font faces
+//
+// Instead of relying on the fonts that are available on a user's computer, you
+// can use web fonts which, like images, are resources downloaded to the user's
+// browser. Because of the bandwidth and rendering resources required, web fonts
+// should be used with care.
+//
+// Numerous resources for web fonts can be found on Google. Here are a few
+// 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
+// Font-Face Generator:
+//   http://www.fontsquirrel.com/fontface/generator
+//
+// The following is an example @font-face declaration. This font can then be
+// used in any ruleset using a property like this:  font-family: Example, serif;
+//
+// Since we're using Sass, you'll need to declare your font faces here, then you
+// can add them to the font variables in the _init.scss partial.
+
+// @font-face {
+//   font-family: 'Example';
+//   src: url('../fonts/example.eot');
+//   src: url('../fonts/example.eot?iefix') format('eot'),
+//     url('../fonts/example.woff') format('woff'),
+//     url('../fonts/example.ttf') format('truetype'),
+//     url('../fonts/example.svg#webfontOkOndcij') format('svg');
+//   font-weight: normal;
+//   font-style: normal;
+// }

assets/sass/base/_normalize.scss

@@ -0,0 +1,40 @@
+// Normalize.css is intended to be used as an alternative to CSS resets.
+//
+// @see http://nicolasgallagher.com/about-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
+
+
+// Universal
+// ==========================================================================
+
+// Use the saner border-box model for all elements.
+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';
+@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.

assets/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);
+  }
+}

assets/sass/base/embedded/_embedded.scss

@@ -0,0 +1,51 @@
+// Embedded content
+//
+// Weight: 2
+
+// 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.
+
+img {
+  // Remove the border on images inside links in IE 10-.
+  border-style: none;
+}
+
+img,
+svg {
+  // Suppress the space beneath the baseline
+  // vertical-align: bottom;
+
+  // Responsive images
+  max-width: 100%;
+  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-.
+  display: inline-block;
+}

assets/sass/base/forms/_forms.scss

@@ -0,0 +1,233 @@
+// sass-lint:disable no-vendor-prefixes, no-css-comments
+
+// Form defaults
+//
+// These are the default base styles applied to HTML form elements.
+//
+// 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
+// across various browsers. You should probably leave these rules as is and jump
+// to the "Buttons" rule on line 92 before you start editing this file.
+//
+
+button,
+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%;
+  // Remove the margin in Firefox and Safari.
+  margin: 0;
+}
+
+// Show the overflow in IE.
+button {
+  overflow: visible;
+}
+
+// Remove the inheritance of text transform in Edge, Firefox, and IE.
+button,
+select {
+  text-transform: none;
+}
+
+// Show the overflow in Edge.
+input {
+  overflow: visible;
+}
+
+// Correct the cursor style of increment and decrement buttons in Chrome.
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type='search'] {
+  // Correct the odd appearance in Chrome and Safari.
+  -webkit-appearance: textfield;
+  // Correct the outline style in Safari.
+  outline-offset: -2px;
+
+  // Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+}
+
+::-webkit-file-upload-button {
+  // Correct the inability to style clickable types in iOS and Safari.
+  -webkit-appearance: button;
+  // Change font properties to `inherit` in Safari.
+  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 {
+  // Add your styles.
+}
+
+// Inputs
+//
+// The `<input>` element is mostly used for text-based inputs that include the
+// HTML5 types: `text`, `search`, `tel`, `url`, `email`, `password`, `date`,
+// `time`, `number`, `range`, `color`, and `file`.
+//
+// Note: Certain font size values applied to `number` inputs cause the cursor
+// style of the decrement button to change from `default` to `text`.
+//
+// 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'],
+[type='tel'],
+[type='url'],
+[type='email'],
+[type='password'],
+[type='date'],
+[type='time'],
+[type='number'] {
+  @extend %text-form-element !optional;
+}
+
+[type='range'] {
+  // Add your styles.
+}
+
+[type='color'] {
+  // Add your styles.
+}
+
+[type='file'] {
+  // Add your styles.
+}
+
+// Checkboxes
+//
+// If an `<input>` element has the `type='checkbox'` attribute set, the form
+// field is displayed as a checkbox.
+//
+// It is recommended that you do not style checkbox and radio inputs as
+// Firefox's implementation does not respect box-sizing, padding, or width.
+
+// Radio buttons
+//
+// If an `<input>` element has the `type='radio'` attribute set, the form field
+// is displayed as a radio button.
+//
+// It is recommended that you do not style checkbox and radio inputs as
+// Firefox's implementation does not respect box-sizing, padding, or width.
+
+[type='checkbox'],
+[type='radio'] {
+  // Add the correct box sizing in IE 10-.
+  box-sizing: border-box;
+  // Remove the padding in IE 10-.
+  padding: 0;
+}
+
+// Fieldsets
+//
+// The `<fieldset>` element groups a set of form fields, optionally under a
+// common name given by the `<legend>` element.
+
+fieldset {
+  // Correct the padding in Firefox.
+  @include padding(.35 .5 .65);
+  border: 1px solid $border;
+}
+
+legend {
+  // Correct the text wrapping in Edge and IE.
+  box-sizing: border-box;
+  display: table;
+  max-width: 100%;
+  // 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
+//
+// 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.
+
+label {
+  // Drupal-style form labels.
+  display: block;
+  font-weight: bold;
+}
+
+// Select list
+//
+// The `<select>` element represents a form field for selecting amongst a set of
+// options.
+//
+// Known limitation: by default, Chrome and Safari on OS X allow very limited
+// 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
+// Safari on OS X.
+
+select {
+  // Add your styles.
+}
+
+// Progress
+//
+// 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.
+
+textarea {
+  @extend %text-form-element !optional;
+  // Remove the default vertical scrollbar in IE.
+  overflow: auto;
+}

assets/sass/base/grouping/_grouping.scss

@@ -0,0 +1,153 @@
+// Dependencies.
+@import 'components/divider/divider';
+
+// Grouping content
+//
+// Weight: 1
+
+
+// Block quotes
+//
+// The `<blockquote>` element is for quoting blocks of content from another
+// source within your document. Wrap the `<blockquote>` around any <abbr
+// title="HyperText Markup Language">HTML</abbr> as the quote. For straight
+// quotes, we recommend a `<p>`.
+//
+// Optionally, add a `<footer>` to identify the source of the quote, wrapping
+// the name of the source work in `<cite>`.
+
+blockquote {
+  // Set 1 unit of vertical rhythm on the top and bottom margin.
+  // Also indent the quote on both sides.
+  @include margin(1 $indent-amount);
+}
+
+// Lists
+//
+// Weight: -1
+//
+// Style guide: base.grouping.lists
+
+// Unordered list
+//
+// The `<ul>` element is a list of items in which the order does <em>not</em>
+// explicitly matter.
+
+// Ordered list
+//
+// The `<ol>` element is a list of items in which the order <em>does</em>
+// explicitly matter.
+
+// Description list
+//
+// The `<dl>` element is a list of terms with their associated descriptions.
+//
+// Weight: 1
+
+dl,
+ol,
+ul {
+  @include margin(1 0);
+}
+
+dt {
+  // Add your styles.
+}
+
+dd {
+  margin: 0 0 0 $indent-amount;
+
+  @include rtl {
+    margin: 0 $indent-amount 0 0;
+  }
+}
+
+ol,
+ul {
+  padding: 0 0 0 $indent-amount;
+
+  @include rtl {
+    padding: 0 $indent-amount 0 0;
+  }
+
+  // Turn off margins on nested lists.
+  ol,
+  ul {
+    margin: 0;
+  }
+}
+
+// Figures
+//
+// The `<figure>` element can be used to annotate illustrations, diagrams,
+// photos, code listings, etc.
+//
+// Optionally, a `<figcaption>` element inside the `<figure>` represents the
+// caption of the figure.
+
+figure {
+  // Add the correct margin in IE 8.
+  @include margin(1 0);
+  // Add the correct display in IE 9-.
+  display: block;
+}
+
+figcaption {
+  // Add the correct display in IE 9-.
+  display: block;
+}
+
+// Horizontal rule
+//
+// 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.
+
+hr {
+  @extend %divider;
+  // Add the correct box sizing in Firefox.
+  box-sizing: content-box;
+  height: 0;
+  // Show the overflow in Edge and IE.
+  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.
+//
+// Weight: -2
+
+p,
+pre {
+  // Set 1 unit of vertical rhythm on the top and bottom margin.
+  @include margin(1 0);
+}
+
+// Preformatted text
+//
+// The `<pre>` element represents a block of preformatted text, such as
+// fragments of computer code, ASCII art, etc.
+
+%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;
+}
+
+pre {
+  @extend %monospace;
+}

assets/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;
+}

assets/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;
+  }
+}

assets/sass/base/links/_links.scss

@@ -0,0 +1,41 @@
+// Links
+//
+// Hyperlinks are used to allow the user to navigate to other resources or to
+// download a resource.
+//
+// The order of link states are based on Eric Meyer's article:
+// http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states
+//
+// :visited - A link that has already been visited.
+// :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.
+
+a,
+%link {
+  color: $link;
+  // sass-lint:disable no-vendor-prefixes
+  // Remove gaps in links underline in iOS 8+ and Safari 8+.
+  -webkit-text-decoration-skip: objects;
+}
+
+// Any element can receive focus, but only links can be visited, so we can
+// safely lower this selector's specificity. This also ensures visited links
+// with additional styles won't have their styles overridden.
+:visited {
+  color: $link-visited;
+}
+
+a:hover,
+a:focus {
+  color: $link-hover;
+}
+
+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

@@ -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;
+}

assets/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);
+  }
+}

assets/sass/base/tables/_tables.scss

@@ -0,0 +1,21 @@
+// Tables
+//
+// The `<table>` element displays tabular data in rows, columns, and cells.
+//
+// Weight: 1
+
+table {
+  // Add vertical rhythm margins.
+  @include margin(1 0);
+  // Remove most spacing between table cells.
+  border-collapse: collapse;
+  border-spacing: 0;
+  // Prevent cramped-looking tables
+  width: 100%;
+}
+
+td,
+th {
+  // Remove most spacing between table cells.
+  padding: 0;
+}