spacers units fixed, RWD .medium added, .clearfix border-collapse

bower.json

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

less/_00-config.less

@@ -29,15 +29,15 @@
 @primary-background		: #fff; // primary elements background color
 @secondary-background	: #fff; // secondary elements background color
 
-// spacings
+// spacings (choose unit you prefer)
-@tiny-value				: 0.5rem; // tiny value for margins / paddings
+@tiny-value				: 5px; // tiny value for margins / paddings
-@small-value			: 1rem; // small value for margins / paddings
+@small-value			: 10px; // small value for margins / paddings
-@medium-value			: 2rem; // medium value for margins / paddings
+@medium-value			: 20px; // medium value for margins / paddings
-@large-value			: 4rem; // large value for margins / paddings
+@large-value			: 40px; // large value for margins / paddings
-@extra-large-value		: 6rem; // extra large value for margins / paddings
+@extra-large-value		: 80px; // extra large value for margins / paddings
-@ultra-large-value		: 10rem; // ultra large value for margins / paddings
+@ultra-large-value		: 160px; // ultra large value for margins / paddings
 
-// breakpoints
+// breakpoints (choose unit you prefer)
 @tiny-screen			: 320px; // tiny screens media query
 @small-screen			: 480px; // small screens media query
 @medium-screen			: 768px; // medium screens media query
@@ -45,7 +45,7 @@
 @extra-large-screen		: 1280px; // extra large screens media query
 @ultra-large-screen		: 1600px; // ultra large screens media query
 
-// misc
+// misc (choose unit you prefer)
 @gutter		: 20px; // gutter value for grid layouts. Unit can be: %, px, em, rem
 
 // booleans

less/_01-base.less

@@ -1,5 +1,5 @@
 /*!
-* www.KNACSS.com V3.0.7 (2014-08-21) @author: Raphael Goetter, Alsacreations
+* www.KNACSS.com V3.0.8 (2014-08-22) @author: Raphael Goetter, Alsacreations
 * Licence WTFPL http://www.wtfpl.net/
 */
 
@@ -297,6 +297,7 @@ table {
 		content: "";
 		display: table;
 		clear: both;
+		border-collapse: collapse;
 	}
 }
 
@@ -506,32 +507,26 @@ img.end {
 	}
 	
 	.mas { 
-		margin: @small-value * @base-font-size * 1px; // fallback ie678
 		margin: @small-value; 
 	}
 	
 	.mam { 
-		margin: @medium-value * @base-font-size * 1px; // fallback ie678
 		margin: @medium-value; 
 	}
 	
 	.mal { 
-		margin: @large-value * @base-font-size * 1px; // fallback ie678
 		margin: @large-value; 
 	}
 	
 	.pas { 
-		padding: @small-value * @base-font-size * 1px; // fallback ie678
 		padding: @small-value; 
 	}
 	
 	.pam { 
-		padding: @medium-value * @base-font-size * 1px; // fallback ie678
 		padding: @medium-value; 
 	}
 	
 	.pal { 
-		padding: @large-value * @base-font-size * 1px; // fallback ie678
 		padding: @large-value; 
 	}
 	
@@ -540,17 +535,14 @@ img.end {
 	}
 	
 	.mts { 
-		margin-top: @small-value * @base-font-size * 1px; // fallback ie678
 		margin-top: @small-value; 
 	}
 	
 	.mtm { 
-		margin-top: @medium-value * @base-font-size * 1px; // fallback ie678
 		margin-top: @medium-value; 
 	}
 	
 	.mtl { 
-		margin-top: @large-value * @base-font-size * 1px; // fallback ie678
 		margin-top: @large-value; 
 	}
 	
@@ -559,17 +551,14 @@ img.end {
 	}
 	
 	.mrs { 
-		margin-right: @small-value * @base-font-size * 1px; // fallback ie678
 		margin-right: @small-value; 
 	}
 	
 	.mrm { 
-		margin-right: @medium-value * @base-font-size * 1px; // fallback ie678
 		margin-right: @medium-value; 
 	}
 	
 	.mrl { 
-		margin-right: @large-value * @base-font-size * 1px; // fallback ie678
 		margin-right: @large-value; 
 	}
 	
@@ -578,17 +567,14 @@ img.end {
 	}
 	
 	.mbs { 
-		margin-bottom: @small-value * @base-font-size * 1px; // fallback ie678
 		margin-bottom: @small-value; 
 	}
 	
 	.mbm { 
-		margin-bottom: @medium-value * @base-font-size * 1px; // fallback ie678
 		margin-bottom: @medium-value; 
 	}
 	
 	.mbl { 
-		margin-bottom: @large-value * @base-font-size * 1px; // fallback ie678
 		margin-bottom: @large-value; 
 	}
 	
@@ -597,17 +583,14 @@ img.end {
 	}
 	
 	.mls { 
-		margin-left: @small-value * @base-font-size * 1px; // fallback ie678
 		margin-left: @small-value; 
 	}
 	
 	.mlm { 
-		margin-left: @medium-value * @base-font-size * 1px; // fallback ie678
 		margin-left: @medium-value; 
 	}
 	
 	.mll { 
-		margin-left: @large-value * @base-font-size * 1px; // fallback ie678
 		margin-left: @large-value; 
 	}
 
@@ -616,17 +599,14 @@ img.end {
 	}
 	
 	.pts { 
-		padding-top: @small-value * @base-font-size * 1px; // fallback ie678
 		padding-top: @small-value; 
 	}
 	
 	.ptm { 
-		padding-top: @medium-value * @base-font-size * 1px; // fallback ie678
 		padding-top: @medium-value; 
 	}
 	
 	.ptl { 
-		padding-top: @large-value * @base-font-size * 1px; // fallback ie678
 		padding-top: @large-value; 
 	}
 	
@@ -635,17 +615,14 @@ img.end {
 	}
 	
 	.prs { 
-		padding-right: @small-value * @base-font-size * 1px; // fallback ie678
 		padding-right: @small-value; 
 	}
 	
 	.prm { 
-		padding-right: @medium-value * @base-font-size * 1px; // fallback ie678
 		padding-right: @medium-value; 
 	}
 	
 	.prl { 
-		padding-right: @large-value * @base-font-size * 1px; // fallback ie678
 		padding-right: @large-value; 
 	}
 	
@@ -654,17 +631,14 @@ img.end {
 	}
 	
 	.pbs { 
-		padding-bottom: @small-value * @base-font-size * 1px; // fallback ie678
 		padding-bottom: @small-value; 
 	}
 	
 	.pbm { 
-		padding-bottom: @medium-value * @base-font-size * 1px; // fallback ie678
 		padding-bottom: @medium-value; 
 	}
 	
 	.pbl { 
-		padding-bottom: @large-value * @base-font-size * 1px; // fallback ie678
 		padding-bottom: @large-value; 
 	}
 	
@@ -673,17 +647,14 @@ img.end {
 	}
 	
 	.pls { 
-		padding-left: @small-value * @base-font-size * 1px; // fallback ie678
 		padding-left: @small-value; 
 	}
 	
 	.plm { 
-		padding-left: @medium-value * @base-font-size * 1px; // fallback ie678
 		padding-left: @medium-value; 
 	}
 	
 	.pll { 
-		padding-left: @large-value * @base-font-size * 1px; // fallback ie678
 		padding-left: @large-value; 
 	}
 	

less/_06-rwd.less

@@ -2,7 +2,7 @@
 /* ==desktop and HD devices      */
 /* ----------------------------- */
 
-@media (min-width: @small-screen) {
+@media (min-width: @medium-screen) {
 	/* rules for big resources and big screens like: background-images, font-faces, etc. */
 }
 
@@ -11,7 +11,7 @@
 }
 
 /* ---------------------------------- */
-/* ==Responsive large / small / tiny  */
+/* ==Responsive large                 */
 /* ---------------------------------- */
 
 @media (min-width: @large-screen) {
@@ -100,7 +100,83 @@
 	}
 }
 
-@media (max-width: @small-screen) {
+/* ---------------------------------- */
+/* ==Responsive medium                */
+/* ---------------------------------- */
+
+@media (min-width: @medium-screen) and (max-width: (@large-screen - 1)) {
+
+	/* layouts for medium screens */
+	.medium-hidden { 
+		display: none !important; 
+	}
+	
+	.medium-visible { 
+		display: block !important; 
+	}
+	
+	.medium-no-float {
+		float: none; 
+	}
+	
+	.medium-inbl {
+		display: inline-block;
+		float: none;
+		vertical-align: top;
+	}
+	.medium-row {
+		display: table;
+		table-layout: fixed;
+		width: 100% !important;
+	}
+	.medium-col {
+		display: table-cell;
+		vertical-align: top;
+	}
+
+	/* widths for medium screens */
+	.medium-w25 { 
+		width: 25% !important; 
+	}
+	
+	.medium-w33 { 
+		width: 33.3333% !important; 
+	}
+	
+	.medium-w50 { 
+		width: 50% !important; 
+	}
+	
+	.medium-w66 { 
+		width: 66.6666% !important; 
+	}
+	
+	.medium-w75 { 
+		width: 75% !important; 
+	}
+	
+	.medium-w100,
+	.medium-wauto {
+		display: block !important;
+		float: none !important;
+		clear: none !important;
+		width: auto !important;
+		margin-left: 0 !important;
+		margin-right: 0 !important;
+		border: 0;		
+	}
+
+	/* margins for medium screens */
+	.medium-man { 
+		margin: 0 !important; 
+	}
+}
+
+/* ---------------------------------- */
+/* ==Responsive small                 */
+/* ---------------------------------- */
+
+@media (max-width: @small-screen) and (max-width: (@medium-screen - 1)) {
 	
 	/* quick small resolution reset */
 	.mod,
@@ -215,7 +291,11 @@
 	}
 }
 
-@media (max-width: @tiny-screen) {
+/* ---------------------------------- */
+/* ==Responsive tiny                  */
+/* ---------------------------------- */
+
+@media (max-width: @tiny-screen) and (max-width: (@small-screen - 1)) {
 	
 	.w300p,
 	.w400p,

sass/_00-config.scss

@@ -29,15 +29,15 @@ $base-background		: #fff; // body background color
 $primary-background		: #fff; // primary elements background color
 $secondary-background	: #fff; // secondary elements background color
 
-// spacings
+// spacings (choose unit you prefer)
-$tiny-value				: 0.5rem; // tiny value for margins / paddings
+$tiny-value				: 5px; // tiny value for margins / paddings
-$small-value			: 1rem; // small value for margins / paddings
+$small-value			: 10px; // small value for margins / paddings
-$medium-value			: 2rem; // medium value for margins / paddings
+$medium-value			: 20px; // medium value for margins / paddings
-$large-value			: 4rem; // large value for margins / paddings
+$large-value			: 40px; // large value for margins / paddings
-$extra-large-value		: 6rem; // extra large value for margins / paddings
+$extra-large-value		: 80px; // extra large value for margins / paddings
-$ultra-large-value		: 10rem; // ultra large value for margins / paddings
+$ultra-large-value		: 160px; // ultra large value for margins / paddings
 
-// breakpoints
+// breakpoints (choose unit you prefer)
 $tiny-screen			: 320px; // tiny screens media query
 $small-screen			: 480px; // small screens media query
 $medium-screen			: 768px; // medium screens media query
@@ -45,7 +45,7 @@ $large-screen			: 1024px; // large screens media query
 $extra-large-screen		: 1280px; // extra large screens media query
 $ultra-large-screen		: 1600px; // ultra large screens media query
 
-// misc
+// misc (choose unit you prefer)
 $gutter		: 20px; // gutter value for grid layouts. Unit can be: %, px, em, rem
 
 // booleans

sass/_01-base.scss

@@ -1,5 +1,5 @@
 /*!
-* www.KNACSS.com V3.0.7 (2014-08-21) @author: Raphael Goetter, Alsacreations (with help from Hugo Giraudel)
+* www.KNACSS.com V3.0.8 (2014-08-22) @author: Raphael Goetter, Alsacreations (with help from Hugo Giraudel)
 * Licence WTFPL http://www.wtfpl.net/
 */
 
@@ -291,6 +291,7 @@ table {
 		content: "";
 		display: table;
 		clear: both;
+		border-collapse: collapse;
 	}
 }
 

sass/_06-rwd.scss

@@ -2,7 +2,7 @@
 /* ==desktop and HD devices      */
 /* ----------------------------- */
 
-@media (min-width: $small-screen) {
+@media (min-width: $medium-screen) {
 /* rules for big resources and big screens like: background-images, font-faces, etc. */
 }
 
@@ -11,7 +11,7 @@
 }
 
 /* ---------------------------------- */
-/* ==Responsive large / small / tiny  */
+/* ==Responsive large                 */
 /* ---------------------------------- */
 
 @media (min-width: $large-screen) {
@@ -100,7 +100,83 @@
 	}
 }
 
-@media (max-width: $small-screen) {
+/* ---------------------------------- */
+/* ==Responsive medium                */
+/* ---------------------------------- */
+
+@media (min-width: $medium-screen) and (max-width: ($large-screen - 1))  {
+
+	/* layouts for medium screens */
+	.medium-hidden { 
+		display: none !important; 
+	}
+	
+	.medium-visible { 
+		display: block !important; 
+	}
+	
+	.medium-no-float {
+		float: none; 
+	}
+	
+	.medium-inbl {
+		display: inline-block;
+		float: none;
+		vertical-align: top;
+	}
+	.medium-row {
+		display: table;
+		table-layout: fixed;
+		width: 100% !important;
+	}
+	.medium-col {
+		display: table-cell;
+		vertical-align: top;
+	}
+
+	/* widths for medium screens */
+	.medium-w25 { 
+		width: 25% !important; 
+	}
+	
+	.medium-w33 { 
+		width: 33.3333% !important; 
+	}
+	
+	.medium-w50 { 
+		width: 50% !important; 
+	}
+	
+	.medium-w66 { 
+		width: 66.6666% !important; 
+	}
+	
+	.medium-w75 { 
+		width: 75% !important; 
+	}
+	
+	.medium-w100,
+	.medium-wauto {
+		display: block !important;
+		float: none !important;
+		clear: none !important;
+		width: auto !important;
+		margin-left: 0 !important;
+		margin-right: 0 !important;
+		border: 0;		
+	}
+
+	/* margins for medium screens */
+	.medium-man { 
+		margin: 0 !important; 
+	}
+}
+
+/* ---------------------------------- */
+/* ==Responsive small                 */
+/* ---------------------------------- */
+
+@media (max-width: $small-screen) and (max-width: ($medium-screen - 1)) {
 	
 	/* quick small resolution reset */
 	.mod,
@@ -215,7 +291,11 @@
 	}
 }
 
-@media (max-width: $tiny-screen) {
+/* ---------------------------------- */
+/* ==Responsive tiny                  */
+/* ---------------------------------- */
+
+@media (max-width: $tiny-screen) and (max-width: ($small-screen - 1)) {
 	
 	.w300p,
 	.w400p,