variable $utilities

changelog.md

@@ -5,6 +5,7 @@
 - mise à jour du reset, suppression des reset vendors (reboot)
 - support passé de IE10 à IE11 (browserlist)
 - ajout d'une variable pour supporter ou non IE11 : `$ie: true !default;`. Activation de Grid Layout ou flexbox selon cette variable
+- ajout d'une variable pour supporter ou non les classes utilitaires : `$utilities: true !default;`.
 - ajout d'une variable pour supporter ou non WordPress : `$wordpress: false !default;`. Activation de reset et styles WordPress selon cette variable
 - corrections typo
 - renommage de dossiers à la "7-1 pattern": `_config` > `abstracts`, `_library` > `base`, et du fichier `_base.scss` en `_reset.scss`

sass/abstracts/_variables.scss

@@ -73,7 +73,10 @@ $weight-medium  : 500 !default;
 $weight-bold    : 700 !default;
 
 // Activate hyphenation on small screens
-$hyphens: false !default;
+$hyphens: true !default;
+
+// Activate Utility classes
+$utilities: true !default;
 
 // Activate WordPress reset and styles
 $wordpress: false !default;

sass/base/_reset.scss

@@ -473,6 +473,23 @@ figure {
   margin-right: 0;
 }
 
+@if variable-exists(hyphens) and $hyphens==true {
+  @media (max-width: ($small - 1)) {
+    body,
+    div,
+    textarea,
+    table,
+    td,
+    th,
+    code,
+    pre,
+    samp {
+      word-wrap: break-word;
+      overflow-wrap: break-word;
+    }
+  }
+}
+
 
 @if variable-exists(ie) and $ie==true {
   

sass/base/_utilities.scss

@@ -74,23 +74,6 @@
   text-align: center;
 }
 
-@if variable-exists(hyphens) and $hyphens==true {
-  @media (max-width: ($small - 1)) {
-    div,
-    textarea,
-    table,
-    td,
-    th,
-    code,
-    pre,
-    samp {
-      word-wrap: break-word;
-      overflow-wrap: break-word;
-      hyphens: auto;
-    }
-  }
-}
-
 /* blocks that need to be placed under floats */
 
 .clear,

sass/knacss.scss

@@ -8,7 +8,7 @@
 /* ----------------------------- */
 
 /*
-1- Reboot (basic reset)
+1- Abstracts (variables and mixins)
 2- Base  :
   - Reset
   - Print
@@ -40,9 +40,13 @@
 @import "base/reset";        // basic styles
 @import "base/print";        // print quick reset
 @import "base/layout";       // alignment, modules, positionning
-@import "base/utilities";    // width and spacer helpers
 @import "base/responsive";   // Responsive Web Design helpers
 
+// Utilities (loaded if $utilities variable is true). 
+@if variable-exists(utilities) and $utilities==true {
+  @import "base/utilities";    // width and spacer helpers
+}
+
 // WordPress reset and basics (loaded if $wordpress variable is true). 
 @if variable-exists(wordpress) and $wordpress==true {
   @import "base/wordpress"; // WordPress reset and basic styles