intégration de (auto)grid dans Grillade

bower.json

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

changelog.md

@@ -1,3 +1,6 @@
+# changelog v7.0.2 (04 janvier 2018)
+- intégration de (auto)grid dans Grillade
+
 # changelog v7.0.1 (22 décembre 2017)
 - meilleure gestion des hyphens
 - mise en commentaire du fix SVG our IE11

css/grillade-grid.css

@@ -1 +1 @@
-@media (min-width:480px){[class*=" grid-"],[class^=grid-]{display:grid;grid-auto-flow:dense}[class*=" grid-"].has-gutter,[class^=grid-].has-gutter{grid-gap:1rem}[class*=" grid-"].has-gutter-l,[class^=grid-].has-gutter-l{grid-gap:2rem}[class*=" grid-"].has-gutter-xl,[class^=grid-].has-gutter-xl{grid-gap:4rem}}[class*=grid-1]{grid-template-columns:repeat(1,1fr)}[class*=grid-2]{grid-template-columns:repeat(2,1fr)}[class*=grid-3]{grid-template-columns:repeat(3,1fr)}[class*=grid-4]{grid-template-columns:repeat(4,1fr)}[class*=grid-5]{grid-template-columns:repeat(5,1fr)}[class*=grid-6]{grid-template-columns:repeat(6,1fr)}[class*=grid-7]{grid-template-columns:repeat(7,1fr)}[class*=grid-8]{grid-template-columns:repeat(8,1fr)}[class*=grid-9]{grid-template-columns:repeat(9,1fr)}[class*=grid-10]{grid-template-columns:repeat(10,1fr)}[class*=grid-11]{grid-template-columns:repeat(11,1fr)}[class*=grid-12]{grid-template-columns:repeat(12,1fr)}[class*=col-1]{grid-column:auto/span 1}[class*=row-1]{grid-row:auto/span 1}[class*=col-2]{grid-column:auto/span 2}[class*=row-2]{grid-row:auto/span 2}[class*=col-3]{grid-column:auto/span 3}[class*=row-3]{grid-row:auto/span 3}[class*=col-4]{grid-column:auto/span 4}[class*=row-4]{grid-row:auto/span 4}[class*=col-5]{grid-column:auto/span 5}[class*=row-5]{grid-row:auto/span 5}[class*=col-6]{grid-column:auto/span 6}[class*=row-6]{grid-row:auto/span 6}[class*=col-7]{grid-column:auto/span 7}[class*=row-7]{grid-row:auto/span 7}[class*=col-8]{grid-column:auto/span 8}[class*=row-8]{grid-row:auto/span 8}[class*=col-9]{grid-column:auto/span 9}[class*=row-9]{grid-row:auto/span 9}[class*=col-10]{grid-column:auto/span 10}[class*=row-10]{grid-row:auto/span 10}[class*=col-11]{grid-column:auto/span 11}[class*=row-11]{grid-row:auto/span 11}[class*=col-12]{grid-column:auto/span 12}[class*=row-12]{grid-row:auto/span 12}@media (min-width:480px) and (max-width:767px){[class*=grid-][class*="-small-1"]{grid-template-columns:repeat(1,1fr)}[class*=col-][class*="-small-1"]{grid-column:auto/span 1}[class*=grid-][class*="-small-2"]{grid-template-columns:repeat(2,1fr)}[class*=col-][class*="-small-2"]{grid-column:auto/span 2}[class*=grid-][class*="-small-3"]{grid-template-columns:repeat(3,1fr)}[class*=col-][class*="-small-3"]{grid-column:auto/span 3}[class*=grid-][class*="-small-4"]{grid-template-columns:repeat(4,1fr)}[class*=col-][class*="-small-4"]{grid-column:auto/span 4}[class*="-small-all"]{grid-column:1/-1}}.item-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.item-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.grid-offset{visibility:hidden}.col-all{grid-column:1/-1}.row-all{grid-row:1/-1}
+@media (min-width:480px){[class*=" grid-"],[class^=grid-]{display:grid;grid-auto-flow:dense}[class*=" grid-"].has-gutter,[class^=grid-].has-gutter{grid-gap:1rem}[class*=" grid-"].has-gutter-l,[class^=grid-].has-gutter-l{grid-gap:2rem}[class*=" grid-"].has-gutter-xl,[class^=grid-].has-gutter-xl{grid-gap:4rem}}@media (min-width:480px){.autogrid,.grid{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}.autogrid.has-gutter,.grid.has-gutter{grid-column-gap:1rem}.autogrid.has-gutter-l,.grid.has-gutter-l{grid-column-gap:2rem}.autogrid.has-gutter-xl,.grid.has-gutter-xl{grid-column-gap:4rem}}[class*=grid-2]{grid-template-columns:repeat(2,1fr)}[class*=grid-3]{grid-template-columns:repeat(3,1fr)}[class*=grid-4]{grid-template-columns:repeat(4,1fr)}[class*=grid-5]{grid-template-columns:repeat(5,1fr)}[class*=grid-6]{grid-template-columns:repeat(6,1fr)}[class*=grid-7]{grid-template-columns:repeat(7,1fr)}[class*=grid-8]{grid-template-columns:repeat(8,1fr)}[class*=grid-9]{grid-template-columns:repeat(9,1fr)}[class*=grid-10]{grid-template-columns:repeat(10,1fr)}[class*=grid-11]{grid-template-columns:repeat(11,1fr)}[class*=grid-12]{grid-template-columns:repeat(12,1fr)}[class*=col-1]{grid-column:auto/span 1}[class*=row-1]{grid-row:auto/span 1}[class*=col-2]{grid-column:auto/span 2}[class*=row-2]{grid-row:auto/span 2}[class*=col-3]{grid-column:auto/span 3}[class*=row-3]{grid-row:auto/span 3}[class*=col-4]{grid-column:auto/span 4}[class*=row-4]{grid-row:auto/span 4}[class*=col-5]{grid-column:auto/span 5}[class*=row-5]{grid-row:auto/span 5}[class*=col-6]{grid-column:auto/span 6}[class*=row-6]{grid-row:auto/span 6}[class*=col-7]{grid-column:auto/span 7}[class*=row-7]{grid-row:auto/span 7}[class*=col-8]{grid-column:auto/span 8}[class*=row-8]{grid-row:auto/span 8}[class*=col-9]{grid-column:auto/span 9}[class*=row-9]{grid-row:auto/span 9}[class*=col-10]{grid-column:auto/span 10}[class*=row-10]{grid-row:auto/span 10}[class*=col-11]{grid-column:auto/span 11}[class*=row-11]{grid-row:auto/span 11}[class*=col-12]{grid-column:auto/span 12}[class*=row-12]{grid-row:auto/span 12}@media (min-width:480px) and (max-width:767px){[class*=grid-][class*="-small-1"]{grid-template-columns:repeat(1,1fr)}[class*=col-][class*="-small-1"]{grid-column:auto/span 1}[class*=grid-][class*="-small-2"]{grid-template-columns:repeat(2,1fr)}[class*=col-][class*="-small-2"]{grid-column:auto/span 2}[class*=grid-][class*="-small-3"]{grid-template-columns:repeat(3,1fr)}[class*=col-][class*="-small-3"]{grid-column:auto/span 3}[class*=grid-][class*="-small-4"]{grid-template-columns:repeat(4,1fr)}[class*=col-][class*="-small-4"]{grid-column:auto/span 4}[class*="-small-all"]{grid-column:1/-1}}.item-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.item-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.grid-offset{visibility:hidden}.col-all{grid-column:1/-1}.row-all{grid-row:1/-1}

css/knacss-unminified.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
-* www.KNACSS.com v7.0.1 (december,22 2017) @author: Alsacreations, Raphael Goetter
+* www.KNACSS.com v7.0.2 (januar, 4 2017) @author: Alsacreations, Raphael Goetter
 * Licence WTFPL http://www.wtfpl.net/
 */
 /* ----------------------------- */
@@ -1667,6 +1667,27 @@ ul.is-unstyled, ul.unstyled {
   }
 }
 
+@media (min-width: 480px) {
+  .autogrid,
+  .grid {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
+  }
+  .autogrid.has-gutter,
+  .grid.has-gutter {
+    grid-column-gap: 1rem;
+  }
+  .autogrid.has-gutter-l,
+  .grid.has-gutter-l {
+    grid-column-gap: 2rem;
+  }
+  .autogrid.has-gutter-xl,
+  .grid.has-gutter-xl {
+    grid-column-gap: 4rem;
+  }
+}
+
 [class*="grid-2"] {
   grid-template-columns: repeat(2, 1fr);
 }
@@ -1893,32 +1914,6 @@ ul.is-unstyled, ul.unstyled {
   }
 }
 
-/* ----------------------------- */
-/* ==Autogrid object             */
-/* ----------------------------- */
-/* recommanded HTML : <div class="autogrid">... some elements ...</div> */
-/* see https://codepen.io/raphaelgoetter/pen/zzwxEE */
-@media (min-width: 480px) {
-  .autogrid,
-  .grid {
-    display: grid;
-    grid-auto-flow: column;
-    grid-auto-columns: 1fr;
-  }
-  .autogrid.has-gutter,
-  .grid.has-gutter {
-    grid-column-gap: 1rem;
-  }
-  .autogrid.has-gutter-l,
-  .grid.has-gutter-l {
-    grid-column-gap: 2rem;
-  }
-  .autogrid.has-gutter-xl,
-  .grid.has-gutter-xl {
-    grid-column-gap: 4rem;
-  }
-}
-
 /* ----------------------------- */
 /* ==skip links                  */
 /* ----------------------------- */

gulpfile.js

@@ -24,7 +24,7 @@ gulp.task('css', function () {
 });
 
 gulp.task('grillade', function() {
-  return gulp.src('./sass/components/grillade-grid.scss')
+  return gulp.src('./sass/_library/grillade-grid.scss')
     .pipe(sass())
     .pipe(autoprefixer())
     .pipe(minifycss())
@@ -32,7 +32,7 @@ gulp.task('grillade', function() {
 });
 
 gulp.task('grillade-flex', function() {
-  return gulp.src('./sass/components/grillade-flex.scss')
+  return gulp.src('./sass/_library/grillade-flex.scss')
     .pipe(sass())
     .pipe(autoprefixer())
     .pipe(minifycss())

package.json

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

sass/_library/grillade-grid.scss

@@ -11,7 +11,7 @@
 $tiny: 480px !default;
 $medium: 768px !default;
 
-
+// classic Grid
 [class*=" grid-"],
 [class^="grid-"] {
   @media (min-width: $tiny) {
@@ -33,6 +33,29 @@ $medium: 768px !default;
   }
 }
 
+// autogrid
+.autogrid,
+.grid {
+  @media (min-width: $tiny) {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
+
+    // gutters
+    @if variable_exists(grid-gutters) {
+      $gutter: $grid-gutters !global;
+
+    } @else {
+      $gutter: ( '': 1rem, '-l': 2rem, '-xl': 4rem ) !global;
+    }
+    @each $affix, $size in $gutter {
+      &.has-gutter#{$affix} {
+        grid-column-gap: $size;
+      }
+    }
+  }
+}
+
 // grid constructor (.grid-2 to .grid-12)
 @for $i from 2 through 12 {
   [class*="grid-#{$i}"] {

sass/components/_autogrid.scss

@@ -1,27 +0,0 @@
-/* ----------------------------- */
-/* ==Autogrid object             */
-/* ----------------------------- */
-/* recommanded HTML : <div class="autogrid">... some elements ...</div> */
-/* see https://codepen.io/raphaelgoetter/pen/zzwxEE */
-
-.autogrid,
-.grid {
-  @media (min-width: $tiny) {
-    display: grid;
-    grid-auto-flow: column;
-    grid-auto-columns: 1fr;
-
-    // gutters
-    @if variable_exists(grid-gutters) {
-      $gutter: $grid-gutters !global;
-
-    } @else {
-      $gutter: ( '': 1rem, '-l': 2rem, '-xl': 4rem ) !global;
-    }
-    @each $affix, $size in $gutter {
-      &.has-gutter#{$affix} {
-        grid-column-gap: $size;
-      }
-    }
-  }
-}

sass/knacss.scss

@@ -1,5 +1,5 @@
 /*!
-* www.KNACSS.com v7.0.1 (december,22 2017) @author: Alsacreations, Raphael Goetter
+* www.KNACSS.com v7.0.2 (januar, 4 2017) @author: Alsacreations, Raphael Goetter
 * Licence WTFPL http://www.wtfpl.net/
 */
 
@@ -54,7 +54,6 @@
 
 // Components
 @import "components/media";      // media object
-@import "components/autogrid";   // media autogrid
 @import "components/skip-links"; // skip links
 @import "components/tables";     // data tables consistency
 @import "components/forms";      // forms consistency and styles