nouvelles grilles responsive, v4.3.1

2015-07-05 17:05:45 +02:00 · 2015-07-05 17:05:45 +02:00 · b88f32f6d0
parent 70a3bfbe48
commit b88f32f6d0
9 changed files with 108 additions and 190 deletions
--- a/bower.json
+++ b/bower.json
@ -1,6 +1,6 @@
 {
  "name": "KNACSS",
-  "version": "4.3.0",
+  "version": "4.3.1",
  "homepage": "http://www.knacss.com/",
  "authors": [
    "Raphaël GOETTER, Alsacreations"
--- a/changelog.md
+++ b/changelog.md
@ -1,3 +1,7 @@
+# changelog v4.3.1 (5 juillet 2015)
+
+- Amélioration des grilles responsive. Par exemple la classe `grid-4-small-2-tiny-1` définira une grille de 4 colonnes sur grand écran, puis en 2 colonnes sur un écran réduit, puis en une seule colonne sur petit écran. La notation `grid-4` fonctionne toujours, mais ne sera pas automatiquement responsive.
+
 # 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.)
--- a/css/knacss-unminified.css
+++ b/css/knacss-unminified.css
@ -1,5 +1,5 @@
 /*!
-* www.KNACSS.com V4.2.3 (1er juillet 2015) @author: Raphael Goetter, Alsacreations
+* www.KNACSS.com V4.3.1 (5 juillet 2015) @author: Raphael Goetter, Alsacreations
 * Licence WTFPL http://www.wtfpl.net/
 */
 /*! normalize.css v3.0.2 | MIT License | github.com/necolas/normalize.css */
@ -737,290 +737,187 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
  letter-spacing: normal;
  text-rendering: auto;
 }
-.grid-2 > * {
+[class*="grid-2"] > * {
  width: calc(100% * 1 / 2 - 1em - .01px);
 }
-.grid-2 > .flex-item-double {
+[class*="grid-2"] > .flex-item-double {
  width: calc(100% * 2 / 2 - 1em - .01px);
 }
-@media (min-width: 481px) and (max-width: 768px) {
-  .grid-2 > * {
-    width: calc(100% * 1 / 2 - 1em - .01px);
-  }
-  .grid-2 > .flex-item-double {
-    width: calc(100% - 1em - .01px);
-  }
-}
-@media (max-width: 480px) {
-  .grid-2 > * {
-    width: calc(100% - 1em - .01px);
-  }
-  .grid-2 > .flex-item-double {
-    width: calc(100% - 1em - .01px);
-  }
-}
-.grid-3 > * {
+[class*="grid-3"] > * {
  width: calc(100% * 1 / 3 - 1em - .01px);
 }
-.grid-3 > .flex-item-double {
+[class*="grid-3"] > .flex-item-double {
  width: calc(100% * 2 / 3 - 1em - .01px);
 }
-@media (min-width: 481px) and (max-width: 768px) {
-  .grid-3 > * {
-    width: calc(100% * 1 / 2 - 1em - .01px);
-  }
-  .grid-3 > .flex-item-double {
-    width: calc(100% - 1em - .01px);
-  }
-}
-@media (max-width: 480px) {
-  .grid-3 > * {
-    width: calc(100% - 1em - .01px);
-  }
-  .grid-3 > .flex-item-double {
-    width: calc(100% - 1em - .01px);
-  }
-}
-.grid-4 > * {
+[class*="grid-4"] > * {
  width: calc(100% * 1 / 4 - 1em - .01px);
 }
-.grid-4 > .flex-item-double {
+[class*="grid-4"] > .flex-item-double {
  width: calc(100% * 2 / 4 - 1em - .01px);
 }
-@media (min-width: 481px) and (max-width: 768px) {
-  .grid-4 > * {
-    width: calc(100% * 1 / 2 - 1em - .01px);
-  }
-  .grid-4 > .flex-item-double {
-    width: calc(100% - 1em - .01px);
-  }
-}
-@media (max-width: 480px) {
-  .grid-4 > * {
-    width: calc(100% - 1em - .01px);
-  }
-  .grid-4 > .flex-item-double {
-    width: calc(100% - 1em - .01px);
-  }
-}
-.grid-5 > * {
+[class*="grid-5"] > * {
  width: calc(100% * 1 / 5 - 1em - .01px);
 }
-.grid-5 > .flex-item-double {
+[class*="grid-5"] > .flex-item-double {
  width: calc(100% * 2 / 5 - 1em - .01px);
 }
-@media (min-width: 481px) and (max-width: 768px) {
-  .grid-5 > * {
-    width: calc(100% * 1 / 2 - 1em - .01px);
-  }
-  .grid-5 > .flex-item-double {
-    width: calc(100% - 1em - .01px);
-  }
-}
-@media (max-width: 480px) {
-  .grid-5 > * {
-    width: calc(100% - 1em - .01px);
-  }
-  .grid-5 > .flex-item-double {
-    width: calc(100% - 1em - .01px);
-  }
-}
-.grid-6 > * {
+[class*="grid-6"] > * {
  width: calc(100% * 1 / 6 - 1em - .01px);
 }
-.grid-6 > .flex-item-double {
+[class*="grid-6"] > .flex-item-double {
  width: calc(100% * 2 / 6 - 1em - .01px);
 }
-@media (min-width: 481px) and (max-width: 768px) {
-  .grid-6 > * {
-    width: calc(100% * 1 / 2 - 1em - .01px);
-  }
-  .grid-6 > .flex-item-double {
-    width: calc(100% - 1em - .01px);
-  }
-}
-@media (max-width: 480px) {
-  .grid-6 > * {
-    width: calc(100% - 1em - .01px);
-  }
-  .grid-6 > .flex-item-double {
-    width: calc(100% - 1em - .01px);
-  }
-}
-.grid-7 > * {
+[class*="grid-7"] > * {
  width: calc(100% * 1 / 7 - 1em - .01px);
 }
-.grid-7 > .flex-item-double {
+[class*="grid-7"] > .flex-item-double {
  width: calc(100% * 2 / 7 - 1em - .01px);
 }
-@media (min-width: 481px) and (max-width: 768px) {
-  .grid-7 > * {
-    width: calc(100% * 1 / 2 - 1em - .01px);
-  }
-  .grid-7 > .flex-item-double {
-    width: calc(100% - 1em - .01px);
-  }
-}
-@media (max-width: 480px) {
-  .grid-7 > * {
-    width: calc(100% - 1em - .01px);
-  }
-  .grid-7 > .flex-item-double {
-    width: calc(100% - 1em - .01px);
-  }
-}
-.grid-8 > * {
+[class*="grid-8"] > * {
  width: calc(100% * 1 / 8 - 1em - .01px);
 }
-.grid-8 > .flex-item-double {
+[class*="grid-8"] > .flex-item-double {
  width: calc(100% * 2 / 8 - 1em - .01px);
 }
-@media (min-width: 481px) and (max-width: 768px) {
-  .grid-8 > * {
-    width: calc(100% * 1 / 2 - 1em - .01px);
-  }
-  .grid-8 > .flex-item-double {
-    width: calc(100% - 1em - .01px);
-  }
-}
-@media (max-width: 480px) {
-  .grid-8 > * {
-    width: calc(100% - 1em - .01px);
-  }
-  .grid-8 > .flex-item-double {
-    width: calc(100% - 1em - .01px);
-  }
-}
-.grid-10 > * {
+[class*="grid-10"] > * {
  width: calc(100% * 1 / 10 - 1em - .01px);
 }
-.grid-10 > .flex-item-double {
+[class*="grid-10"] > .flex-item-double {
  width: calc(100% * 2 / 10 - 1em - .01px);
 }
-@media (min-width: 481px) and (max-width: 768px) {
-  .grid-10 > * {
-    width: calc(100% * 1 / 2 - 1em - .01px);
-  }
-  .grid-10 > .flex-item-double {
-    width: calc(100% - 1em - .01px);
-  }
-}
-@media (max-width: 480px) {
-  .grid-10 > * {
-    width: calc(100% - 1em - .01px);
-  }
-  .grid-10 > .flex-item-double {
-    width: calc(100% - 1em - .01px);
-  }
-}
-.grid-12 > * {
+[class*="grid-12"] > * {
  width: calc(100% * 1 / 12 - 1em - .01px);
 }
-.grid-12 > .flex-item-double {
+[class*="grid-12"] > .flex-item-double {
  width: calc(100% * 2 / 12 - 1em - .01px);
 }
-@media (min-width: 481px) and (max-width: 768px) {
-  .grid-12 > * {
+/* Responsive grid */
+@media (max-width: 768px) {
+  [class*="-small-4"] > * {
+    width: calc(100% * 1 / 4 - 1em - .01px);
+  }
+  [class*="-small-4"] > .flexitem-double {
    width: calc(100% * 1 / 2 - 1em - .01px);
  }
-  .grid-12 > .flex-item-double {
+  [class*="-small-3"] > * {
+    width: calc(100% * 1 / 3 - 1em - .01px);
+  }
+  [class*="-small-3"] > .flexitem-double {
+    width: calc(100% * 2 / 3 - 1em - .01px);
+  }
+  [class*="-small-2"] > * {
+    width: calc(100% * 1 / 2 - 1em - .01px);
+  }
+  [class*="-small-2"] > .flexitem-double {
+    width: calc(100% - 1em - .01px);
+  }
+  [class*="-small-1"] > * {
+    width: calc(100% - 1em - .01px);
+  }
+  [class*="-small-1"] > .flexitem-double {
    width: calc(100% - 1em - .01px);
  }
 }
@media (max-width: 480px) {
-  .grid-12 > * {
+  [class*="-tiny-2"] > * {
+    width: calc(100% * 1 / 2 - 1em - .01px);
+  }
+  [class*="-tiny-2"] > .flexitem-double {
    width: calc(100% - 1em - .01px);
  }
-  .grid-12 > .flex-item-double {
+  [class*="-tiny-1"] > * {
+    width: calc(100% - 1em - .01px);
+  }
+  [class*="-tiny-1"] > .flexitem-double {
    width: calc(100% - 1em - .01px);
  }
 }
 .grid-2-1 > *:nth-child(odd) {
-  width: calc(66.66666666666666% - 1em);
+  width: calc(66.66666666666666% - 1em - .01px);
 }
 .grid-2-1 > *:nth-child(even) {
-  width: calc(33.33333333333333% - 1em);
+  width: calc(33.33333333333333% - 1em - .01px);
 }
@media (max-width: 480px) {
  .grid-2-1 > *:nth-child(n) {
-    width: calc(100% - 1em);
+    width: calc(100% - 1em - .01px);
  }
 }
 .grid-1-2 > *:nth-child(odd) {
-  width: calc(33.33333333333333% - 1em);
+  width: calc(33.33333333333333% - 1em - .01px);
 }
 .grid-1-2 > *:nth-child(even) {
-  width: calc(66.66666666666666% - 1em);
+  width: calc(66.66666666666666% - 1em - .01px);
 }
@media (max-width: 480px) {
  .grid-1-2 > *:nth-child(n) {
-    width: calc(100% - 1em);
+    width: calc(100% - 1em - .01px);
  }
 }
 .grid-3-1 > *:nth-child(odd) {
-  width: calc(75% - 1em);
+  width: calc(75% - 1em - .01px);
 }
 .grid-3-1 > *:nth-child(even) {
-  width: calc(25% - 1em);
+  width: calc(25% - 1em - .01px);
 }
@media (max-width: 480px) {
  .grid-3-1 > *:nth-child(n) {
-    width: calc(100% - 1em);
+    width: calc(100% - 1em - .01px);
  }
 }
 .grid-1-3 > *:nth-child(odd) {
-  width: calc(25% - 1em);
+  width: calc(25% - 1em - .01px);
 }
 .grid-1-3 > *:nth-child(even) {
-  width: calc(75% - 1em);
+  width: calc(75% - 1em - .01px);
 }
@media (max-width: 480px) {
  .grid-1-3 > *:nth-child(n) {
-    width: calc(100% - 1em);
+    width: calc(100% - 1em - .01px);
  }
 }
 .grid-3-2 > *:nth-child(odd) {
-  width: calc(60% - 1em);
+  width: calc(60% - 1em - .01px);
 }
 .grid-3-2 > *:nth-child(even) {
-  width: calc(40% - 1em);
+  width: calc(40% - 1em - .01px);
 }
@media (max-width: 480px) {
  .grid-3-2 > *:nth-child(n) {
-    width: calc(100% - 1em);
+    width: calc(100% - 1em - .01px);
  }
 }
 .grid-2-3 > *:nth-child(odd) {
-  width: calc(40% - 1em);
+  width: calc(40% - 1em - .01px);
 }
 .grid-2-3 > *:nth-child(even) {
-  width: calc(60% - 1em);
+  width: calc(60% - 1em - .01px);
 }
@media (max-width: 480px) {
  .grid-2-3 > *:nth-child(n) {
-    width: calc(100% - 1em);
+    width: calc(100% - 1em - .01px);
  }
 }
 .grid-4-1 > *:nth-child(odd) {
-  width: calc(80% - 1em);
+  width: calc(80% - 1em - .01px);
 }
 .grid-4-1 > *:nth-child(even) {
-  width: calc(20% - 1em);
+  width: calc(20% - 1em - .01px);
 }
@media (max-width: 480px) {
  .grid-4-1 > *:nth-child(n) {
-    width: calc(100% - 1em);
+    width: calc(100% - 1em - .01px);
  }
 }
 .grid-1-4 > *:nth-child(odd) {
-  width: calc(20% - 1em);
+  width: calc(20% - 1em - .01px);
 }
 .grid-1-4 > *:nth-child(even) {
-  width: calc(80% - 1em);
+  width: calc(80% - 1em - .01px);
 }
@media (max-width: 480px) {
  .grid-1-4 > *:nth-child(n) {
-    width: calc(100% - 1em);
+    width: calc(100% - 1em - .01px);
  }
 }
 /* ----------------------------- */
--- a/css/knacss.css
+++ b/css/knacss.css
--- a/css/knacss.css.map
+++ b/css/knacss.css.map
--- a/doc/03-grilles.md
+++ b/doc/03-grilles.md
@ -128,6 +128,23 @@ HTML :
 Résultat :
 ![preums!](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-first.PNG)

+## Grilles responsive
+
+Vous pouvez définir le nombre de colonnes selon les tailles d'écran à l'aide des mots-clés suivants :
+
+- `-small-*` : définit le nombre de colonnes lorsque le point de rupture atteint la valeur de la variable `small-screen`
+- `-tiny-*` : définit le nombre de colonnes lorsque le point de rupture atteint la valeur de la variable `tiny-screen`
+
+La grille ci-dessous s'affichera en 4 colonnes sur grand écran, puis en 2 colonnes sur un écran réduit, puis en une seule colonne sur petit écran :
+```html
+<div class="grid-4-small-2-tiny-1">
+    <div>un div ou n'importe quoi d'autre</div>
+    <div>un 2è div ou n'importe quoi d'autre</div>
+    <div>un 3è div ou n'importe quoi d'autre</div>
+    <div>etc.</div>
+</div>
+```
+
 ## Plus loin avec les préprocesseurs

 KNACSS est pensé pour être utilisé à l'aide de preprocesseurs tels que LESS ou Sass. Il existe par conséquent un fichier de variables de configuration et des mixins prévus pour étendre les possibilités des grilles notamment.
--- a/less/_00-config.less
+++ b/less/_00-config.less
@ -1,5 +1,5 @@
 /*!
-* www.KNACSS.com V4.2.3 (1er juillet 2015) @author: Raphael Goetter, Alsacreations
+* www.KNACSS.com V4.3.1 (5 juillet 2015) @author: Raphael Goetter, Alsacreations
 * Licence WTFPL http://www.wtfpl.net/
 */

--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
    "name": "knacss",
-    "version": "4.3.0",
+    "version": "4.3.1",
    "homepage": "http://www.knacss.com/",
    "bugs": "https://github.com/raphaelgoetter/KNACSS/issues",
    "author": [
--- a/sass/_00-config.scss
+++ b/sass/_00-config.scss
@ -1,5 +1,5 @@
 /*!
-* www.KNACSS.com V4.2.3 (1er juillet 2015) @author: Raphael Goetter, Alsacreations
+* www.KNACSS.com V4.3.1 (5 juillet 2015) @author: Raphael Goetter, Alsacreations
 * Licence WTFPL http://www.wtfpl.net/
 */