version 4.3.0

grilles compatibles jusqu'à IE8 et Android2 \o/
alsacreations · Jul 3, 2015 · cca44b5 · cca44b5
1 parent e1fe703
commit cca44b5
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 12 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "KNACSS",
-  "version": "4.2.3",
+  "version": "4.3.0",
   "homepage": "http://www.knacss.com/",
   "authors": [
     "Raphaël GOETTER, Alsacreations"

diff --git a/changelog.md b/changelog.md
@@ -1,3 +1,7 @@
+# changelog v4.3.0 (3 juillet 2015)
+
+- Les grilles de KNACSS sont à présent rétrocompatibles jusqu'à IE8 et Android2 grâce à un fallback en `display: inline-block` pour ces anciens navigateurs. Cependant les fonctionnalités resteront limitées chez ces dinosaures (pas de `flex-item-double`, de `flex-item-first`, etc.)
+
 # changelog v4.2.3 (2 juillet 2015)
 
 - Passage à l'indentation via 2 espaces et non plus tabulations (+ `.editorconfig` à jour)
@@ -13,8 +17,6 @@
 - correction largeurs des grilles pour IE
 - correction de divers doublons
 
-
-
 # changelog v4.2.1 (25 mai 2015)
 
 - pour les grilles, suppression de l'alignement justifié par défaut (justify-content: space-between)

diff --git a/css/knacss-unminified.css b/css/knacss-unminified.css
@@ -704,6 +704,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
 /* ---------------------------------- */
 /* ==Grids                            */
 /* ---------------------------------- */
+/* grid container */
 [class*="grid-"] {
   display: -webkit-box;
   display: -webkit-flex;
@@ -718,16 +719,23 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
       -ms-flex-wrap: wrap;
           flex-wrap: wrap;
   margin-left: -1em;
+  /* inline-block fallback for IE9 generation */
+  letter-spacing: -0.31em;
+  text-rendering: optimizespeed;
 }
+/* grid childs */
 [class*="grid-"] > * {
   -webkit-box-flex: 0;
   -webkit-flex: 0 0 auto;
       -ms-flex: 0 0 auto;
           flex: 0 0 auto;
-  display: block;
-  /* IE fix */
   width: calc(100% * 1 / 4 - 1em - .01px);
   margin-left: 1em;
+  /* inline-block fallback for IE9 generation */
+  display: inline-block;
+  vertical-align: top;
+  letter-spacing: normal;
+  text-rendering: auto;
 }
 .grid-2 > * {
   width: calc(100% * 1 / 2 - 1em - .01px);

diff --git a/css/knacss.css b/css/knacss.css
diff --git a/css/knacss.css.map b/css/knacss.css.map
diff --git a/less/_03-grids.less b/less/_03-grids.less
@@ -2,7 +2,6 @@
 /* ==Grids                            */
 /* ---------------------------------- */
 
-// WARNING : KNACSS grids are flexbox based and only supported by IE10+ and Android4.4+
 // Tuto : http://www.alsacreations.com/tuto/lire/1659-une-grille-responsive-avec-flexbox-et-LESS.html
 // Demo : http://codepen.io/raphaelgoetter/pen/zxBMLW
 
@@ -17,18 +16,29 @@
 // left = left ratio column (default = 2) / right = right ratio column (default = 1)
 // example : .grid-perso { .uneven-grid(2, 1); }
 
+/* grid container */
 [class*="@{kna-namespace}grid-"] {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   margin-left: -@gutter;
+
+  /* inline-block fallback for IE9 generation */
+  letter-spacing: -0.31em;
+  text-rendering: optimizespeed;
 }
 
+/* grid childs */
 [class*="@{kna-namespace}grid-"] > * {
   flex: 0 0 auto;
-  display: block; /* IE fix */
   width: ~'calc(100% * 1 / @{number} - @{gutter} - .01px)';
   margin-left: @gutter;
+
+  /* inline-block fallback for IE9 generation */
+  display: inline-block;
+  vertical-align: top;
+  letter-spacing: normal;
+  text-rendering: auto;
 }
 
 // LESS mixins for *equal* columns grid container

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "knacss",
-    "version": "4.2.3",
+    "version": "4.3.0",
     "homepage": "http://www.knacss.com/",
     "bugs": "https://github.com/raphaelgoetter/KNACSS/issues",
     "author": [

diff --git a/sass/_03-grids.scss b/sass/_03-grids.scss
@@ -2,7 +2,6 @@
 /* ==Grids                            */
 /* ---------------------------------- */
 
-// WARNING : KNACSS grids are flexbox based and only supported by IE10+ and Android4.4+
 // Tuto : http://www.alsacreations.com/tuto/lire/1659-une-grille-responsive-avec-flexbox-et-LESS.html
 // Demo : http://codepen.io/raphaelgoetter/pen/ZYjwEB
 
@@ -17,18 +16,29 @@
 // left = left ratio column (default = 2) / right = right ratio column (default = 1) / gutter (default = 1em)
 // example : .grid-perso { @include uneven-grid(2, 1, 10px); }
 
+/* grid container */
 [class*="#{$kna-namespace}grid-"] {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   margin-left: -$gutter;
+
+  /* inline-block fallback for IE9 generation */
+  letter-spacing: -0.31em;
+  text-rendering: optimizespeed;
 }
 
+/* grid childs */
 [class*="#{$kna-namespace}grid-"] > * {
   flex: 0 0 auto;
-  display: block; /* IE fix */
   width: calc(100% * 1 / #{$number} - #{$gutter} - .01px);
   margin-left: $gutter;
+
+  /* inline-block fallback for IE9 generation */
+  display: inline-block;
+  vertical-align: top;
+  letter-spacing: normal;
+  text-rendering: auto;
 }
 
 // Sass mixins for *equal* columns grid container