version 6.1.0

see changelog

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "KNACSS",
-  "version": "6.0.8",
+  "version": "6.1.0",
   "homepage": "http://www.knacss.com/",
   "authors": [
     "Raphaël GOETTER, Alsacreations"

changelog.md

@@ -1,5 +1,11 @@
+# changelog v6.1.0 (3 mars 2017)
+- passage à [Normalize 5.0.0](https://github.com/necolas/normalize.css/blob/5.0.0/CHANGELOG.md)
+- ajout de variables pour tailles de polices différentes sur petits et sur grands écrans (`$h1-size` et `$h1-size-l` par exemple). Par défaut, les tailles "mobile" sont appliquées, et les tailles "desktop" s'appliquent en min-width `$tiny +1`
+- convention de nommage des variables pour faciliter les recherches : `$base-color` devient `$color-base`, `$link-color` devient `$color-link`, etc.
+- typo fix
+
 # changelog v6.0.8 (10 janvier 2017)
-- application de `$link-hover-color` uniquement si différent de `$link-color`
+- application de `$color-link-hover` uniquement si différent de `$color-link`
 
 # changelog v6.0.7 (7 décembre 2016)
 - application de `$font-stack-headings` uniquement si différent de `$font-stack-common`

css/grillade.scss

@@ -117,7 +117,7 @@ $iefix: 0.01px;
       width: calc(100% / #{$divider} - #{$iefix});
     }
     @each $affix, $size in $grid-gutters {
-      .has-gutter#{$affix} .#{$flow} {
+      .has-gutter#{$affix} > .#{$flow} {
         width: calc(100% / #{$divider} - #{$size} - #{$iefix});
       }
     }

css/knacss-unminified.css

@@ -23,20 +23,28 @@
 /* ---------------------------------- */
 /* ==Normalize (basic reset)          */
 /* ---------------------------------- */
-/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
+/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
 /**
  * 1. Change the default font family in all browsers (opinionated).
- * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
+ * 2. Correct the line height in all browsers.
+ * 3. Prevent adjustments of font size after orientation changes in
+ *    IE on Windows Phone and in iOS.
  */
+/* Document
+   ========================================================================== */
 html {
   font-family: sans-serif;
   /* 1 */
+  line-height: 1.15;
+  /* 2 */
   -ms-text-size-adjust: 100%;
-  /* 2 */
+  /* 3 */
   -webkit-text-size-adjust: 100%;
-  /* 2 */
+  /* 3 */
 }
 
+/* Sections
+   ========================================================================== */
 /**
  * Remove the margin in all browsers (opinionated).
  */
@@ -44,64 +52,72 @@ body {
   margin: 0;
 }
 
-/* HTML5 display definitions
-   ========================================================================== */
 /**
  * Add the correct display in IE 9-.
- * 1. Add the correct display in Edge, IE, and Firefox.
- * 2. Add the correct display in IE.
  */
 article,
 aside,
-details,
-figcaption,
-figure,
 footer,
 header,
-main,
-menu,
 nav,
-section,
+section {
-summary {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in IE.
+ */
+figcaption,
+figure,
+main {
   /* 1 */
   display: block;
 }
 
 /**
- * Add the correct display in IE 9-.
+ * Add the correct margin in IE 8.
  */
-audio,
+figure {
-canvas,
+  margin: 1em 40px;
-progress,
-video {
-  display: inline-block;
 }
 
 /**
- * Add the correct display in iOS 4-7.
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
  */
-audio:not([controls]) {
+hr {
-  display: none;
+  box-sizing: content-box;
+  /* 1 */
   height: 0;
+  /* 1 */
+  overflow: visible;
+  /* 2 */
 }
 
 /**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
  */
-progress {
+pre {
-  vertical-align: baseline;
+  font-family: monospace, monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
 }
 
-/**
+/* Text-level semantics
- * Add the correct display in IE 10-.
- * 1. Add the correct display in IE.
- */
-template,
-[hidden] {
-  display: none;
-}
-
-/* Links
    ========================================================================== */
 /**
  * 1. Remove the gray background on active links in IE 10.
@@ -123,8 +139,6 @@ a:hover {
   outline-width: 0;
 }
 
-/* Text-level semantics
-   ========================================================================== */
 /**
  * 1. Remove the bottom border in Firefox 39-.
  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
@@ -154,6 +168,19 @@ strong {
   font-weight: bolder;
 }
 
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+code,
+kbd,
+samp {
+  font-family: monospace, monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
+
 /**
  * Add the correct font style in Android 4.3-.
  */
@@ -161,15 +188,6 @@ dfn {
   font-style: italic;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 /**
  * Add the correct background and color in IE 9-.
  */
@@ -207,6 +225,22 @@ sup {
 
 /* Embedded content
    ========================================================================== */
+/**
+ * Add the correct display in IE 9-.
+ */
+audio,
+video {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
 /**
  * Remove the border on images inside links in IE 10-.
  */
@@ -221,65 +255,27 @@ svg:not(:root) {
   overflow: hidden;
 }
 
-/* Grouping content
-   ========================================================================== */
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  /* 1 */
-  font-size: 1em;
-  /* 2 */
-}
-
-/**
- * Add the correct margin in IE 8.
- */
-figure {
-  margin: 1em 40px;
-}
-
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
-hr {
-  box-sizing: content-box;
-  /* 1 */
-  height: 0;
-  /* 1 */
-  overflow: visible;
-  /* 2 */
-}
-
 /* Forms
    ========================================================================== */
 /**
- * 1. Change font properties to `inherit` in all browsers (opinionated).
+ * 1. Change the font styles in all browsers (opinionated).
  * 2. Remove the margin in Firefox and Safari.
  */
 button,
 input,
+optgroup,
 select,
 textarea {
-  font: inherit;
+  font-family: sans-serif;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  line-height: 1.15;
   /* 1 */
   margin: 0;
   /* 2 */
 }
 
-/**
- * Restore the font weight unset by the previous rule.
- */
-optgroup {
-  font-weight: bold;
-}
-
 /**
  * Show the overflow in IE.
  * 1. Show the overflow in Edge.
@@ -364,6 +360,17 @@ legend {
   /* 1 */
 }
 
+/**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+progress {
+  display: inline-block;
+  /* 1 */
+  vertical-align: baseline;
+  /* 2 */
+}
+
 /**
  * Remove the default vertical scrollbar in IE.
  */
@@ -403,21 +410,13 @@ textarea {
 }
 
 /**
- * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
+ * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
  */
 [type="search"]::-webkit-search-cancel-button,
 [type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-/**
- * Correct the text style of placeholders in Chrome, Edge, and Safari.
- */
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: 0.54;
-}
-
 /**
  * 1. Correct the inability to style clickable types in iOS and Safari.
  * 2. Change font properties to `inherit` in Safari.
@@ -429,6 +428,49 @@ textarea {
   /* 2 */
 }
 
+/* Interactive
+   ========================================================================== */
+/*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ */
+details,
+menu {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+summary {
+  display: list-item;
+}
+
+/* Scripting
+   ========================================================================== */
+/**
+ * Add the correct display in IE 9-.
+ */
+canvas {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in IE.
+ */
+template {
+  display: none;
+}
+
+/* Hidden
+   ========================================================================== */
+/**
+ * Add the correct display in IE 10-.
+ */
+[hidden] {
+  display: none;
+}
+
 /* ----------------------------- */
 /* ==Base (basic styles)         */
 /* ----------------------------- */
@@ -450,11 +492,23 @@ html {
 }
 
 body {
-  font-size: 1.6rem;
+  font-size: 1.4rem;
   background-color: #fff;
   color: #000;
   font-family: sans-serif;
-  line-height: 1.5;
+  line-height: 1.4;
+}
+
+@media screen and (min-width: 544px) {
+  body {
+    font-size: 1.6rem;
+  }
+}
+
+@media screen and (min-width: 544px) {
+  body {
+    line-height: 1.5;
+  }
 }
 
 a {
@@ -497,33 +551,69 @@ details,
 figure {
   margin-top: 0.75em;
   margin-bottom: 0;
-  line-height: 1.5;
+  line-height: 1.4;
 }
 
 h1, .h1-like {
-  font-size: 3.2rem;
-}
-
-h2, .h2-like {
   font-size: 2.8rem;
 }
 
-h3, .h3-like {
+@media screen and (min-width: 544px) {
+  h1, .h1-like {
+    font-size: 3.2rem;
+  }
+}
+
+h2, .h2-like {
   font-size: 2.4rem;
 }
 
-h4, .h4-like {
+@media screen and (min-width: 544px) {
+  h2, .h2-like {
+    font-size: 2.8rem;
+  }
+}
+
+h3, .h3-like {
   font-size: 2rem;
 }
 
-h5, .h5-like {
+@media screen and (min-width: 544px) {
+  h3, .h3-like {
+    font-size: 2.4rem;
+  }
+}
+
+h4, .h4-like {
   font-size: 1.8rem;
 }
 
-h6, .h6-like {
+@media screen and (min-width: 544px) {
+  h4, .h4-like {
+    font-size: 2rem;
+  }
+}
+
+h5, .h5-like {
   font-size: 1.6rem;
 }
 
+@media screen and (min-width: 544px) {
+  h5, .h5-like {
+    font-size: 1.8rem;
+  }
+}
+
+h6, .h6-like {
+  font-size: 1.4rem;
+}
+
+@media screen and (min-width: 544px) {
+  h6, .h6-like {
+    font-size: 3.2rem;
+  }
+}
+
 /* alternate font-sizing */
 .smaller {
   font-size: 0.6em;
@@ -1038,7 +1128,6 @@ input[type="reset"].unstyled:focus {
   }
   .o-media-figure--center {
     -ms-flex-item-align: center;
-        -ms-grid-row-align: center;
         align-self: center;
   }
 }
@@ -2213,13 +2302,13 @@ ul.is-unstyled, ul.unstyled {
             flex: 0 0 auto;
     width: calc(100% / 1 - 0.01px);
   }
-  .has-gutter .full {
+  .has-gutter > .full {
     width: calc(100% / 1 - 1rem - 0.01px);
   }
-  .has-gutter-l .full {
+  .has-gutter-l > .full {
     width: calc(100% / 1 - 2rem - 0.01px);
   }
-  .has-gutter-xl .full {
+  .has-gutter-xl > .full {
     width: calc(100% / 1 - 4rem - 0.01px);
   }
   .one-half {
@@ -2228,13 +2317,13 @@ ul.is-unstyled, ul.unstyled {
             flex: 0 0 auto;
     width: calc(100% / 2 - 0.01px);
   }
-  .has-gutter .one-half {
+  .has-gutter > .one-half {
     width: calc(100% / 2 - 1rem - 0.01px);
   }
-  .has-gutter-l .one-half {
+  .has-gutter-l > .one-half {
     width: calc(100% / 2 - 2rem - 0.01px);
   }
-  .has-gutter-xl .one-half {
+  .has-gutter-xl > .one-half {
     width: calc(100% / 2 - 4rem - 0.01px);
   }
   .one-third {
@@ -2243,13 +2332,13 @@ ul.is-unstyled, ul.unstyled {
             flex: 0 0 auto;
     width: calc(100% / 3 - 0.01px);
   }
-  .has-gutter .one-third {
+  .has-gutter > .one-third {
     width: calc(100% / 3 - 1rem - 0.01px);
   }
-  .has-gutter-l .one-third {
+  .has-gutter-l > .one-third {
     width: calc(100% / 3 - 2rem - 0.01px);
   }
-  .has-gutter-xl .one-third {
+  .has-gutter-xl > .one-third {
     width: calc(100% / 3 - 4rem - 0.01px);
   }
   .one-quarter {
@@ -2258,13 +2347,13 @@ ul.is-unstyled, ul.unstyled {
             flex: 0 0 auto;
     width: calc(100% / 4 - 0.01px);
   }
-  .has-gutter .one-quarter {
+  .has-gutter > .one-quarter {
     width: calc(100% / 4 - 1rem - 0.01px);
   }
-  .has-gutter-l .one-quarter {
+  .has-gutter-l > .one-quarter {
     width: calc(100% / 4 - 2rem - 0.01px);
   }
-  .has-gutter-xl .one-quarter {
+  .has-gutter-xl > .one-quarter {
     width: calc(100% / 4 - 4rem - 0.01px);
   }
   .one-fifth {
@@ -2273,13 +2362,13 @@ ul.is-unstyled, ul.unstyled {
             flex: 0 0 auto;
     width: calc(100% / 5 - 0.01px);
   }
-  .has-gutter .one-fifth {
+  .has-gutter > .one-fifth {
     width: calc(100% / 5 - 1rem - 0.01px);
   }
-  .has-gutter-l .one-fifth {
+  .has-gutter-l > .one-fifth {
     width: calc(100% / 5 - 2rem - 0.01px);
   }
-  .has-gutter-xl .one-fifth {
+  .has-gutter-xl > .one-fifth {
     width: calc(100% / 5 - 4rem - 0.01px);
   }
   .one-sixth {
@@ -2288,13 +2377,13 @@ ul.is-unstyled, ul.unstyled {
             flex: 0 0 auto;
     width: calc(100% / 6 - 0.01px);
   }
-  .has-gutter .one-sixth {
+  .has-gutter > .one-sixth {
     width: calc(100% / 6 - 1rem - 0.01px);
   }
-  .has-gutter-l .one-sixth {
+  .has-gutter-l > .one-sixth {
     width: calc(100% / 6 - 2rem - 0.01px);
   }
-  .has-gutter-xl .one-sixth {
+  .has-gutter-xl > .one-sixth {
     width: calc(100% / 6 - 4rem - 0.01px);
   }
   .two-thirds {
@@ -2303,13 +2392,13 @@ ul.is-unstyled, ul.unstyled {
             flex: 0 0 auto;
     width: calc(100% / 3 * 2 - 0.01px);
   }
-  .has-gutter .two-thirds {
+  .has-gutter > .two-thirds {
     width: calc(100% / 3 * 2 - 1rem - 0.01px);
   }
-  .has-gutter-l .two-thirds {
+  .has-gutter-l > .two-thirds {
     width: calc(100% / 3 * 2 - 2rem - 0.01px);
   }
-  .has-gutter-xl .two-thirds {
+  .has-gutter-xl > .two-thirds {
     width: calc(100% / 3 * 2 - 4rem - 0.01px);
   }
   .three-quarters {
@@ -2318,13 +2407,13 @@ ul.is-unstyled, ul.unstyled {
             flex: 0 0 auto;
     width: calc(100% / 4 * 3 - 0.01px);
   }
-  .has-gutter .three-quarters {
+  .has-gutter > .three-quarters {
     width: calc(100% / 4 * 3 - 1rem - 0.01px);
   }
-  .has-gutter-l .three-quarters {
+  .has-gutter-l > .three-quarters {
     width: calc(100% / 4 * 3 - 2rem - 0.01px);
   }
-  .has-gutter-xl .three-quarters {
+  .has-gutter-xl > .three-quarters {
     width: calc(100% / 4 * 3 - 4rem - 0.01px);
   }
   .five-sixths {
@@ -2333,13 +2422,13 @@ ul.is-unstyled, ul.unstyled {
             flex: 0 0 auto;
     width: calc(100% / 6 * 5 - 0.01px);
   }
-  .has-gutter .five-sixths {
+  .has-gutter > .five-sixths {
     width: calc(100% / 6 * 5 - 1rem - 0.01px);
   }
-  .has-gutter-l .five-sixths {
+  .has-gutter-l > .five-sixths {
     width: calc(100% / 6 * 5 - 2rem - 0.01px);
   }
-  .has-gutter-xl .five-sixths {
+  .has-gutter-xl > .five-sixths {
     width: calc(100% / 6 * 5 - 4rem - 0.01px);
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "knacss",
-  "version": "6.0.8",
+  "version": "6.1.0",
   "homepage": "http://www.knacss.com/",
   "bugs": "https://github.com/alsacreations/KNACSS/issues",
   "author": [

sass/_config/_variables.scss

@@ -1,14 +1,24 @@
 // Config file and project variables
 
-// font sizes
+// tiny font sizes (mobile first)
-$base-font-size : 1.6rem !default; // ex. 1.6rem would be "16px" equivalent
+$base-font-size : 1.4rem !default; // ex. 1.4rem would be "14px" equivalent
-$line-height    : 1.5 !default; // equiv line-height 1.5
+$line-height    : 1.4 !default;
-$h1-size        : 3.2rem !default; // equiv "32px"
+$h1-size        : 2.8rem !default; // equiv "28px"
-$h2-size        : 2.8rem !default; // equiv "28px"
+$h2-size        : 2.4rem !default; // equiv "24px"
-$h3-size        : 2.4rem !default; // equiv "24px"
+$h3-size        : 2.0rem !default; // equiv "20px"
-$h4-size        : 2.0rem !default; // equiv "20px"
+$h4-size        : 1.8rem !default; // equiv "18px"
-$h5-size        : 1.8rem !default; // equiv "18px"
+$h5-size        : 1.6rem !default; // equiv "18px"
-$h6-size        : 1.6rem !default; // equiv "16px"
+$h6-size        : 1.4rem !default; // equiv "14px"
+
+// large font sizes
+$base-font-size-l : 1.6rem !default; // ex. 1.6rem would be "16px" equivalent
+$line-height-l    : 1.5 !default;
+$h1-size-l        : 3.2rem !default; // equiv "32px"
+$h2-size-l        : 2.8rem !default; // equiv "28px"
+$h3-size-l        : 2.4rem !default; // equiv "24px"
+$h4-size-l        : 2.0rem !default; // equiv "20px"
+$h5-size-l        : 1.8rem !default; // equiv "18px"
+$h6-size-l        : 1.6rem !default; // equiv "16px"
 
 // font stacks
 $font-stack-common    : sans-serif !default; // common font
@@ -23,12 +33,13 @@ $color4    : #000 !default;
 $color5    : #6FA939 !default;
 
 // colors used in project
-$base-color: $color1;
+$color-base      : $color1;
-$link-color: $color3;
+$color-link      : $color3;
-$base-background : $color2;
+$background-base : $color2;
+
 // If you don't want any effect on focused/hovered links,
-// comment variable below or make it equal to either $link-color or false or null
+// comment variable below or make it equal to either $color-link or false or null
-$link-hover-color: $color4;
+$color-link-hover: $color4;
 $brand-primary: $color5;
 
 

sass/_vendor/_normalize.scss

@@ -1,16 +1,25 @@
-/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
+/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
 
 /**
  * 1. Change the default font family in all browsers (opinionated).
- * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
+ * 2. Correct the line height in all browsers.
+ * 3. Prevent adjustments of font size after orientation changes in
+ *    IE on Windows Phone and in iOS.
  */
 
+/* Document
+   ========================================================================== */
+
 html {
   font-family: sans-serif; /* 1 */
-  -ms-text-size-adjust: 100%; /* 2 */
+  line-height: 1.15; /* 2 */
-  -webkit-text-size-adjust: 100%; /* 2 */
+  -ms-text-size-adjust: 100%; /* 3 */
+  -webkit-text-size-adjust: 100%; /* 3 */
 }
 
+/* Sections
+   ========================================================================== */
+
 /**
  * Remove the margin in all browsers (opinionated).
  */
@@ -19,69 +28,73 @@ body {
   margin: 0;
 }
 
-/* HTML5 display definitions
-   ========================================================================== */
-
 /**
  * Add the correct display in IE 9-.
- * 1. Add the correct display in Edge, IE, and Firefox.
- * 2. Add the correct display in IE.
  */
 
 article,
 aside,
-details, /* 1 */
-figcaption,
-figure,
 footer,
 header,
-main, /* 2 */
-menu,
 nav,
-section,
+section {
-summary { /* 1 */
   display: block;
 }
 
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
 /**
  * Add the correct display in IE 9-.
- */
-
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-}
-
-/**
- * Add the correct display 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 10-.
  * 1. Add the correct display in IE.
  */
 
-template, /* 1 */
+figcaption,
-[hidden] {
+figure,
-  display: none;
+main { /* 1 */
+  display: block;
 }
 
-/* Links
+/**
+ * Add the correct margin in IE 8.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
    ========================================================================== */
 
 /**
@@ -104,9 +117,6 @@ a:hover {
   outline-width: 0;
 }
 
-/* Text-level semantics
-   ========================================================================== */
-
 /**
  * 1. Remove the bottom border in Firefox 39-.
  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
@@ -136,6 +146,18 @@ strong {
   font-weight: bolder;
 }
 
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
 /**
  * Add the correct font style in Android 4.3-.
  */
@@ -144,16 +166,6 @@ dfn {
   font-style: italic;
 }
 
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 /**
  * Add the correct background and color in IE 9-.
  */
@@ -195,6 +207,24 @@ sup {
 /* Embedded content
    ========================================================================== */
 
+/**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+video {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
 /**
  * Remove the border on images inside links in IE 10-.
  */
@@ -211,65 +241,25 @@ svg:not(:root) {
   overflow: hidden;
 }
 
-/* Grouping content
-   ========================================================================== */
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/**
- * Add the correct margin in IE 8.
- */
-
-figure {
-  margin: 1em 40px;
-}
-
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
-
-hr {
-  box-sizing: content-box; /* 1 */
-  height: 0; /* 1 */
-  overflow: visible; /* 2 */
-}
-
 /* Forms
    ========================================================================== */
 
 /**
- * 1. Change font properties to `inherit` in all browsers (opinionated).
+ * 1. Change the font styles in all browsers (opinionated).
  * 2. Remove the margin in Firefox and Safari.
  */
 
 button,
 input,
+optgroup,
 select,
 textarea {
-  font: inherit; /* 1 */
+  font-family: sans-serif; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
   margin: 0; /* 2 */
 }
 
-/**
- * Restore the font weight unset by the previous rule.
- */
-
-optgroup {
-  font-weight: bold;
-}
-
 /**
  * Show the overflow in IE.
  * 1. Show the overflow in Edge.
@@ -352,6 +342,16 @@ legend {
   white-space: normal; /* 1 */
 }
 
+/**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
 /**
  * Remove the default vertical scrollbar in IE.
  */
@@ -391,7 +391,7 @@ textarea {
 }
 
 /**
- * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
+ * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
  */
 
 [type="search"]::-webkit-search-cancel-button,
@@ -399,15 +399,6 @@ textarea {
   -webkit-appearance: none;
 }
 
-/**
- * Correct the text style of placeholders in Chrome, Edge, and Safari.
- */
-
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: 0.54;
-}
-
 /**
  * 1. Correct the inability to style clickable types in iOS and Safari.
  * 2. Change font properties to `inherit` in Safari.
@@ -417,3 +408,54 @@ textarea {
   -webkit-appearance: button; /* 1 */
   font: inherit; /* 2 */
 }
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ */
+
+details, /* 1 */
+menu {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Scripting
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+canvas {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in IE.
+ */
+
+template {
+  display: none;
+}
+
+/* Hidden
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10-.
+ */
+
+[hidden] {
+  display: none;
+}

sass/library/_base.scss

@@ -21,23 +21,33 @@ html {
 
 body {
   font-size: $base-font-size;
-  background-color: $base-background;
+  @if variable_exists(base-font-size-l) and $base-font-size-l != $base-font-size {
-  color: $base-color;
+    @include respond-to("tiny-up") {
+      font-size: $base-font-size-l;
+    }
+  }
+  background-color: $background-base;
+  color: $color-base;
   font-family: $font-stack-common;
   line-height: $line-height;
+  @if variable_exists(line-height-l) and $line-height-l != $line-height {
+    @include respond-to("tiny-up") {
+      line-height: $line-height-l;
+    }
+  }
 }
 
 a {
-  color: $link-color;
+  color: $color-link;
 
   // No styling on focus/hover if there's no effect. Avoids to then have to
   // override it countless times. See Issue #232
-  @if variable_exists(link-hover-color) and
+  @if variable_exists(color-link-hover) and
-      ( null == index( ($link-color, null, false), $link-hover-color) ) {
+      ( null == index( ($color-link, null, false), $color-link-hover) ) {
     &:focus,
     &:hover,
     &:active {
-      color: $link-hover-color;
+      color: $color-link-hover;
     }
   }
 }
@@ -79,6 +89,11 @@ figure {
 
 h1, .#{$kna-namespace}h1-like {
   font-size: $h1-size;
+  @if variable_exists(h1-size-l) and $h1-size-l != $h1-size {
+    @include respond-to("tiny-up") {
+      font-size: $h1-size-l;
+    }
+  }
   @if variable_exists(font-stack-headings) and $font-stack-headings != $font-stack-common {
     font-family: $font-stack-headings;
   }
@@ -86,6 +101,11 @@ h1, .#{$kna-namespace}h1-like {
 
 h2, .#{$kna-namespace}h2-like {
   font-size: $h2-size;
+  @if variable_exists(h2-size-l) and $h2-size-l != $h2-size {
+    @include respond-to("tiny-up") {
+      font-size: $h2-size-l;
+    }
+  }
   @if variable_exists(font-stack-headings) and $font-stack-headings != $font-stack-common {
     font-family: $font-stack-headings;
   }
@@ -93,18 +113,38 @@ h2, .#{$kna-namespace}h2-like {
 
 h3, .#{$kna-namespace}h3-like {
   font-size: $h3-size;
+  @if variable_exists(h3-size-l) and $h3-size-l != $h3-size {
+    @include respond-to("tiny-up") {
+      font-size: $h3-size-l;
+    }
+  }
 }
 
 h4, .#{$kna-namespace}h4-like {
   font-size: $h4-size;
+  @if variable_exists(h4-size-l) and $h4-size-l != $h4-size {
+    @include respond-to("tiny-up") {
+      font-size: $h4-size-l;
+    }
+  }
 }
 
 h5, .#{$kna-namespace}h5-like {
   font-size: $h5-size;
+  @if variable_exists(h5-size-l) and $h5-size-l != $h5-size {
+    @include respond-to("tiny-up") {
+      font-size: $h5-size-l;
+    }
+  }
 }
 
 h6, .#{$kna-namespace}h6-like {
   font-size: $h6-size;
+  @if variable_exists(h6-size-l) and $h6-size-l != $h6-size {
+    @include respond-to("tiny-up") {
+      font-size: $h1-size-l;
+    }
+  }
 }
 
 /* alternate font-sizing */

sass/library/_forms.scss

@@ -31,7 +31,7 @@ input,
 optgroup,
 select,
 textarea {
-  color: $base-color;
+  color: $color-base;
 }
 
 label {