First commit.

sass/base/text/_text.scss

@@ -0,0 +1,245 @@
+// Text-level semantics
+//
+// The elements in this section give semantics to inline text.
+//
+// Weight: 1
+//
+// Style guide: base.text
+
+// Abbreviation / Acroynym
+//
+// The `<abbr>` element makes the meanings of abbreviations and acronyms visible
+// on hover.
+//
+// Markup: text-abbr.twig
+//
+// Style guide: base.text.abbr
+
+abbr[title] {
+  // Remove the bottom border in Firefox <40.
+  border-bottom: 0;
+  // Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+  text-decoration: underline;
+  text-decoration: underline dotted;
+
+  @media print {
+    // Add visible title after abbreviations.
+    &::after {
+      content: ' (' attr(title) ')';
+    }
+  }
+}
+
+// Bold
+//
+// The `<strong>` element or the `<b>` element is for emphasizing a snippet of
+// text with a heavier font-weight.
+//
+// Feel free to use `<b>` in HTML5. `<b>` is meant to highlight words or phrases
+// without conveying additional importance.
+//
+// Markup: text-b.twig
+//
+// Weight: -1
+//
+// Style guide: base.text.b
+
+// Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+
+b,
+strong {
+  font-weight: inherit;
+}
+
+// sass-lint:disable no-mergeable-selectors
+strong,
+b {
+  // Add the correct font weight in Chrome, Edge, and Safari.
+  font-weight: bolder;
+}
+// sass-lint:enable no-mergeable-selectors
+
+// Cite
+//
+// The `<cite>` element represents a reference to a creative work.
+//
+// Markup: text-cite.twig
+//
+// Style guide: base.text.cite
+
+cite {
+  // Add your styles.
+}
+
+// Code
+//
+// The `<code>` element represents a fragment of computer code. The `<var>`
+// element represents a variable. The `<samp>` element represents (sample)
+// output from a program or computing system. The `<kbd>` element represents
+// user input (typically keyboard input.)
+//
+// Markup: text-code.twig
+//
+// Style guide: base.text.code
+
+%monospace,
+code,
+kbd,
+samp,
+var {
+  // 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;
+}
+
+// Deleted text
+//
+// The `<del>` element indicates blocks of text that have been deleted.
+//
+// Markup: text-del.twig
+//
+// Style guide: base.text.del
+
+del {
+  // Add your styles.
+}
+
+// Definition
+//
+// The `<dfn>` element represents the defining instance of a term.
+//
+// Markup: text-dfn.twig
+//
+// Style guide: base.text.dfn
+
+dfn {
+  // Add the correct font style in Android <4.4.
+  font-style: italic;
+}
+
+// Italics
+//
+// The `<em>` element or the `<i>` element is used for emphasizing a snippet of
+// text with italics.
+//
+// Feel free to use `<i>` element in HTML5. `<i>` is meant to convey voice,
+// technical terms, etc.
+//
+// Markup: text-i.twig
+//
+// Weight: -1
+//
+// Style guide: base.text.i
+
+i,
+em {
+  // Add your styles.
+}
+
+// Inserted text
+//
+// The `<ins>` element indicates additions to the document.
+//
+// Markup: text-ins.twig
+//
+// Style guide: base.text.ins
+
+ins {
+  // Add your styles.
+}
+
+// Marked text
+//
+// The `<mark>` element highlights a run of text due to its relevance in another
+// context.
+//
+// Markup: text-mark.twig
+//
+// Style guide: base.text.mark
+
+mark {
+  // Add the correct background and color in IE <10.
+  background-color: color(mark-bg);
+  color: color(text);
+}
+
+// Quote
+//
+// The `<q>` element represents an inline quote from another source. Longer
+// quotes should use the `<blockquote>` element.
+//
+// Markup: text-q.twig
+//
+// Style guide: base.text.q
+
+q {
+  // Add your styles.
+}
+
+// Strikethrough text
+//
+// The `<s>` element indicates blocks of text that are no longer relevant.
+//
+// Markup: text-s.twig
+//
+// Style guide: base.text.s
+
+s {
+  // Add your styles.
+}
+
+// Small text
+//
+// For de-emphasizing inline or blocks of text, use the `<small>` element to set
+// text at 80% the size of the parent.
+//
+// Markup: text-small.twig
+//
+// Style guide: base.text.small
+
+small {
+  // Add the correct font size in all browsers.
+  @include font-size(s);
+}
+
+// Superscript / Subscript
+//
+// The `<sup>` element represents a superscript and the `<sub>` element
+// represents a subscript.
+//
+// Markup: text-sub.twig
+//
+// Style guide: base.text.sub
+
+sub,
+sup {
+  // Prevent `sub` and `sup` elements from affecting the line height in
+  // all browsers.
+  @include font-size(xs);
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -.25em;
+}
+
+sup {
+  top: -.5em;
+}
+
+// Underlined text
+//
+// To underline text use the `<u>` element. Not recommended since underlines are
+// used by web browsers to style hyperlinks.
+//
+// Markup: text-u.twig
+//
+// Style guide: base.text.u
+
+u {
+  // Add your styles.
+}

sass/base/text/text-abbr.twig

@@ -0,0 +1,2 @@
+An abbreviation of the word attribute is <abbr class="{{modifier_class}}" title="attribute">attr</abbr>.
+And <abbr class="{{modifier_class}}" title="HyperText Markup Language">HTML</abbr> is an acroynm.

sass/base/text/text-b.twig

@@ -0,0 +1,3 @@
+The following snippets of text are <strong class="{{modifier_class}}">rendered</strong> as <b class="{{modifier_class}}">bold
+text</b>. Bold text nested inside <i>italic text <b>should</b></i> <em>still be
+<strong>bold</strong></em>.

sass/base/text/text-cite.twig

@@ -0,0 +1,3 @@
+<p>Who is your favorite doctor (in <cite class="{{modifier_class}}">Doctor Who</cite>)?</p>
+
+<p>Comment by <cite class="{{modifier_class}}"><a href="#">Oli Walberg</a></cite></p>

sass/base/text/text-code.twig

@@ -0,0 +1,8 @@
+<p>The <code class="{{modifier_class}}">code</code> element represents a fragment of computer code.</p>
+
+<p>There are <var class="{{modifier_class}}">n</var> flavors of ice cream to be available for purchase!</p>
+
+<p>The computer said <samp class="{{modifier_class}}">Too much cheese in tray two</samp> but I didn't know
+what that meant.</p>
+
+<p>To make George eat an apple, select <kbd class="{{modifier_class}}">File | Eat Apple…</kbd></p>

sass/base/text/text-del.twig

@@ -0,0 +1 @@
+<del class="{{modifier_class}}">This line of text is meant to be treated as deleted text.</del>

sass/base/text/text-dfn.twig

@@ -0,0 +1,5 @@
+<p>The <dfn class="{{modifier_class}}" id="gdo"><abbr title="Garage Door Opener">GDO</abbr></dfn> is a
+device that allows off-world teams to open the iris.</p>
+
+<p>Teal'c activated his <a href="#gdo"><abbr title="Garage Door Opener">GDO</abbr></a>
+and so Hammond ordered the iris to be opened.</p>

sass/base/text/text-i.twig

@@ -0,0 +1,3 @@
+The following snippets of text are <em class="{{modifier_class}}">rendered</em> as <i class="{{modifier_class}}">italic text</i>.
+Italic text nested inside <b>bold text <i>should</i></b> <strong>still be
+<em>italic</em></strong>.

sass/base/text/text-ins.twig

@@ -0,0 +1,2 @@
+<ins class="{{modifier_class}}">This line of text is meant to be treated as an addition to the
+document.</ins>

sass/base/text/text-mark.twig

@@ -0,0 +1,2 @@
+You can use the mark tag to <mark>highlight</mark> text like this.
+<mark class="{{modifier_class}}">New!</mark>

sass/base/text/text-q.twig

@@ -0,0 +1,3 @@
+<q class="{{modifier_class}}" cite="http://www.w3.org/TR/html5/text-level-semantics.html#the-q-element">The
+<code>q</code> element represents some phrasing content quoted from another
+source.</q>

sass/base/text/text-s.twig

@@ -0,0 +1 @@
+<s class="{{modifier_class}}">This line of text is meant to be treated as no longer accurate.</s>

sass/base/text/text-small.twig

@@ -0,0 +1 @@
+<small class="{{modifier_class}}">This line of text is meant to be treated as fine print.</small>

sass/base/text/text-sub.twig

@@ -0,0 +1 @@
+<abbr>M<sup class="{{modifier_class}}">lle</sup></abbr> Gwendoline wrote the equation <code>f(x, n) = log<sub class="{{modifier_class}}">4</sub>x<sup class="{{modifier_class}}">n</sup></code>.

sass/base/text/text-u.twig

@@ -0,0 +1 @@
+<u class="{{modifier_class}}">This line of text will render as underlined</u>