mixant de font-size responsive

changelog.md

@@ -1,4 +1,4 @@
-# changelog v7.0.0beta (août - ? 2017)
+# changelog v7.0.0beta (août - novembre 2017)
 - modifications, mises à jour :
   - architecture globale revisitée (vendor, config, library, components)
   - remplacement de normalize.css par Bootstrap reboot.css
@@ -23,6 +23,7 @@
   - des onglets (tabs)
   - des flèches courantes (haut, droit, bas, gauche) en SVG data-URI
   - création d'un mixin de grille
+  - création d'un mixin de tailles de polices (responsive)
   - `* {min-width: 0}` pour éviter la valeur `auto` sur les flex-items et grid-items
 
 # changelog v6.1.2 (21 juin 2017)

css/knacss-unminified.css

@@ -392,13 +392,19 @@ html {
 
 body {
   margin: 0;
-  font-size: 1.6rem;
+  font-size: 1.4rem;
   background-color: #fff;
   color: #212529;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   line-height: 1.5;
 }
 
+@media (min-width: 576px) {
+  body {
+    font-size: 1.6rem;
+  }
+}
+
 /* Links */
 a {
   color: #333;
@@ -412,37 +418,73 @@ a:focus, a:hover, a:active {
 
 /* Headings */
 h1, .h1-like {
-  font-size: 3.2rem;
-  font-family: sans-serif;
-  font-weight: 500;
-}
-
-h2, .h2-like {
   font-size: 2.8rem;
   font-family: sans-serif;
   font-weight: 500;
 }
 
-h3, .h3-like {
+@media (min-width: 576px) {
+  h1, .h1-like {
+    font-size: 3.2rem;
+  }
+}
+
+h2, .h2-like {
   font-size: 2.4rem;
+  font-family: sans-serif;
   font-weight: 500;
 }
 
-h4, .h4-like {
+@media (min-width: 576px) {
+  h2, .h2-like {
+    font-size: 2.8rem;
+  }
+}
+
+h3, .h3-like {
   font-size: 2rem;
   font-weight: 500;
 }
 
-h5, .h5-like {
+@media (min-width: 576px) {
+  h3, .h3-like {
+    font-size: 2.4rem;
+  }
+}
+
+h4, .h4-like {
   font-size: 1.8rem;
   font-weight: 500;
 }
 
-h6, .h6-like {
+@media (min-width: 576px) {
+  h4, .h4-like {
+    font-size: 2rem;
+  }
+}
+
+h5, .h5-like {
   font-size: 1.6rem;
   font-weight: 500;
 }
 
+@media (min-width: 576px) {
+  h5, .h5-like {
+    font-size: 1.8rem;
+  }
+}
+
+h6, .h6-like {
+  font-size: 1.4rem;
+  font-weight: 500;
+}
+
+@media (min-width: 576px) {
+  h6, .h6-like {
+    font-size: 1.6rem;
+  }
+}
+
 /* Vertical rythm */
 h1,
 h2,

sass/_config/_mixins.scss

@@ -1,3 +1,32 @@
+// font-size Mixin
+// compiles to font-size-s + font-size-base on small-plus devices
+// ex. h2 { @include font-size(h2);}
+$font-sizes: (
+  base-size  : $font-size-base,
+  base-size-s: $font-size-s,
+  h1-size    : $h1-size,
+  h1-size-s  : $h1-size-s,
+  h2-size    : $h2-size,
+  h2-size-s  : $h2-size-s,
+  h3-size    : $h3-size,
+  h3-size-s  : $h3-size-s,
+  h4-size    : $h4-size,
+  h4-size-s  : $h4-size-s,
+  h5-size    : $h5-size,
+  h5-size-s  : $h5-size-s,
+  h6-size    : $h6-size,
+  h6-size-s  : $h6-size-s
+) !default;
+
+@mixin font-size($elem) {
+  $base-size: #{$elem}-size;
+  $small-size: #{$elem}-size-s;
+  font-size: map-get($font-sizes, $small-size);
+  @include respond-to("small-up") {
+    font-size: map-get($font-sizes, $base-size);
+  }
+}
+
 // Grid Mixin
 // arguments are : columns number, gutter, min-breakpoint
 // ex. .ingrid { @include grid(4, 1rem, 640px); }

sass/_config/_variables.scss

@@ -14,8 +14,8 @@ $font-family-base     : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, O
 $font-family-headings  : sans-serif; // font for h1, h2.. h6
 $font-family-monospace : consolas, courier, monospace; // font for code and samples
 
-// font sizes
-$font-size-base      : 1.6rem !default; // 1.6rem value is "16px" equivalent
+// font sizes (1.6rem value is "16px" equivalent)
+$font-size-base      : 1.6rem !default;
 $h1-size             : 3.2rem !default;
 $h2-size             : 2.8rem !default;
 $h3-size             : 2.4rem !default;
@@ -50,7 +50,11 @@ $weight-medium  : 500 !default;
 $weight-bold    : 700 !default;
 
 // grid gutters (for .has-gutter-* classes)
-$grid-gutters: ( '': 1rem, '-l': 2rem, '-xl': 4rem ) !default;
+$grid-gutters: (
+  '': 1rem,
+  '-l': 2rem,
+  '-xl': 4rem )
+!default;
 
 // global border-radius
 $border-radius: 0 !default;

sass/_library/_base.scss

@@ -23,7 +23,7 @@ html {
 
 body {
   margin: 0;
-  font-size: $font-size-base;
+  @include font-size(base);
   background-color: $background-base;
   color: $color-base;
   font-family: $font-family-base;
@@ -45,7 +45,7 @@ a {
 
 /* Headings */
 h1, .h1-like {
-  font-size: $h1-size;
+  @include font-size(h1);
   @if variable_exists(font-family-headings) and $font-family-headings != $font-family-base{
     font-family: $font-family-headings;
   }
@@ -53,7 +53,7 @@ h1, .h1-like {
 }
 
 h2, .h2-like {
-  font-size: $h2-size;
+  @include font-size(h2);
   @if variable_exists(font-family-headings) and $font-family-headings != $font-family-base{
     font-family: $font-family-headings;
   }
@@ -61,22 +61,22 @@ h2, .h2-like {
 }
 
 h3, .h3-like {
-  font-size: $h3-size;
+  @include font-size(h3);
   font-weight: $weight-medium;
 }
 
 h4, .h4-like {
-  font-size: $h4-size;
+  @include font-size(h4);
   font-weight: $weight-medium;
 }
 
 h5, .h5-like {
-  font-size: $h5-size;
+  @include font-size(h5);
   font-weight: $weight-medium;
 }
 
 h6, .h6-like {
-  font-size: $h6-size;
+  @include font-size(h6);
   font-weight: $weight-medium;
 }