automatisation des classes utilitaires via Sass

changelog.md

@@ -10,6 +10,7 @@
 - autogrid object en Grid Layout
 - regroupement des styles des tableaux
 - suppression du namespace "kna-", ne devrait pas être problématique dès lors que Grillade sera devenu inutile dans KNACSS
+- refonte des classes utilitaires (automatisation des classes via Sass)
 
 # changelog v6.1.2 (21 juin 2017)
 - alignement des helpers flexbox sur ceux de Bootstrap (`.d-flex`, `.flex-row`, `.flex-column`, `.mr-auto`)

sass/_config/_breakpoints.scss

@@ -1,7 +1,7 @@
 // Responsive breakpoints variables
 
 // Warning : you should use your own values, regardless of the devices
-// Best practise : (max-width: ($BP - 1)) and (min-width: $BP)
+// Best practise is Mobile First: (max-width: ($BP - 1)) and (min-width: $BP)
 
 $tiny: 480px !default; // or 'em' if you prefer, of course
 $small: 576px !default;

sass/_library/_layout.scss

@@ -1,5 +1,5 @@
 /* ----------------------------- */
-/* ==Global Layout               */
+/* ==Global Micro Layout         */
 /* ----------------------------- */
 
 /* module, gains superpower "BFC" Block Formating Context */

sass/_library/_print.scss

@@ -31,6 +31,7 @@
   h6,
   .h6-like,
   blockquote,
+  label,
   ul,
   ol {
     color: #000;

sass/_library/_utilities.scss

@@ -43,129 +43,50 @@ ul {
 /* ------------- */
 
 /* blocks widths (percentage and pixels) */
-.w10 {
-  width: 10%;
-}
+$i: 100;
 
-.w20 {
-  width: 20%;
+@while $i > 0 {
+    .w#{$i} {
+      width: $i * 1%;
+    }
+    $i: $i - 5;
 }
-
-.w25 {
-  width: 25%;
-}
-
-.w30 {
-  width: 30%;
-}
-
-.w33 {
-  width: 33.3333%;
-}
-
-.w40 {
-  width: 40%;
-}
-
-.w50 {
-  width: 50%;
-}
-
-.w60 {
-  width: 60%;
-}
-
 .w66 {
-  width: 66.6666%;
+  width: calc(100% / 3 * 2);
+}
+.w33 {
+  width: calc(100% / 3);
 }
 
-.w70 {
-  width: 70%;
-}
-
-.w75 {
-  width: 75%;
-}
-
-.w80 {
-  width: 80%;
-}
-
-.w90 {
-  width: 90%;
-}
-
-.w100 {
-  width: 100%;
-}
-
-.w50p {
-  width: 50px;
-}
-
-.w100p {
-  width: 100px;
-}
-
-.w150p {
-  width: 150px;
-}
-
-.w200p {
-  width: 200px;
-}
-
-.w300p {
-  width: 300px;
-}
-
-@media (min-width: 401px) {
-  .w400p {
-    width: 400px;
-  }
-
-  .w500p {
-    width: 500px;
-  }
-
-  .w600p {
-    width: 600px;
-  }
-}
-
-@media (min-width: 701px) {
-
-  .w700p {
-    width: 700px;
-  }
-
-  .w800p {
-    width: 800px;
-  }
-}
-
-@media (min-width: 961px) {
-  .w960p {
-    width: 960px;
-  }
-
-  .mw960p {
-    max-width: 960px;
-  }
-
-  .w1140p {
-    width: 1140px;
-  }
-
-  .mw1140p {
-    max-width: 1140px;
-  }
-}
+$i: 1000;
 
 .wauto {
   width: auto;
 }
 
+.w960p {
+  width: 960px;
+}
+
+.mw960p {
+  max-width: 960px;
+}
+
+.w1140p {
+  width: 1140px;
+}
+
+.mw1140p {
+  max-width: 1140px;
+}
+
+@while $i > 0 {
+    .w#{$i}p {
+      width: $i * 1px;
+    }
+    $i: $i - 50;
+}
+
 /* Spacing Helpers */
 /* --------------- */
 

sass/knacss.scss

@@ -1,5 +1,5 @@
 /*!
-* www.KNACSS.com v7.0.0 (31 juillet 2017) @author: Alsacreations, Raphael Goetter
+* www.KNACSS.com v7.0.0 (??? 2017) @author: Alsacreations, Raphael Goetter
 * Licence WTFPL http://www.wtfpl.net/
 */