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