intégration de (auto)grid dans Grillade

2018-01-04 11:10:34 +01:00 · 2018-01-04 11:10:34 +01:00 · e580d2e311
parent 383160ac70
commit e580d2e311
10 changed files with 57 additions and 64 deletions
--- a/bower.json
+++ b/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"
--- a/changelog.md
+++ b/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
--- a/css/grillade-grid.css
+++ b/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}
--- a/css/knacss-unminified.css
+++ b/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                  */
 /* ----------------------------- */
--- a/css/knacss.css
+++ b/css/knacss.css
--- a/gulpfile.js
+++ b/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())
--- a/package.json
+++ b/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": [
--- a/sass/_library/grillade-grid.scss
+++ b/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}"] {
--- a/sass/components/_autogrid.scss
+++ b/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;
-      }
-    }
-  }
-}
--- a/sass/knacss.scss
+++ b/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