restructure source files

Author: chris-pearce

src/content-sectioning.css

@@ -16,3 +16,14 @@ h6 {
   font-weight: normal;
   line-height: inherit;
 }
+
+/**
+ * Print styles.
+ */
+
+@media print {
+  h2,
+  h3 {
+    page-break-after: avoid;
+  }
+}

src/forms.css

@@ -1,3 +1,11 @@
+/**
+ * Indicates that a label will shift focus to its associated control.
+ */
+
+label[for] {
+  cursor: pointer;
+}
+
 /*
  * Override normalize.css's opinionated styles, `line-height` is set to 'normal'
  * as that's what most user-agents use. See:
@@ -45,8 +53,8 @@ button:disabled {
 }
 
 /*
- * 1. Remove top inner shadow that iOS applies to all textual inputs. ✌︎ Credit
- *    https://davidwalsh.name/input-shadows-ipad
+ * 1. Remove top inner shadow that iOS applies to all textual inputs.
+ *    ✌︎ Credit https://davidwalsh.name/input-shadows-ipad
  * 2. Remove padding (mostly 1px) that most user-agents apply to all textual
  *    inputs.
  */
@@ -67,6 +75,27 @@ button:disabled {
   padding: 0; /* 2 */
 }
 
+/**
+ * Set OpenType features for specific input types, mostly numeric. Remove
+ * kerning and proportional, oldstyle numerals. Enable lining numerals.
+ *
+ * NOTE: See the "OpenType features" section in the README.md.
+ */
+
+[type='color'],
+[type='date'],
+[type='datetime-local'],
+[type='month'],
+[type='number'],
+[type='range'],
+[type='tel'],
+[type='time'],
+[type='week'] {
+  font-feature-settings: 'kern' 0, 'onum' 0, 'lnum';
+  font-kerning: none;
+  font-variant-numeric: lining-nums;
+}
+
 /*
  * Disable horizontal resizing.
  */

src/interactive.css renamed to src/global.css

@@ -1,9 +1,26 @@
-/**
- * Indicates that a label will shift focus to its associated control.
+/*
+ * Remove margins, paddings, and borders from all elements except `<input>` so
+ * that everything is on an even playing field.
+ */
+
+*:not(input) {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+ * Apply the nicer `border-box` value to make life easier when sizing elements.
  */
 
-label[for] {
-  cursor: pointer;
+html {
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
 }
 
 /**
@@ -18,36 +35,13 @@ label[for] {
   outline: none !important;
 }
 
-/**
- * Avoid 300ms click delay on touch devices that support the `touch-action` CSS
- * property.
- *
- * ✌︎ Resources and credit
- * http://caniuse.com/#feat=css-touch-action
- * http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
- * https://adactio.com/journal/10019
- * https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away
- */
-
-a,
-area,
-button,
-input,
-label,
-select,
-summary,
-textarea,
-[tabindex]:not([tabindex='-1']) {
-  touch-action: manipulation;
-}
-
 /**
  * Removes the outline in cases where the UA determines via heuristics that the
  * focus should not be visible. This is mainly for ensuring that a focus
  * indicator (a "focus ring") does not render for mouse users.
  */
 
-:focus:not(:focus-visible) {
+*:focus:not(:focus-visible) {
   outline: none;
 }
 
@@ -67,3 +61,26 @@ textarea,
     transition: none !important;
   }
 }
+
+/**
+ * Print styles.
+ */
+
+@media print {
+  /**
+   * 1. Remove styles that are poor for printing.
+   * 2. Black prints faster.
+   *
+   * NOTE: it's okay to use `!important` here as we're doing it pre-emptively,
+   * i.e., we always want these rules to take precedence.
+   */
+
+  *,
+  *::after,
+  *::before {
+    background: transparent !important; /* 1 */
+    box-shadow: none !important; /* 1 */
+    color: black !important; /* 2 */
+    text-shadow: none !important; /* 1 */
+  }
+}

src/grouped.css

@@ -0,0 +1,78 @@
+/**
+ * 1. Set the font family to use a monospace system font.
+ *    ✌︎ Credit https://github.com/sindresorhus/modern-normalize
+ * 2. Set OpenType features. Remove kerning and common/standard ligatures.
+ *    Enable lining numerals, tabular numerals, and slashed zero.
+ *    NOTE: See the "OpenType features" section in the README.md.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace; /* 1 */
+  font-feature-settings: 'kern' 0, 'liga' 0, 'clig' 0, 'onum' 0, 'pnum' 0,
+    'tnum', 'lnum', 'zero'; /* 2 */
+  font-kerning: none; /* 2 */
+  font-variant-ligatures: contextual; /* 2 */
+  font-variant-numeric: lining-nums tabular-nums slashed-zero; /* 2 */
+}
+
+/*
+ * Remove the gap between the following elements and the bottom of their
+ * containers.
+ *
+ * ✌︎ Resources and credit
+ * https://github.com/h5bp/html5-boilerplate/issues/440
+ * https://github.com/h5bp/html5-boilerplate
+ */
+
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+  vertical-align: middle;
+}
+
+/**
+ * Avoid 300ms click delay on touch devices that support the `touch-action` CSS
+ * property.
+ *
+ * ✌︎ Resources and credit
+ * http://caniuse.com/#feat=css-touch-action
+ * http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
+ * https://adactio.com/journal/10019
+ * https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away
+ */
+
+a,
+area,
+button,
+input,
+label,
+select,
+summary,
+textarea,
+[tabindex]:not([tabindex='-1']) {
+  touch-action: manipulation;
+}
+
+/**
+ * Print styles.
+ */
+
+@media print {
+  tr,
+  img {
+    page-break-inside: avoid;
+  }
+
+  p,
+  h2,
+  h3 {
+    orphans: 3;
+    widows: 3;
+  }
+}

src/index.css

@@ -4,36 +4,13 @@
  * https://github.com/chris-pearce/backpack.css
  */
 
-/**
- * Contents
- *
- * 1.  normalize.css ‡
- * 2.  Resets
- * 3.  Main root †
- * 4.  Forms †
- * 5.  Content sectioning †
- * 6.  Inline text semantics †
- * 7.  Text content †
- * 8.  Image and multimedia †
- * 9.  Table content †
- * 10. Typography
- * 11. Interactive
- * 12. Print
- *
- * ‡ Comes from 'node_modules'.
- * † Section names come from MDN's HTML elements reference document. See:
- * https://developer.mozilla.org/en-US/docs/Web/HTML/Element.
- */
-
 @import 'normalize.css';
-@import 'resets.css';
+@import 'global.css';
 @import 'main-root.css';
 @import 'forms.css';
 @import 'content-sectioning.css';
 @import 'inline-text-semantics.css';
 @import 'text-content.css';
 @import 'image-and-multimedia.css';
 @import 'table-content.css';
-@import 'typography.css';
-@import 'interactive.css';
-@import 'print.css';
+@import 'grouped.css';

src/inline-text-semantics.css

@@ -14,3 +14,64 @@ em {
 small {
   font-size: 100%;
 }
+
+/**
+ * normalize.css normalizes the `<sub>` and `<sup>` elements, however, if
+ * user-agents support the `font-variant-position` property then we use that
+ * instead and remove the relevant normalize.css styles.
+ */
+
+@supports (font-variant-position: sub) and (font-variant-position: super) {
+  sub,
+  sup {
+    font-size: 100%;
+    line-height: inherit;
+    position: static;
+  }
+
+  sub {
+    font-variant-position: sub;
+  }
+
+  sup {
+    font-variant-position: super;
+  }
+}
+
+/**
+ * Print styles.
+ */
+
+@media print {
+  /**
+   * Make links always stand out.
+   */
+
+  a,
+  a:visited {
+    text-decoration: underline;
+  }
+
+  /**
+   * Show the `[href]` and `[title]` attribute values of links and abbreviations
+   * via their `::after` pseudo element.
+   */
+
+  a[href]::after {
+    content: ' (' attr(href) ')';
+  }
+
+  abbr[title]::after {
+    content: ' (' attr(title) ')';
+  }
+
+  /**
+   * Don't show links that are fragment identifiers or use the `javascript:`
+   * pseudo protocol.
+   */
+
+  a[href^='javascript:']::after,
+  a[href^='#']::after {
+    content: '';
+  }
+}

src/main-root.css

@@ -1,7 +1,7 @@
 /**
  * Set a more readable tab size.
  *
- * ✌︎ Credit https://github.com/sindresorhus/modern-normalize/issues/17.
+ * ✌︎ Credit https://github.com/sindresorhus/modern-normalize/issues/17
  */
 
 :root {
@@ -15,14 +15,24 @@
  *    https://github.com/primer/primer/pull/408
  *    https://infinnie.github.io/blog/2017/systemui.html
  *    http://markdotto.com/2018/02/07/github-system-fonts/
- * 2. Set the font size of the entire document using the default user-agent size
+ * 2. Set OpenType features for the entire document. Enable kerning,
+ *    common/standard ligatures, contextual ligatures, and proportional,
+ *    oldstyle numerals.
+ *    NOTE: if any of the `font-feature-settings` values aren't needed on child
+ *    elements, e.g.: `<td>`, then you have to explicitly turn them off. Also,
+ *    see the "OpenType features" section in the README.md.
+ * 3. Set the font size of the entire document using the default user-agent size
  *    which is typically 16px.
- * 3. Increase the line height from normalize.css's small '1.15' value. The
+ * 4. Increase the line height from normalize.css's small '1.15' value. The
  *    larger '1.5' value is recommended by the W3C Web Accessibility Initiative.
  */
 
 html {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; /* 1 */
-  font-size: 1rem; /* 2 */
-  line-height: 1.5; /* 3 */
+  font-feature-settings: 'kern', 'liga', 'clig', 'calt', 'onum', 'pnum'; /* 2 */
+  font-kerning: normal; /* 2 */
+  font-size: 1rem; /* 3 */
+  font-variant-ligatures: common-ligatures contextual; /* 2 */
+  font-variant-numeric: oldstyle-nums proportional-nums; /* 2 */
+  line-height: 1.5; /* 4 */
 }