autogrids added, prefix deleted

bower.json

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

css/02-grids.css

@@ -1,3 +1,11 @@
+/* ---------------------------------- */
+
+/* ==classic grids                    */
+
+/* .. use it when gutter size matters */
+
+/* ---------------------------------- */
+
 /* grids inspired from SUIT https://github.com/suitcss/suit */
 
 /* font-family hack explained here : https://github.com/raphaelgoetter/KNACSS/issues/37 */
@@ -26,6 +34,9 @@
 
 .grid > * > * {
   display: inline-block;
+  *display: inline;
+  *zoom: 1;
+  /* IE67 hack */
   width: 100%;
   padding-left: 20px;
   /* gutter value */
@@ -35,9 +46,6 @@
   letter-spacing: normal;
   word-spacing: normal;
   text-rendering: auto;
-  *display: inline;
-  *zoom: 1;
-  /* IE67 hack */
   font-family: Helvetica, Arial, sans-serif;
 }
 
@@ -124,3 +132,102 @@
     width: 100% !important;
   }
 }
+
+/* ---------------------------------- */
+
+/* ==autogrids                        */
+
+/* .. to automatically justify blocs  */
+
+/* ---------------------------------- */
+
+/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */
+
+[class*="autogrid"] {
+  text-align: justify;
+  font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
+  letter-spacing: -0.31em;
+  text-rendering: optimizespeed;
+}
+
+/* Opera hack */
+
+[class*="autogrid"]:-o-prefocus {
+  word-spacing: -0.43em;
+}
+
+[class*="autogrid"]:after {
+  content: "";
+  display: inline-block;
+  width: 100%;
+}
+
+[class*="autogrid"] > * {
+  display: inline-block;
+  *display: inline;
+  zoom: 1;
+  /* ie6 ie7 hack */
+  font-family: Helvetica, Arial, sans-serif;
+  letter-spacing: normal;
+  word-spacing: normal;
+  vertical-align: top;
+  text-rendering: auto;
+}
+
+.autogrid2 > * {
+  width: 49%;
+}
+
+.autogrid3 > * {
+  width: 32%;
+}
+
+.autogrid4 > * {
+  width: 23.6%;
+}
+
+.autogrid5 > * {
+  width: 19%;
+}
+
+.autogrid6 > * {
+  width: 15%;
+}
+
+.autogrid8 > * {
+  width: 10.8%;
+}
+
+.autogrid10 > * {
+  width: 9%;
+}
+
+.autogrid12 > * {
+  width: 6.4%;
+}
+
+@media (max-width: 1280px) {
+  .autogrid5 > *,
+  .autogrid6 > *,
+  .autogrid8 > *,
+  .autogrid10 > *,
+  .autogrid12 > * {
+    width: 32%;
+  }
+}
+
+@media (max-width: 768px) {
+  .autogrid5 > *,
+  .autogrid6 > *,
+  .autogrid8 > *,
+  .autogrid10 > *,
+  .autogrid12 > * {
+    width: 49%;
+  }
+}
+
+@media (max-width: 480px) {
+  [class*="autogrid"] > * {
+    width: 100%;
+  }
+}

css/06-rwd.css

@@ -147,7 +147,6 @@
     -webkit-hyphens: auto;
     -moz-hyphens: auto;
     -ms-hyphens: auto;
-    -o-hyphens: auto;
     hyphens: auto;
   }
 

css/07-flexbox.css

@@ -3,69 +3,60 @@ Tutorial: http://knacss.com/demos/tutoriel.html#flex */
 
 .flex {
   display: -webkit-box;
+  display: -webkit-flex;
   display: -moz-box;
   display: -ms-flexbox;
-  display: -webkit-flex;
   display: flex;
 }
 
 .flex-h {
   -webkit-box-orient: horizontal;
-  -moz-box-orient: horizontal;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   -webkit-box-direction: normal;
+  -webkit-flex-direction: row;
+  -moz-box-orient: horizontal;
   -moz-box-direction: normal;
+  -ms-flex-direction: row;
   flex-direction: row;
 }
 
 .flex-v {
   -webkit-box-orient: vertical;
-  -moz-box-orient: vertical;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  -moz-box-orient: vertical;
   -moz-box-direction: normal;
+  -ms-flex-direction: column;
   flex-direction: column;
 }
 
 .flex-fluid {
-  -moz-box-flex: 1;
-  -webkit-flex: 1;
-  -moz-flex: 1;
-  -ms-flex: 1;
   -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -moz-box-flex: 1;
+  -ms-flex: 1;
   flex: 1;
 }
 
 .flex-start {
-  -webkit-box-ordinal-group: -1;
+  -webkit-box-ordinal-group: 0;
+  -webkit-order: -1;
   -moz-box-ordinal-group: 0;
   -ms-flex-order: -1;
-  -webkit-order: -1;
-  -moz-order: -1;
-  -webkit-box-ordinal-group: 0;
   order: -1;
 }
 
 .flex-mid {
-  -webkit-box-ordinal-group: 1;
-  -moz-box-ordinal-group: 1;
-  -ms-flex-order: 1;
-  -webkit-order: 1;
-  -moz-order: 1;
   -webkit-box-ordinal-group: 2;
+  -webkit-order: 1;
   -moz-box-ordinal-group: 2;
+  -ms-flex-order: 1;
   order: 1;
 }
 
 .flex-end {
-  -webkit-box-ordinal-group: 42;
-  -moz-box-ordinal-group: 42;
-  -ms-flex-order: 42;
-  -webkit-order: 42;
-  -moz-order: 42;
   -webkit-box-ordinal-group: 43;
+  -webkit-order: 42;
   -moz-box-ordinal-group: 43;
+  -ms-flex-order: 42;
   order: 42;
 }

css/knacss.css

@@ -896,6 +896,14 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
   outline: 3px solid maroon;
 }
 
+/* ---------------------------------- */
+
+/* ==classic grids                    */
+
+/* .. use it when gutter size matters */
+
+/* ---------------------------------- */
+
 /* grids inspired from SUIT https://github.com/suitcss/suit */
 
 /* font-family hack explained here : https://github.com/raphaelgoetter/KNACSS/issues/37 */
@@ -924,6 +932,9 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
 
 .grid > * > * {
   display: inline-block;
+  *display: inline;
+  *zoom: 1;
+  /* IE67 hack */
   width: 100%;
   padding-left: 20px;
   /* gutter value */
@@ -933,9 +944,6 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
   letter-spacing: normal;
   word-spacing: normal;
   text-rendering: auto;
-  *display: inline;
-  *zoom: 1;
-  /* IE67 hack */
   font-family: Helvetica, Arial, sans-serif;
 }
 
@@ -1023,6 +1031,105 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
   }
 }
 
+/* ---------------------------------- */
+
+/* ==autogrids                        */
+
+/* .. to automatically justify blocs  */
+
+/* ---------------------------------- */
+
+/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */
+
+[class*="autogrid"] {
+  text-align: justify;
+  font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
+  letter-spacing: -0.31em;
+  text-rendering: optimizespeed;
+}
+
+/* Opera hack */
+
+[class*="autogrid"]:-o-prefocus {
+  word-spacing: -0.43em;
+}
+
+[class*="autogrid"]:after {
+  content: "";
+  display: inline-block;
+  width: 100%;
+}
+
+[class*="autogrid"] > * {
+  display: inline-block;
+  *display: inline;
+  zoom: 1;
+  /* ie6 ie7 hack */
+  font-family: Helvetica, Arial, sans-serif;
+  letter-spacing: normal;
+  word-spacing: normal;
+  vertical-align: top;
+  text-rendering: auto;
+}
+
+.autogrid2 > * {
+  width: 49%;
+}
+
+.autogrid3 > * {
+  width: 32%;
+}
+
+.autogrid4 > * {
+  width: 23.6%;
+}
+
+.autogrid5 > * {
+  width: 19%;
+}
+
+.autogrid6 > * {
+  width: 15%;
+}
+
+.autogrid8 > * {
+  width: 10.8%;
+}
+
+.autogrid10 > * {
+  width: 9%;
+}
+
+.autogrid12 > * {
+  width: 6.4%;
+}
+
+@media (max-width: 1280px) {
+  .autogrid5 > *,
+  .autogrid6 > *,
+  .autogrid8 > *,
+  .autogrid10 > *,
+  .autogrid12 > * {
+    width: 32%;
+  }
+}
+
+@media (max-width: 768px) {
+  .autogrid5 > *,
+  .autogrid6 > *,
+  .autogrid8 > *,
+  .autogrid10 > *,
+  .autogrid12 > * {
+    width: 49%;
+  }
+}
+
+@media (max-width: 480px) {
+  [class*="autogrid"] > * {
+    width: 100%;
+  }
+}
+
 /* ----------------------------- */
 
 /* ==tables                      */
@@ -1541,7 +1648,6 @@ input[type='submit']::-moz-focus-inner {
     -webkit-hyphens: auto;
     -moz-hyphens: auto;
     -ms-hyphens: auto;
-    -o-hyphens: auto;
     hyphens: auto;
   }
 
@@ -1699,70 +1805,61 @@ Tutorial: http://knacss.com/demos/tutoriel.html#flex */
 
 .flex {
   display: -webkit-box;
+  display: -webkit-flex;
   display: -moz-box;
   display: -ms-flexbox;
-  display: -webkit-flex;
   display: flex;
 }
 
 .flex-h {
   -webkit-box-orient: horizontal;
-  -moz-box-orient: horizontal;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
   -webkit-box-direction: normal;
+  -webkit-flex-direction: row;
+  -moz-box-orient: horizontal;
   -moz-box-direction: normal;
+  -ms-flex-direction: row;
   flex-direction: row;
 }
 
 .flex-v {
   -webkit-box-orient: vertical;
-  -moz-box-orient: vertical;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
   -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  -moz-box-orient: vertical;
   -moz-box-direction: normal;
+  -ms-flex-direction: column;
   flex-direction: column;
 }
 
 .flex-fluid {
-  -moz-box-flex: 1;
-  -webkit-flex: 1;
-  -moz-flex: 1;
-  -ms-flex: 1;
   -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -moz-box-flex: 1;
+  -ms-flex: 1;
   flex: 1;
 }
 
 .flex-start {
-  -webkit-box-ordinal-group: -1;
+  -webkit-box-ordinal-group: 0;
+  -webkit-order: -1;
   -moz-box-ordinal-group: 0;
   -ms-flex-order: -1;
-  -webkit-order: -1;
-  -moz-order: -1;
-  -webkit-box-ordinal-group: 0;
   order: -1;
 }
 
 .flex-mid {
-  -webkit-box-ordinal-group: 1;
-  -moz-box-ordinal-group: 1;
-  -ms-flex-order: 1;
-  -webkit-order: 1;
-  -moz-order: 1;
   -webkit-box-ordinal-group: 2;
+  -webkit-order: 1;
   -moz-box-ordinal-group: 2;
+  -ms-flex-order: 1;
   order: 1;
 }
 
 .flex-end {
-  -webkit-box-ordinal-group: 42;
-  -moz-box-ordinal-group: 42;
-  -ms-flex-order: 42;
-  -webkit-order: 42;
-  -moz-order: 42;
   -webkit-box-ordinal-group: 43;
+  -webkit-order: 42;
   -moz-box-ordinal-group: 43;
+  -ms-flex-order: 42;
   order: 42;
 }
 

less/01-base.less

@@ -10,9 +10,7 @@
 
 /* switching box model for all elements */
 * {
-	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
-	   -moz-box-sizing: border-box;
-	        box-sizing: border-box;
 }
 
 /* soft reset */
@@ -45,7 +43,6 @@ figure {
 }
 
 
-
 /* ----------------------------- */
 /* == typography                 */
 /* ----------------------------- */
@@ -304,7 +301,6 @@ body > script {display: none !important;}
 img.left {
 	margin-right: 1em;
 }
-
 /* right elements */
 .right {
 	float: right;
@@ -312,11 +308,9 @@ img.left {
 img.right {
 	margin-left: 1em;
 }
-
 img.left, img.right {
 	margin-bottom: 5px;
 }
-
 .center    { margin-left: auto; margin-right: auto; }
 .txtleft   { text-align: left; }
 .txtright  { text-align: right; }

less/02-grids.less

@@ -1,4 +1,10 @@
 @import "00-config";
+
+/* ---------------------------------- */
+/* ==classic grids                    */
+/* .. use it when gutter size matters */
+/* ---------------------------------- */
+
 /* grids inspired from SUIT https://github.com/suitcss/suit */
 /* font-family hack explained here : https://github.com/raphaelgoetter/KNACSS/issues/37 */
 
@@ -21,6 +27,7 @@
 }
 .grid > * > * {
 	display: inline-block;
+	*display: inline; *zoom: 1; /* IE67 hack */
 	width: 100%;
 	padding-left: @gutter; /* gutter value */
 	margin-left: 0;
@@ -29,7 +36,6 @@
 	letter-spacing: normal;
 	word-spacing: normal;
 	text-rendering: auto;
-	*display: inline; *zoom: 1; /* IE67 hack */
 	font-family: @fontstack1;
 }
 .grid2 > * {width: 50%;}
@@ -71,3 +77,64 @@
 @media (max-width: @tinyscreen) {
 	.grid > * > * {width: 100% !important}
 }
+
+
+/* ---------------------------------- */
+/* ==autogrids                        */
+/* .. to automatically justify blocs  */
+/* ---------------------------------- */
+
+/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */
+
+[class*="autogrid"] {
+	text-align: justify;
+	font-family: @fontstack3;
+	letter-spacing: -0.31em;
+	text-rendering: optimizespeed;
+}
+/* Opera hack */
+[class*="autogrid"]:-o-prefocus {
+	word-spacing: -0.43em;
+}
+[class*="autogrid"]:after {
+	content: "";
+	display: inline-block;
+	width: 100%; 
+}
+[class*="autogrid"] > * {
+	display: inline-block;
+	*display: inline; zoom: 1; /* ie6 ie7 hack */
+	font-family: @fontstack1;
+	letter-spacing: normal;
+	word-spacing: normal;
+	vertical-align: top;
+	text-rendering: auto;
+}
+.autogrid2 > * {width: 49%}
+.autogrid3 > * {width: 32%}
+.autogrid4 > * {width: 23.6%}
+.autogrid5 > * {width: 19%}
+.autogrid6 > * {width: 15%}
+.autogrid8 > * {width: 10.8%}
+.autogrid10 > * {width: 9%}
+.autogrid12 > * {width: 6.4%}
+
+@media (max-width: @largescreen) {
+	.autogrid5 > *,
+	.autogrid6 > *,
+	.autogrid8 > *,
+	.autogrid10 > *,
+	.autogrid12 > * {width: 32%}
+}
+
+@media (max-width: @smallscreen) {
+	.autogrid5 > *,
+	.autogrid6 > *,
+	.autogrid8 > *,
+	.autogrid10 > *,
+	.autogrid12 > * {width: 49%}
+}
+
+@media (max-width: @tinyscreen) {
+	[class*="autogrid"] > * {width: 100%}
+}

less/06-rwd.less

@@ -90,10 +90,6 @@
 	/* you shall not pass */
 	div, textarea, table, td, th, code, pre, samp {
 		word-wrap: break-word;
-		-webkit-hyphens: auto;
-		-moz-hyphens: auto;
-		-ms-hyphens: auto;
-		-o-hyphens: auto;
 		hyphens: auto;
 	}
 

less/07-flexbox.less

@@ -2,54 +2,23 @@
 /* flexbox layout 
 Tutorial: http://knacss.com/demos/tutoriel.html#flex */
 .flex {
-	display : -webkit-box;
-	display : -moz-box;
-	display : -ms-flexbox;
-	display : -webkit-flex;
 	display : flex;
 }
 .flex-h {
-	-webkit-box-orient: horizontal;
-	-moz-box-orient: horizontal;
-	-webkit-flex-direction: row;
-	-ms-flex-direction: row;
 	flex-direction: row;
 }
 .flex-v {
-	-webkit-box-orient: vertical;
-	-moz-box-orient: vertical;
-	-webkit-flex-direction: column;
-	-ms-flex-direction: column;
 	flex-direction: column;
 }
 .flex-fluid {
-	-moz-box-flex: 1;
-	-webkit-flex: 1;
-	-moz-flex: 1;
-	-ms-flex: 1;
 	flex: 1;
 }
 .flex-start {
-	-webkit-box-ordinal-group: -1;
-	-moz-box-ordinal-group: 0;
-	-ms-flex-order : -1;
-	-webkit-order : -1;
-	-moz-order : -1;
 	order : -1;
 }
 .flex-mid {
-	-webkit-box-ordinal-group: 1;
-	-moz-box-ordinal-group: 1;
-	-ms-flex-order : 1;
-	-webkit-order : 1;
-	-moz-order : 1;
 	order : 1;
 }
 .flex-end {
-	-webkit-box-ordinal-group: 42;
-	-moz-box-ordinal-group: 42;
-	-ms-flex-order : 42;
-	-webkit-order : 42;
-	-moz-order : 42;
 	order : 42;
 }