First commit.

sass/base/_fonts.scss

@@ -0,0 +1,33 @@
+// 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
+//
+// 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;
+// }

sass/base/_html5.scss

@@ -0,0 +1,45 @@
+// HTML5 display definitions
+// ==========================================================================
+
+// Add the correct display in IE <10.
+// Add the correct display in Edge, IE, and Firefox for `details` or `summary`.
+// Add the correct display in IE for `main`.
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+// Add the correct display in IE <10.
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+}
+
+// Add the correct display and remove excess height in iOS 4-7.
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+// Add the correct vertical alignment in Chrome, Firefox, and Opera.
+progress {
+  vertical-align: baseline;
+}
+
+// Add the correct display in IE <11, Safari <8, and Firefox <22.
+template,
+[hidden] {
+  display: none;
+}

sass/base/_normalize.scss

@@ -0,0 +1,23 @@
+// 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 5.0.3 | MIT/GPLv2 License | bit.ly/normalize-scss
+
+
+// Normalize-scss is broken into modular pieces to make it easier to edit.
+@import 'root';
+@import 'html5';
+@import 'links/links';
+@import 'headings/headings';
+@import 'text/text';
+@import 'grouping/grouping';
+@import 'embedded/embedded';
+@import 'tables/tables';
+
+// Note: we allow the .button component (loaded by forms) to override :link, by
+// loading links first.

sass/base/_root.scss

@@ -0,0 +1,37 @@
+// sass-lint:disable no-vendor-prefixes
+
+// Use the saner border-box model for all elements.
+* {
+  box-sizing: border-box;
+}
+
+html {
+  @include define-type-sizing();
+  // Change the default font family in all browsers (opinionated).
+  @include typeface(body);
+  // Prevent adjustments of font size after orientation changes in IE and 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%;
+}
+
+body {
+  // Output a horizontal grid to help with debugging typography. The
+  // $typey-debug variable will toggle its output.
+  @include typey-debug-grid();
+  // Remove default margin and padding.
+  margin: 0;
+  padding: 0;
+  color: color(text);
+  background-color: color(text-bg);
+}
+
+@include respond-to(xxl) {
+
+  html {
+    @include define-type-sizing($base-font-size-2, $base-line-height-2);
+  }
+
+}

sass/base/embedded/_embedded.scss

@@ -0,0 +1,46 @@
+// Embedded content
+//
+// Weight: 2
+//
+// Style guide: base.embedded
+
+// Image
+//
+// An `<img>` element represents an image.
+//
+// Markup: embedded-img.twig
+//
+// Style guide: base.embedded.img
+
+img {
+  // Remove the border on images inside links in IE <11.
+  border-style: none;
+  @if support-for(ie, 7) {
+    // Improve image quality when scaled in IE 7.
+    // sass-lint:disable no-vendor-prefixes
+    -ms-interpolation-mode: bicubic;
+  }
+}
+
+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.
+//
+// Markup: embedded-svg.twig
+//
+// Style guide: base.embedded.svg
+
+svg:not(:root) {
+  // Hide the overflow in IE.
+  overflow: hidden;
+}

sass/base/embedded/embedded-img.twig

@@ -0,0 +1,6 @@
+<p>An image <img class="{{modifier_class}}" src="kss-assets/sample-inline.png"> that is inline with other text.</p>
+
+<figure style="width: 50%; max-width: 300px;">
+  <figcaption>An image inside a figure.</figcaption>
+  <img class="{{modifier_class}}" src="kss-assets/sample.png">
+</figure>

sass/base/embedded/embedded-svg.twig

@@ -0,0 +1,8 @@
+<p>A svg image <svg class="{{modifier_class}}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="10px" height="10px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><polygon fill="#bdad94" stroke="#bdad94" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="  259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08   29.274,197.007 188.165,173.919 "/></svg> that is inline with other text.</p>
+
+<figure style="width: 50%; max-width: 300px;">
+  <figcaption>A svg inside a figure.</figcaption>
+  <svg class="{{modifier_class}}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+  <polygon fill="#bdad94" stroke="#bdad94" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="  259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08   29.274,197.007 188.165,173.919 "/>
+  </svg>
+</figure>

sass/base/grouping/_grouping.scss

@@ -0,0 +1,184 @@
+// Dependencies.
+@import 'base/text/text';
+@import 'components/divider/divider';
+
+// Grouping content
+//
+// Weight: 1
+//
+// Style guide: base.grouping
+
+
+// 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>`.
+//
+// Markup: grouping-blockquote.twig
+//
+// Style guide: base.grouping.blockquote
+
+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.
+//
+// Markup: grouping-ul.twig
+//
+// Style guide: base.grouping.lists.ul
+
+// Ordered list
+//
+// The `<ol>` element is a list of items in which the order <em>does</em>
+// explicitly matter.
+//
+// Markup: grouping-ol.twig
+//
+// Style guide: base.grouping.lists.ol
+
+// Description list
+//
+// The `<dl>` element is a list of terms with their associated descriptions.
+//
+// Markup: grouping-dl.twig
+//
+// Weight: 1
+//
+// Style guide: base.grouping.lists.dl
+
+dl,
+menu,
+ol,
+ul {
+  // Address margins set differently in IE 6/7.
+  @include margin(1 0);
+}
+
+// Turn off margins on nested lists.
+ol,
+ul {
+  ol,
+  ul {
+    margin: 0;
+  }
+}
+
+dt {
+  // Add your styles.
+}
+
+dd {
+  margin: 0 0 0 $indent-amount;
+
+  @include rtl {
+    margin: 0 $indent-amount 0 0;
+  }
+}
+
+// Address paddings set differently in IE 6/7.
+menu,
+ol,
+ul {
+  padding: 0 0 0 $indent-amount;
+
+  @include rtl {
+    padding: 0 $indent-amount 0 0;
+  }
+}
+
+@if support-for(ie, 7) {
+  // Correct list images handled incorrectly in IE 7.
+  nav ul,
+  nav ol {
+    list-style: none;
+    list-style-image: none;
+  }
+}
+
+// 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.
+//
+// Markup: grouping-figure.twig
+//
+// Style guide: base.grouping.figure
+
+figure {
+  // Add the correct margin in IE 8.
+  @include margin(1 0);
+}
+
+figcaption {
+  // Add your styles.
+}
+
+// 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.
+//
+// Markup: grouping-hr.twig
+//
+// Style guide: base.grouping.hr
+
+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;
+}
+
+// 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.
+//
+// Markup: grouping-p.twig
+//
+// Weight: -2
+//
+// Style guide: base.grouping.p
+
+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.
+//
+// Markup: grouping-pre.twig
+//
+// Style guide: base.grouping.pre
+
+pre {
+  @extend %monospace;
+}

sass/base/grouping/grouping-blockquote.twig

@@ -0,0 +1,11 @@
+<blockquote class="{{modifier_class}}">
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
+  erat a ante.</p>
+</blockquote>
+
+<blockquote class="{{modifier_class}}">
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
+  erat a ante.</p>
+  <footer>J. Smith in <cite title="Source Title, 2nd Edition">Source
+  Title</cite></footer>
+</blockquote>

sass/base/grouping/grouping-dl.twig

@@ -0,0 +1,9 @@
+<dl class="{{modifier_class}}">
+  <dt>Description lists</dt>
+  <dd>A description list is perfect for defining terms.</dd>
+  <dt>Euismod</dt>
+  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
+  <dd>Donec id elit non mi porta gravida at eget metus.</dd>
+  <dt>Malesuada porta</dt>
+  <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
+</dl>

sass/base/grouping/grouping-figure.twig

@@ -0,0 +1,8 @@
+<figure class="{{modifier_class}}">
+  An illustration, diagram, photo, code listing, etc.
+</figure>
+
+<figure class="{{modifier_class}}">
+  An illustration, diagram, photo, code listing, etc.
+  <figcaption>Figure 1</figcaption>
+</figure>

sass/base/grouping/grouping-hr.twig

@@ -0,0 +1,8 @@
+<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
+penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id
+dolor id nibh ultricies vehicula.</p>
+
+<hr class="{{modifier_class}}">
+
+<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
+ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.</p>

sass/base/grouping/grouping-ol.twig

@@ -0,0 +1,17 @@
+<ol class="{{modifier_class}}">
+  <li>Lorem ipsum dolor sit amet</li>
+  <li>Consectetur adipiscing elit</li>
+  <li>Integer molestie lorem at massa</li>
+  <li>Facilisis in pretium nisl aliquet</li>
+  <li>Nulla volutpat aliquam velit
+    <ol class="{{modifier_class}}">
+      <li>Phasellus iaculis neque</li>
+      <li>Purus sodales ultricies</li>
+      <li>Vestibulum laoreet porttitor sem</li>
+      <li>Ac tristique libero volutpat at</li>
+    </ol>
+  </li>
+  <li>Faucibus porta lacus fringilla vel</li>
+  <li>Aenean sit amet erat nunc</li>
+  <li>Eget porttitor lorem</li>
+</ol>

sass/base/grouping/grouping-p.twig

@@ -0,0 +1,12 @@
+<p class="{{modifier_class}}">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
+penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id
+dolor id nibh ultricies vehicula.</p>
+
+<p class="{{modifier_class}}">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
+ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis,
+est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec
+elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
+
+<p class="{{modifier_class}}">Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit
+non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi
+erat porttitor ligula, eget lacinia odio sem nec elit.</p>

sass/base/grouping/grouping-pre.twig

@@ -0,0 +1,4 @@
+The following text is preformatted:
+<pre class="{{modifier_class}}">
+(ノ゜Д゜)ノ ︵ ┻━┻
+</pre>

sass/base/grouping/grouping-ul.twig

@@ -0,0 +1,17 @@
+<ul class="{{modifier_class}}">
+  <li>Lorem ipsum dolor sit amet</li>
+  <li>Consectetur adipiscing elit</li>
+  <li>Integer molestie lorem at massa</li>
+  <li>Facilisis in pretium nisl aliquet</li>
+  <li>Nulla volutpat aliquam velit
+    <ul class="{{modifier_class}}">
+      <li>Phasellus iaculis neque</li>
+      <li>Purus sodales ultricies</li>
+      <li>Vestibulum laoreet porttitor sem</li>
+      <li>Ac tristique libero volutpat at</li>
+    </ul>
+  </li>
+  <li>Faucibus porta lacus fringilla vel</li>
+  <li>Aenean sit amet erat nunc</li>
+  <li>Eget porttitor lorem</li>
+</ul>

sass/base/headings/_headings.scss

@@ -0,0 +1,103 @@
+// 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.
+//
+// Markup: headings-h.twig
+//
+// Style guide: base.headings
+
+// Address variable `h1` font-size and margin within `section` and `article`
+// contexts in Firefox 4+, Safari, and Chrome.
+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);
+  }
+}

sass/base/headings/headings-h.twig

@@ -0,0 +1,25 @@
+<h1 class="{{modifier_class}}">Heading Level 1 (h1)</h1>
+<p>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.</p>
+<h2 class="{{modifier_class}}">Heading Level 2 (h2)</h2>
+<p>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.</p>
+<h3 class="{{modifier_class}}">Heading Level 3 (h3)</h3>
+<p>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.</p>
+<h4 class="{{modifier_class}}">Heading Level 4 (h4)</h4>
+<p>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.</p>
+<h5 class="{{modifier_class}}">Heading Level 5 (h5)</h5>
+<p>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.</p>
+<h6 class="{{modifier_class}}">Heading Level 6 (h6)</h6>
+<p>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.</p>
+
+<h1 class="{{modifier_class}}">A Heading Level 1 (h1) with enough text to wrap to another line</h1>
+<p>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.</p>
+<h2 class="{{modifier_class}}">Heading Level 2 (h2) with enough text to wrap to another line; Heading Level 2 (h2) with enough text to wrap to another line</h2>
+<p>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.</p>
+<h3 class="{{modifier_class}}">Heading Level 3 (h3) with enough text to wrap to another line; Heading Level 3 (h3) with enough text to wrap to another line</h3>
+<p>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.</p>
+<h4 class="{{modifier_class}}">Heading Level 4 (h4) with enough text to wrap to another line; Heading Level 4 (h4) with enough text to wrap to another line; Heading Level 4 (h4) with enough text to wrap to another line</h4>
+<p>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.</p>
+<h5 class="{{modifier_class}}">Heading Level 5 (h5) with enough text to wrap to another line; Heading Level 5 (h5) with enough text to wrap to another line; Heading Level 5 (h5) with enough text to wrap to another line</h5>
+<p>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.</p>
+<h6 class="{{modifier_class}}">Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another line</h6>
+<p>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.</p>

sass/base/links/_links.scss

@@ -0,0 +1,73 @@
+// 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.
+//
+// Markup: links-a.twig
+//
+// Style guide: base.link
+
+a,
+%link {
+  color: color(link);
+  // 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: color(link-visited);
+}
+
+a:hover,
+a:focus {
+  // Add your styles.
+}
+
+a:active {
+  color: color(link-active);
+
+  &:not(.button) {
+    // Remove the gray background on active links in IE 10.
+    background-color: transparent;
+  }
+}
+
+// Remove the outline on focused links when they are also active or hovered
+// in all browsers (opinionated).
+a:active,
+a:hover {
+  outline-width: 0;
+}
+
+@media print {
+  // Underline all links.
+  :link,
+  :visited {
+    text-decoration: underline;
+  }
+
+  // Add visible URL after links.
+  a[href]::after {
+    content: ' (' attr(href) ')';
+    font-weight: normal;
+    font-size: $base-font-size;
+    text-decoration: none;
+  }
+
+  // Only display useful links.
+  a[href^='javascript:']::after,
+  a[href^='#']::after {
+    content: '';
+  }
+}

sass/base/links/links-a.twig

@@ -0,0 +1 @@
+This is a <a href="#" class="{{modifier_class}}">link to another web page</a>.