préfixage des variables de grille

changelog.md

@@ -7,6 +7,7 @@
 - adaptation des variables de breakpoint pour les rendre compatibles avec include-media
 - adaptation des fichiers gulpfile, package.json et bower.json
 - grille "grillade" à présent en mobile first (par défaut 1 colonne sur "tiny", 2 colonnes sur "small", valeurs modifiables)
+- nommage de variables préfixé pour plus de maintenabilité : `$gutter` -> `$grid-gutter`, `$number` -> `$grid-number`, `$left` -> `$grid-left` et `$right` -> `$grid-right`
 - mise à jour de la documentation
 - ajout de commentaires dans les grilles
 

doc/03-grilles.md

@@ -90,7 +90,7 @@ Les **enfants** directs d'un conteneur, quels qu'ils soient, se répartissent au
 Les grilles KNACSS sont mobile-first et "plus ou moins" responsive naturellement, dans la mesure où par défaut :
 - elles s'affichent systématiquement sur une seule colonne sur un très petit écran ("tiny"),
 - elles s'affichent par défaut en 2 colonnes sur un écran de taille réduite ("small"),
-- elles occupent le nombre de colonnes définies dans la variable `$number` sur un écran suffisamment large.
+- elles occupent le nombre de colonnes définies dans la variable `$grid-number` sur un écran suffisamment large.
 
 Vous pouvez définir le nombre de colonnes selon les tailles d'écran à l'aide du mot-clé : `-small-*`.
 Ce mot-clé définit le nombre de colonnes lorsque le point de rupture se situe au-delà de la taille "tiny" et en-deçà de la taille "medium".
@@ -200,10 +200,10 @@ KNACSS est pensé pour être utilisé à l'aide de preprocesseurs tels que LESS
 Les variables de configuration des grilles se trouvent dans le fichier `sass/_config-variables.scss` :
 
 ```css
-$gutter:  2rem !default; // gutter value for grid layouts. Unit can be: %, px, em, rem
+$grid-gutter:  2rem !default; // gutter value for grid layouts. Unit can be: %, px, em, rem
-$number:  4 !default; // number of equal columns
+$grid-number:  4 !default; // number of equal columns
-$left:    2 !default; // left side of uneven columns
+$grid-left:    2 !default; // left side of uneven columns
-$right:   1 !default; // right side of uneven columns
+$grid-right:   1 !default; // right side of uneven columns
 ```
 
 Il vous suffit de modifier les valeurs de ces variables de config pour répercuter vos préférences sur l'ensemble du projet dès que vos fichiers Sass seront compilés en CSS.

sass/_config-variables.scss

@@ -61,10 +61,10 @@ $breakpoints: (
 );
 
 // grids variables (choose unit you prefer)
-$gutter:  2rem !default; // gutter value for grid layouts. Unit can be: %, px, em, rem
+$grid-gutter:  2rem !default; // gutter value for grid layouts. Unit can be: %, px, em, rem
-$number:  4 !default; // number of equal columns
+$grid-number:  4 !default; // number of equal columns
-$left:    2 !default; // left side of uneven columns
+$grid-left:    2 !default; // left side of uneven columns
-$right:   1 !default; // right side of uneven columns
+$grid-right:   1 !default; // right side of uneven columns
 
 //kna-namespace (default : null)
 $kna-namespace: null !default;

sass/_layout-grids.scss

@@ -21,41 +21,41 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  margin-left: -$gutter;
+  margin-left: -$grid-gutter;
 }
 
 /* grid childs */
 [class*="#{$kna-namespace}grid-"] > * {
   box-sizing: border-box;
   flex: 0 0 auto;
-  width: calc(100% - #{$gutter} - .01px);// @bugfix IE https://github.com/alsacreations/KNACSS/issues/133;
+  width: calc(100% - #{$grid-gutter} - .01px);// @bugfix IE https://github.com/alsacreations/KNACSS/issues/133;
   min-width: 0;
   min-height: 0;
-  margin-left: $gutter;
+  margin-left: $grid-gutter;
   @include media('>tiny-screen', '<=small-screen') {
     & {
-      width: calc(100% * 1 / 2 - #{$gutter} - .01px);
+      width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px);
     }
     &.flex-item-double {
-      width: calc(100% - #{$gutter} - .01px);
+      width: calc(100% - #{$grid-gutter} - .01px);
     }
   }
 }
 
 // Sass mixins for *equal* columns grid container
 // example : .grid-perso { @include grid(12); }
-@mixin grid($number:$number,$newgutter:$gutter) {
+@mixin grid($grid-number:$grid-number,$newgutter:$grid-gutter) {
-  @if $newgutter != $gutter {
+  @if $newgutter != $grid-gutter {
     margin-left: -$newgutter;
   }
   & > * {
-    width: calc(100% * 1 / #{$number} - #{$newgutter} - .01px);
+    width: calc(100% * 1 / #{$grid-number} - #{$newgutter} - .01px);
-    @if $newgutter != $gutter {
+    @if $newgutter != $grid-gutter {
       margin-left: $newgutter;
     }
   }
   & > .#{$kna-namespace}flex-item-double {
-    width: calc(100% * 2 / #{$number} - #{$newgutter});
+    width: calc(100% * 2 / #{$grid-number} - #{$newgutter});
   }
 }
 
@@ -72,51 +72,51 @@
 // example : .grid-4-small-2 will be 1 column (tiny) then 2 columns (small) then 4 columns
 @include media('>tiny-screen', '<=small-screen') {
   [class*="-small-4"] > * {
-    width: calc(100% * 1 / 4 - #{$gutter} - .01px);
+    width: calc(100% * 1 / 4 - #{$grid-gutter} - .01px);
   }
   [class*="-small-4"] > .flex-item-double {
-    width: calc(100% * 1 / 2 - #{$gutter} - .01px);
+    width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px);
   }
   [class*="-small-3"] > * {
-    width: calc(100% * 1 / 3 - #{$gutter} - .01px);
+    width: calc(100% * 1 / 3 - #{$grid-gutter} - .01px);
   }
   [class*="-small-3"] > .flex-item-double {
-    width: calc(100% * 2 / 3 - #{$gutter} - .01px);
+    width: calc(100% * 2 / 3 - #{$grid-gutter} - .01px);
   }
   [class*="-small-2"] > * {
-    width: calc(100% * 1 / 2 - #{$gutter} - .01px);
+    width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px);
   }
   [class*="-small-2"] > .flex-item-double {
-    width: calc(100% - #{$gutter} - .01px);
+    width: calc(100% - #{$grid-gutter} - .01px);
   }
   [class*="-small-1"] > * {
-    width: calc(100% - #{$gutter} - .01px);
+    width: calc(100% - #{$grid-gutter} - .01px);
   }
   [class*="-small-1"] > .flex-item-double {
-    width: calc(100% - #{$gutter} - .01px);
+    width: calc(100% - #{$grid-gutter} - .01px);
   }
 }
 
 
 // Sass mixins for *unequal* columns grid container
 // example : .grid-perso { @include uneven-grid(2, 1); }
-@mixin uneven-grid($left:$left, $right:$right, $newgutter:$gutter) {
+@mixin uneven-grid($grid-left:$grid-left, $grid-right:$grid-right, $newgutter:$grid-gutter) {
-  @if $newgutter != $gutter {
+  @if $newgutter != $grid-gutter {
     margin-left: -$newgutter;
   }
   > * {
-    @if $newgutter != $gutter {
+    @if $newgutter != $grid-gutter {
       margin-left: $newgutter;
       width: calc(100% - #{$newgutter});
     }
   }
   @include media('>small-screen') {
     & :nth-child(odd) {
-      $size: ($left / ($left + $right)) * 100%;
+      $size: ($grid-left / ($grid-left + $grid-right)) * 100%;
       width: calc(#{$size} - #{$newgutter});
     }
     & :nth-child(even) {
-      $size: ($right / ($left + $right)) * 100%;
+      $size: ($grid-right / ($grid-left + $grid-right)) * 100%;
       width: calc(#{$size} - #{$newgutter});
     }
   }