First commit.

sass/components/box/_box.scss

@@ -0,0 +1,86 @@
+// Box
+//
+// A simple box style.
+//
+// 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.
+//
+// "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.
+//
+// Markup: box.twig
+//
+// Style guide: components.box
+
+.box,
+%box {
+  @include margin-bottom(1);
+  border: 5px solid color(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: 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: color(link);
+  }
+}
+
+//
+// Drupal selectors.
+//
+// In this part of the file, we write some fugly selectors if we can't figure
+// out how to insert the class we want (.box) into the Drupal theme system. Then
+// we @extend from the fugly selector into the nicely-written component
+// selector.
+//
+
+// You could create a theme hook suggestion and override the block.tpl.php just
+// for the sidebar regions or write a HOOK_preprocess_block() function to check
+// for the regions and insert the classes into the right variables, or, if you
+// have no idea what I'm talking about, you could just use this fugly CSS
+// selector:
+//
+// [class$="sidebar"] {
+//   .block {
+//     @extend %box;
+//   }
+//
+//   .block__title {
+//     @extend %box__title;
+//   }
+// }

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."
+}

sass/components/box/box.twig

@@ -0,0 +1,6 @@
+<div class="box {{modifier_class}}">
+  <h2 class="box__title">{{title}}</h2>
+  <div class="box__content">
+    {{content}}
+  </div>
+</div>

sass/components/clearfix/_clearfix.scss

@@ -0,0 +1,13 @@
+// Clearfix
+//
+// 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 {
+  @include clearfix();
+}

sass/components/clearfix/clearfix.twig

@@ -0,0 +1,3 @@
+<div class="clearfix">
+  <div style="float: left; height: 50px; width: 50%;">A floated item.</div>
+</div>

sass/components/divider/_divider.scss

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

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."
+}

sass/components/divider/divider.twig

@@ -0,0 +1,11 @@
+<div class="divider {{modifier_class}}"></div>
+
+<p>{{content}}</p>
+
+<div class="divider {{modifier_class}}">
+  <p>{{content}}</p>
+</div>
+
+<hr class="divider {{modifier_class}}">
+
+<p>{{content}}</p>

sass/components/header/_header.scss

@@ -0,0 +1,76 @@
+// Dependencies.
+@import 'base/headings/headings';
+@import 'components/clearfix/clearfix';
+
+// Branding header
+//
+// Markup: header.twig
+//
+// Style guide: components.header
+
+.header,
+%header {
+  @extend %clearfix;
+
+  // Wrapping link for logo.
+  &__logo {
+    float: left;
+    margin: 0 10px 0 0;
+    padding: 0;
+
+    @include rtl() {
+      float: right;
+      margin: 0 0 0 10px;
+    }
+  }
+
+  // Logo image.
+  &__logo-image {
+    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;
+  }
+
+  // The link around the name of the website.
+  &__site-link {
+    &:link,
+    &:visited {
+      color: color(text);
+      text-decoration: none;
+    }
+
+    &:hover,
+    &:focus {
+      text-decoration: underline;
+    }
+  }
+
+  // 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.
+    clear: both;
+  }
+}

sass/components/header/header.twig

@@ -0,0 +1,24 @@
+<header class="header {{modifier_class}}" role="banner">
+  <a href="/" title="Home" rel="home" class="header__logo">
+    <img src="kss-assets/sample-inline.png" alt="Home" class="header__logo-image">
+  </a>
+
+  <div class="header__name-and-slogan">
+    <h1 class="header__site-name">
+      <a href="/" title="Home" class="header__site-link" rel="home">Site Name</a>
+    </h1>
+    <div class="header__site-slogan">Slogan</div>
+  </div>
+
+  <nav class="header__secondary-menu" role="navigation">
+    <h2 class="visually-hidden">User menu</h2>
+    <ul class="links inline clearfix">
+      <li class="menu-2 first"><a href="/user">My account</a></li>
+      <li class="menu-15 last"><a href="/user/logout">Log out</a></li>
+    </ul>
+  </nav>
+
+  <div class="header__region">
+    [Header region]
+  </div>
+</header>

sass/components/hidden/_hidden.scss

@@ -0,0 +1,38 @@
+// 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.
+//
+// Markup: hidden.twig
+//
+// Style guide: components.hidden
+
+.hidden,
+%hidden {
+  display: none;
+}
+
+.js-hidden,
+%js-hidden {
+  html.js & {
+    @extend %hidden;
+  }
+}
+
+//
+// Drupal selectors.
+//
+
+.element-hidden {
+  @extend %js-hidden;
+}
+
+.js-hide {
+  @extend %js-hidden;
+}

sass/components/hidden/hidden.twig

@@ -0,0 +1,3 @@
+<div class="hidden {{modifier_class}}">
+  This content is hidden.
+</div>

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

@@ -0,0 +1,25 @@
+// 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.
+//
+// Markup: highlight-mark.twig
+//
+// Style guide: components.highlight-mark
+
+.highlight-mark,
+%highlight-mark {
+  color: color(mark-highlight);
+  // 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/highlight-mark/highlight-mark.twig

@@ -0,0 +1 @@
+<mark class="highlight-mark">New</mark>

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

@@ -0,0 +1,36 @@
+// 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 {
+  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;
+    }
+  }
+}
+
+//
+// Drupal selectors.
+//
+
+.inline.links {
+  @extend %inline-links;
+
+  li {
+    @extend %inline-links__item;
+  }
+}

sass/components/inline-links/inline-links.twig

@@ -0,0 +1,4 @@
+<ul class="inline-links {{modifier_class}}">
+  <li class="inline-links__item"><a href="#">Read more</a></li>
+  <li class="inline-links__item"><a href="#">Comment</a></li>
+</ul>

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

@@ -0,0 +1,55 @@
+// 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 {
+  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;
+  }
+}
+
+//
+// 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/inline-sibling/inline-sibling.twig

@@ -0,0 +1,2 @@
+<h4 class="inline-sibling {{modifier_class}}">A Heading</h4>
+<p>A normal paragraph. 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.</p>

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

@@ -0,0 +1,32 @@
+// 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.
+//
+// Markup: print-none.twig
+//
+// Style guide: components.print-none
+
+.print-none,
+%print-none {
+  @media print {
+    display: none;
+  }
+}
+
+//
+// Drupal selectors.
+//
+
+// Hide Drupal nav elements.
+.toolbar,
+.action-links,
+.links,
+.book-navigation,
+.forum-topic-navigation,
+.feed-icons {
+  @extend %print-none;
+}

sass/components/print-none/print-none.twig

@@ -0,0 +1,3 @@
+<p class="print-none">
+  This item will not be printed.
+</p>