helpers mobile-first

alsacreations · May 24, 2016 · bb552d0 · bb552d0
1 parent ac72df5
commit bb552d0
Show file tree

Hide file tree

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

diff --git a/changelog.md b/changelog.md
@@ -1,3 +1,6 @@
+# changelog v5.0.1 (24 mai 2016)
+- les helpers de largeurs deviennent mobile-first et ne s'activent que sur écran d'une certaine taille. Ex. `.w700p {width: 700px;}` devient `@include media('>640px') {.w700p {width: 700px;}}`. Ainsi il n'est plus nécessaire de les écraser dans la feuille de style responsive.
+
 # changelog v5.0.0 (23 mai 2016)
 - suppression du support IE8-IE9 (à partir de la version KNACSS 5.0, seul IE10 et supérieurs sont pris en charge)
 - suppression du support LESS (à partir de la version KNACSS 5.0, seul le préprocesseur Sass est encore pris en charge pour des raisons de maintenabilité)

diff --git a/css/knacss-unminified.css b/css/knacss-unminified.css
@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
-* www.KNACSS.com V5.0.0 (23 mai 2016) @author: Raphael Goetter, Alsacreations
+* www.KNACSS.com V5.0.1 (24 mai 2016) @author: Alsacreations, Raphael Goetter
 * Licence WTFPL http://www.wtfpl.net/
 */
 /* ----------------------------- */
@@ -1268,32 +1268,29 @@ ul.unstyled {
 .w300p {
   width: 300px; }
 
-.w400p {
-  width: 400px; }
-
-.w500p {
-  width: 500px; }
-
-.w600p {
-  width: 600px; }
-
-.w700p {
-  width: 700px; }
-
-.w800p {
-  width: 800px; }
-
-.w960p {
-  width: 960px; }
-
-.mw960p {
-  max-width: 960px; }
-
-.w1140p {
-  width: 1140px; }
-
-.mw1140p {
-  max-width: 1140px; }
+@media (min-width: 400px) {
+  .w400p {
+    width: 400px; }
+  .w500p {
+    width: 500px; }
+  .w600p {
+    width: 600px; } }
+
+@media (min-width: 700px) {
+  .w700p {
+    width: 700px; }
+  .w800p {
+    width: 800px; } }
+
+@media (min-width: 960px) {
+  .w960p {
+    width: 960px; }
+  .mw960p {
+    max-width: 960px; }
+  .w1140p {
+    width: 1140px; }
+  .mw1140p {
+    max-width: 1140px; } }
 
 .wauto {
   width: auto; }
@@ -1543,14 +1540,6 @@ ul.unstyled {
 /* small screens */
 /* ------------- */
 @media (min-width: 640px) and (max-width: 959px) {
-  /* quick reset in small resolution and less */
-  .w600p,
-  .w700p,
-  .w800p,
-  .w960p,
-  .mw960p {
-    width: auto;
-    float: none; }
   /* layouts for small screens */
   .small-hidden {
     display: none !important; }
@@ -1617,11 +1606,6 @@ ul.unstyled {
     -webkit-flex-direction: column;
         -ms-flex-direction: column;
             flex-direction: column; }
-  .w300p,
-  .w400p,
-  .w500p {
-    width: auto;
-    float: none; }
   .row {
     display: block !important;
     width: 100% !important; }

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

diff --git a/sass/_override-helpers.scss b/sass/_override-helpers.scss
@@ -116,40 +116,47 @@ ul.unstyled {
   width: 300px;
 }
 
-.#{$kna-namespace}w400p {
-  width: 400px;
-}
+@include media('>=400px') {
+  .#{$kna-namespace}w400p {
+    width: 400px;
+  }
 
-.#{$kna-namespace}w500p {
-  width: 500px;
-}
+  .#{$kna-namespace}w500p {
+    width: 500px;
+  }
 
-.#{$kna-namespace}w600p {
-  width: 600px;
+  .#{$kna-namespace}w600p {
+    width: 600px;
+  }
 }
 
-.#{$kna-namespace}w700p {
-  width: 700px;
-}
+@include media('>=700px') {
 
-.#{$kna-namespace}w800p {
-  width: 800px;
-}
+  .#{$kna-namespace}w700p {
+    width: 700px;
+  }
 
-.#{$kna-namespace}w960p {
-  width: 960px;
+  .#{$kna-namespace}w800p {
+    width: 800px;
+  }
 }
 
-.#{$kna-namespace}mw960p {
-  max-width: 960px;
-}
+@include media('>=960px') {
+  .#{$kna-namespace}w960p {
+    width: 960px;
+  }
 
-.#{$kna-namespace}w1140p {
-  width: 1140px;
-}
+  .#{$kna-namespace}mw960p {
+    max-width: 960px;
+  }
+
+  .#{$kna-namespace}w1140p {
+    width: 1140px;
+  }
 
-.#{$kna-namespace}mw1140p {
-  max-width: 1140px;
+  .#{$kna-namespace}mw1140p {
+    max-width: 1140px;
+  }
 }
 
 .#{$kna-namespace}wauto {

diff --git a/sass/_override-responsive.scss b/sass/_override-responsive.scss
@@ -153,16 +153,6 @@
 
 @include media('>=small-screen', '<medium-screen') {
 
-  /* quick reset in small resolution and less */
-  .#{$kna-namespace}w600p,
-  .#{$kna-namespace}w700p,
-  .#{$kna-namespace}w800p,
-  .#{$kna-namespace}w960p,
-  .#{$kna-namespace}mw960p {
-    width: auto;
-    float: none;
-  }
-
   /* layouts for small screens */
   .#{$kna-namespace}small-hidden {
     display: none !important;
@@ -260,13 +250,6 @@
     flex-direction: column;
   }
 
-  .#{$kna-namespace}w300p,
-  .#{$kna-namespace}w400p,
-  .#{$kna-namespace}w500p {
-    width: auto;
-    float: none;
-  }
-
   .#{$kna-namespace}row {
     display: block !important;
     width: 100% !important;

diff --git a/sass/knacss.scss b/sass/knacss.scss
@@ -1,5 +1,5 @@
 /*!
-* www.KNACSS.com V5.0.0 (23 mai 2016) @author: Raphael Goetter, Alsacreations
+* www.KNACSS.com V5.0.1 (24 mai 2016) @author: Alsacreations, Raphael Goetter
 * Licence WTFPL http://www.wtfpl.net/
 */