helpers classes now on a separate file

css/knacss-unminified.css

@@ -1,5 +1,5 @@
 /*!
-* www.KNACSS.com V3.0.9 (2014-09-12) @author: Raphael Goetter, Alsacreations
+* www.KNACSS.com V3.1.0 (2014-10-20) @author: Raphael Goetter, Alsacreations
 * Licence WTFPL http://www.wtfpl.net/
 */
 /* ----------------------------- */
@@ -307,6 +307,10 @@ img.end {
 .txtcenter {
   text-align: center;
 }
+/* ---------------------------------- */
+/* ==visual helpers                   */
+/* .. use them with parcimony !       */
+/* ---------------------------------- */
 /* blocks widths (percentage and pixels) */
 .w10 {
   width: 10%;
@@ -396,10 +400,10 @@ img.end {
   width: auto;
 }
 /* spacing helpers
-	p,m = padding,margin
+p,m = padding,margin
-	a,t,r,b,l = all,top,right,bottom,left
+a,t,r,b,l = all,top,right,bottom,left
-	s,m,l,n = small, medium, large, none
+s,m,l,n = small, medium, large, none
-	*/
+*/
 .man {
   margin: 0;
 }
@@ -905,6 +909,52 @@ input[type='submit']::-moz-focus-inner {
   font-size: 1.6em;
   top: -0.05em;
 }
+/* flexbox layout 
+Tutorial: http://knacss.com/demos/tutoriel.html#flex */
+.flex {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+.flex-h {
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+.flex-v {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+.flex-fluid {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+.flex-start {
+  -webkit-box-ordinal-group: 0;
+  -webkit-order: -1;
+  -ms-flex-order: -1;
+  order: -1;
+}
+.flex-mid {
+  -webkit-box-ordinal-group: 2;
+  -webkit-order: 1;
+  -ms-flex-order: 1;
+  order: 1;
+}
+.flex-end {
+  -webkit-box-ordinal-group: 43;
+  -webkit-order: 42;
+  -ms-flex-order: 42;
+  order: 42;
+}
 /* ----------------------------- */
 /* ==desktop and HD devices      */
 /* ----------------------------- */
@@ -1238,52 +1288,6 @@ input[type='submit']::-moz-focus-inner {
     width: 100% !important;
   }
 }
-/* flexbox layout 
-Tutorial: http://knacss.com/demos/tutoriel.html#flex */
-.flex {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-.flex-h {
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-.flex-v {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-.flex-fluid {
-  -webkit-box-flex: 1;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-.flex-start {
-  -webkit-box-ordinal-group: 0;
-  -webkit-order: -1;
-  -ms-flex-order: -1;
-  order: -1;
-}
-.flex-mid {
-  -webkit-box-ordinal-group: 2;
-  -webkit-order: 1;
-  -ms-flex-order: 1;
-  order: 1;
-}
-.flex-end {
-  -webkit-box-ordinal-group: 43;
-  -webkit-order: 42;
-  -ms-flex-order: 42;
-  order: 42;
-}
 /* quick print reset */
 @media print {
   * {
@@ -1360,7 +1364,7 @@ Tutorial: http://knacss.com/demos/tutoriel.html#flex */
   }
 }
 /* ----------------------------- */
-/* ==booleans                    */
+/* ==skip-hyphens                */
 /* ----------------------------- */
 /* styling skip links */
 .skip-links {

less/_01-base.less

@@ -368,294 +368,3 @@ img.end {
 .txtcenter {
 	text-align: center;
 }
-
-// width helpers boolean
-& when (@enable-helpers-width = true) {
-	/* blocks widths (percentage and pixels) */
-	.w10 {
-		width: 10%;
-	}
-	
-	.w20 {
-		width: 20%;
-	}
-	
-	.w25 { 
-		width: 25%; 
-	}
-	
-	.w30 { 
-		width: 30%; 
-	}
-	
-	.w33 { 
-		width: 33.3333%; 
-	}
-	
-	.w40 { 
-		width: 40%; 
-	}
-	
-	.w50 { 
-		width: 50%; 
-	}
-	
-	.w60 { 
-		width: 60%; 
-	}
-	
-	.w66 { 
-		width: 66.6666%; 
-	}
-	
-	.w70 { 
-		width: 70%; 
-	}
-	
-	.w75 { 
-		width: 75%; 
-	}
-	
-	.w80 { 
-		width: 80%; 
-	}
-	
-	.w90 { 
-		width: 90%; 
-	}
-	
-	.w100   { 
-		width: 100%; 
-	}
-	
-
-	.w50p   { 
-		width: 50px; 
-	}
-	
-	.w100p  { 
-		width: 100px; 
-	}
-	
-	.w150p  { 
-		width: 150px; 
-	}
-	
-	.w200p  { 
-		width: 200px; 
-	}
-	
-	.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; 
-	}
-	
-	.wauto  { 
-		width: auto; 
-	}
-	
-}
-
-// spacing helpers boolean
-& when (@enable-helpers-spacing = true) {
-	/* spacing helpers
-	p,m = padding,margin
-	a,t,r,b,l = all,top,right,bottom,left
-	s,m,l,n = small, medium, large, none
-	*/
-	.man { 
-		margin: 0; 
-	}
-	
-	.pan { 
-		padding: 0; 
-	}
-	
-	.mas { 
-		margin: @small-value; 
-	}
-	
-	.mam { 
-		margin: @medium-value; 
-	}
-	
-	.mal { 
-		margin: @large-value; 
-	}
-	
-	.pas { 
-		padding: @small-value; 
-	}
-	
-	.pam { 
-		padding: @medium-value; 
-	}
-	
-	.pal { 
-		padding: @large-value; 
-	}
-	
-	.mtn { 
-		margin-top: 0; 
-	}
-	
-	.mts { 
-		margin-top: @small-value; 
-	}
-	
-	.mtm { 
-		margin-top: @medium-value; 
-	}
-	
-	.mtl { 
-		margin-top: @large-value; 
-	}
-	
-	.mrn { 
-		margin-right: 0; 
-	}
-	
-	.mrs { 
-		margin-right: @small-value; 
-	}
-	
-	.mrm { 
-		margin-right: @medium-value; 
-	}
-	
-	.mrl { 
-		margin-right: @large-value; 
-	}
-	
-	.mbn { 
-		margin-bottom: 0; 
-	}
-	
-	.mbs { 
-		margin-bottom: @small-value; 
-	}
-	
-	.mbm { 
-		margin-bottom: @medium-value; 
-	}
-	
-	.mbl { 
-		margin-bottom: @large-value; 
-	}
-	
-	.mln { 
-		margin-left: 0; 
-	}
-	
-	.mls { 
-		margin-left: @small-value; 
-	}
-	
-	.mlm { 
-		margin-left: @medium-value; 
-	}
-	
-	.mll { 
-		margin-left: @large-value; 
-	}
-
-	.ptn { 
-		padding-top: 0; 
-	}
-	
-	.pts { 
-		padding-top: @small-value; 
-	}
-	
-	.ptm { 
-		padding-top: @medium-value; 
-	}
-	
-	.ptl { 
-		padding-top: @large-value; 
-	}
-	
-	.prn { 
-		padding-right: 0; 
-	}
-	
-	.prs { 
-		padding-right: @small-value; 
-	}
-	
-	.prm { 
-		padding-right: @medium-value; 
-	}
-	
-	.prl { 
-		padding-right: @large-value; 
-	}
-	
-	.pbn { 
-		padding-bottom: 0; 
-	}
-	
-	.pbs { 
-		padding-bottom: @small-value; 
-	}
-	
-	.pbm { 
-		padding-bottom: @medium-value; 
-	}
-	
-	.pbl { 
-		padding-bottom: @large-value; 
-	}
-	
-	.pln { 
-		padding-left: 0; 
-	}
-	
-	.pls { 
-		padding-left: @small-value; 
-	}
-	
-	.plm { 
-		padding-left: @medium-value; 
-	}
-	
-	.pll { 
-		padding-left: @large-value; 
-	}
-	
-}

less/_02-helpers.less

@@ -0,0 +1,287 @@
+/* ---------------------------------- */
+/* ==visual helpers                   */
+/* .. use them with parcimony !       */
+/* ---------------------------------- */
+
+/* blocks widths (percentage and pixels) */
+.w10 {
+	width: 10%;
+}
+
+.w20 {
+	width: 20%;
+}
+
+.w25 { 
+	width: 25%; 
+}
+
+.w30 { 
+	width: 30%; 
+}
+
+.w33 { 
+	width: 33.3333%; 
+}
+
+.w40 { 
+	width: 40%; 
+}
+
+.w50 { 
+	width: 50%; 
+}
+
+.w60 { 
+	width: 60%; 
+}
+
+.w66 { 
+	width: 66.6666%; 
+}
+
+.w70 { 
+	width: 70%; 
+}
+
+.w75 { 
+	width: 75%; 
+}
+
+.w80 { 
+	width: 80%; 
+}
+
+.w90 { 
+	width: 90%; 
+}
+
+.w100   { 
+	width: 100%; 
+}
+
+
+.w50p   { 
+	width: 50px; 
+}
+
+.w100p  { 
+	width: 100px; 
+}
+
+.w150p  { 
+	width: 150px; 
+}
+
+.w200p  { 
+	width: 200px; 
+}
+
+.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; 
+}
+
+.wauto  { 
+	width: auto; 
+}
+
+/* spacing helpers
+p,m = padding,margin
+a,t,r,b,l = all,top,right,bottom,left
+s,m,l,n = small, medium, large, none
+*/
+.man { 
+	margin: 0; 
+}
+
+.pan { 
+	padding: 0; 
+}
+
+.mas { 
+	margin: @small-value; 
+}
+
+.mam { 
+	margin: @medium-value; 
+}
+
+.mal { 
+	margin: @large-value; 
+}
+
+.pas { 
+	padding: @small-value; 
+}
+
+.pam { 
+	padding: @medium-value; 
+}
+
+.pal { 
+	padding: @large-value; 
+}
+
+.mtn { 
+	margin-top: 0; 
+}
+
+.mts { 
+	margin-top: @small-value; 
+}
+
+.mtm { 
+	margin-top: @medium-value; 
+}
+
+.mtl { 
+	margin-top: @large-value; 
+}
+
+.mrn { 
+	margin-right: 0; 
+}
+
+.mrs { 
+	margin-right: @small-value; 
+}
+
+.mrm { 
+	margin-right: @medium-value; 
+}
+
+.mrl { 
+	margin-right: @large-value; 
+}
+
+.mbn { 
+	margin-bottom: 0; 
+}
+
+.mbs { 
+	margin-bottom: @small-value; 
+}
+
+.mbm { 
+	margin-bottom: @medium-value; 
+}
+
+.mbl { 
+	margin-bottom: @large-value; 
+}
+
+.mln { 
+	margin-left: 0; 
+}
+
+.mls { 
+	margin-left: @small-value; 
+}
+
+.mlm { 
+	margin-left: @medium-value; 
+}
+
+.mll { 
+	margin-left: @large-value; 
+}
+
+.ptn { 
+	padding-top: 0; 
+}
+
+.pts { 
+	padding-top: @small-value; 
+}
+
+.ptm { 
+	padding-top: @medium-value; 
+}
+
+.ptl { 
+	padding-top: @large-value; 
+}
+
+.prn { 
+	padding-right: 0; 
+}
+
+.prs { 
+	padding-right: @small-value; 
+}
+
+.prm { 
+	padding-right: @medium-value; 
+}
+
+.prl { 
+	padding-right: @large-value; 
+}
+
+.pbn { 
+	padding-bottom: 0; 
+}
+
+.pbs { 
+	padding-bottom: @small-value; 
+}
+
+.pbm { 
+	padding-bottom: @medium-value; 
+}
+
+.pbl { 
+	padding-bottom: @large-value; 
+}
+
+.pln { 
+	padding-left: 0; 
+}
+
+.pls { 
+	padding-left: @small-value; 
+}
+
+.plm { 
+	padding-left: @medium-value; 
+}
+
+.pll { 
+	padding-left: @large-value; 
+}

less/_10-booleans.less

@@ -6,7 +6,8 @@
 
 .skip-links {
 	position: absolute;
-	a {
+	
+	& a {
 		position: absolute;
 		overflow: hidden;
 		clip: rect(1px, 1px, 1px, 1px);
@@ -14,7 +15,8 @@
 		background: black;
 		color: white;
 		text-decoration: none;
-		&: focus {
+		
+		&:focus {
 			position: static;
 			overflow: visible;
 			clip: auto;

less/knacss.less

@@ -3,20 +3,21 @@
 @import "_00-config";
 
 // LESS base styles
-@import "_01-base";
+@import "_01-base"; // reset, config and basic layout
 
 // LESS files : chose the ones you need
-@import "_02-grids";
+@import "_02-helpers"; // width and spacers visually classes
-@import "_03-tables"; 
+@import "_03-grids"; // grids and autogrids
-@import "_04-forms";
+@import "_04-tables"; 
-@import "_05-icons";
+@import "_05-forms";
-@import "_06-rwd";
+@import "_06-icons"; // UTF-8 icons
-@import "_07-flexbox"; 
+@import "_07-flexbox";
-@import "_08-print";
+@import "_08-rwd"; // Responsive Web Design helpers
-@import "_09-booleans";
+@import "_09-print";
-@import "_10-gmaps";
+@import "_10-booleans"; // skip links and hyphens
-@import "_11-ie";
+@import "_11-gmaps"; // Google maps bugs fix
-@import "_12-styling";
+@import "_12-ie"; // IE6, IE7, IE8 support
+@import "_13-styling"; // minor stylings 
 
 /* ----------------------------- */
 /* ==own stylesheet              */

sass/_01-base.scss

@@ -363,293 +363,3 @@ img.end {
 .txtcenter { 
 	text-align: center; 
 }
-
-
-// width helpers boolean
-@if $enable-helpers-width == true {
-	/* blocks widths (percentage and pixels) */
-	.w10    { 
-		width: 10%; 
-	}
-	
-	.w20    { 
-		width: 20%; 
-	}
-	
-	.w25    { 
-		width: 25%; 
-	}
-	
-	.w30    { 
-		width: 30%; 
-	}
-	
-	.w33    { 
-		width: 33.3333%; 
-	}
-	
-	.w40    { 
-		width: 40%; 
-	}
-	
-	.w50    { 
-		width: 50%; 
-	}
-	
-	.w60    { 
-		width: 60%; 
-	}
-	
-	.w66    { 
-		width: 66.6666%; 
-	}
-	
-	.w70    { 
-		width: 70%; 
-	}
-	
-	.w75    { 
-		width: 75%; 
-	}
-	
-	.w80    { 
-		width: 80%; 
-	}
-	
-	.w90    { 
-		width: 90%; 
-	}
-	
-	.w100   { 
-		width: 100%; 
-	}
-
-	.w50p   { 
-		width: 50px; 
-	}
-	
-	.w100p  { 
-		width: 100px; 
-	}
-	
-	.w150p  { 
-		width: 150px; 
-	}
-	
-	.w200p  { 
-		width: 200px; 
-	}
-	
-	.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; 
-	}
-	
-	.wauto  { 
-		width: auto; 
-	}
-}
-
-
-// spacing helpers boolean
-@if $enable-helpers-spacing == true {
-	/* spacing helpers
-	p,m = padding,margin
-	a,t,r,b,l = all,top,right,bottom,left
-	s,m,l,n = small, medium, large, none
-	*/
-	.man { 
-		margin: 0; 
-	}
-	
-	.pan { 
-		padding: 0; 
-	}
-	
-	.mas { 
-		margin: $small-value; 
-	}
-	
-	.mam {
-		margin: $medium-value; 
-	}
-	
-	.mal { 
-		margin: $large-value; 
-	}
-	
-	.pas { 
-		padding: $small-value; 
-	}
-	
-	.pam { 
-		padding: $medium-value; 
-	}
-	
-	.pal { 
-		padding: $large-value; 
-	}
-
-	.mtn { 
-		margin-top: 0; 
-	}
-	
-	.mts { 
-		margin-top: $small-value; 
-	}
-	
-	.mtm { 
-		margin-top: $medium-value; 
-	}
-	
-	.mtl { 
-		margin-top: $large-value; 
-	}
-	
-	.mrn { 
-		margin-right: 0; 
-	}
-	
-	.mrs {
-		margin-right: $small-value; 
-	}
-	
-	.mrm { 
-		margin-right: $medium-value; 
-	}
-	
-	.mrl { 
-		margin-right: $large-value; 
-	}
-	
-	.mbn { 
-		margin-bottom: 0; 
-	}
-	
-	.mbs { 
-		margin-bottom: $small-value; 
-	}
-	
-	.mbm { 
-		margin-bottom: $medium-value; 
-	}
-	
-	.mbl { 
-		margin-bottom: $large-value; 
-	}
-	
-	.mln { 
-		margin-left: 0; 
-	}
-	
-	.mls { 
-		margin-left: $small-value; 
-	}
-	
-	.mlm { 
-		margin-left: $medium-value; 
-	}
-	
-	.mll { 
-		margin-left: $large-value; 
-	}
-
-	.ptn { 
-		padding-top: 0; 
-	}
-	
-	.pts { 
-		padding-top: $small-value; 
-	}
-	
-	.ptm { 
-		padding-top: $medium-value; 
-	}
-	
-	.ptl { 
-		padding-top: $large-value; 
-	}
-	
-	.prn { 
-		padding-right: 0; 
-	}
-	
-	.prs { 
-		padding-right: $small-value; 
-	}
-	
-	.prm { 
-		padding-right: $medium-value; 
-	}
-	
-	.prl { 
-		padding-right: $large-value; 
-	}
-	
-	.pbn { 
-		padding-bottom: 0; 
-	}
-	
-	.pbs { 
-		padding-bottom: $small-value; 
-	}
-	
-	.pbm { 
-		padding-bottom: $medium-value; 
-	}
-	
-	.pbl { 
-		padding-bottom: $large-value; 
-	}
-	
-	.pln { 
-		padding-left: 0; 
-	}
-	
-	.pls { 
-		padding-left: $small-value; 
-	}
-	
-	.plm { 
-		padding-left: $medium-value; 
-	}
-	
-	.pll { 
-		padding-left: $large-value; 
-	}
-}

sass/_02-helpers.scss

@@ -0,0 +1,286 @@
+/* ---------------------------------- */
+/* ==visual helpers                   */
+/* .. use them with parcimony !       */
+/* ---------------------------------- */
+
+/* blocks widths (percentage and pixels) */
+.w10    { 
+	width: 10%; 
+}
+
+.w20    { 
+	width: 20%; 
+}
+
+.w25    { 
+	width: 25%; 
+}
+
+.w30    { 
+	width: 30%; 
+}
+
+.w33    { 
+	width: 33.3333%; 
+}
+
+.w40    { 
+	width: 40%; 
+}
+
+.w50    { 
+	width: 50%; 
+}
+
+.w60    { 
+	width: 60%; 
+}
+
+.w66    { 
+	width: 66.6666%; 
+}
+
+.w70    { 
+	width: 70%; 
+}
+
+.w75    { 
+	width: 75%; 
+}
+
+.w80    { 
+	width: 80%; 
+}
+
+.w90    { 
+	width: 90%; 
+}
+
+.w100   { 
+	width: 100%; 
+}
+
+.w50p   { 
+	width: 50px; 
+}
+
+.w100p  { 
+	width: 100px; 
+}
+
+.w150p  { 
+	width: 150px; 
+}
+
+.w200p  { 
+	width: 200px; 
+}
+
+.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; 
+}
+
+.wauto  { 
+	width: auto; 
+}
+
+/* spacing helpers
+p,m = padding,margin
+a,t,r,b,l = all,top,right,bottom,left
+s,m,l,n = small, medium, large, none
+*/
+.man { 
+	margin: 0; 
+}
+
+.pan { 
+	padding: 0; 
+}
+
+.mas { 
+	margin: $small-value; 
+}
+
+.mam {
+	margin: $medium-value; 
+}
+
+.mal { 
+	margin: $large-value; 
+}
+
+.pas { 
+	padding: $small-value; 
+}
+
+.pam { 
+	padding: $medium-value; 
+}
+
+.pal { 
+	padding: $large-value; 
+}
+
+.mtn { 
+	margin-top: 0; 
+}
+
+.mts { 
+	margin-top: $small-value; 
+}
+
+.mtm { 
+	margin-top: $medium-value; 
+}
+
+.mtl { 
+	margin-top: $large-value; 
+}
+
+.mrn { 
+	margin-right: 0; 
+}
+
+.mrs {
+	margin-right: $small-value; 
+}
+
+.mrm { 
+	margin-right: $medium-value; 
+}
+
+.mrl { 
+	margin-right: $large-value; 
+}
+
+.mbn { 
+	margin-bottom: 0; 
+}
+
+.mbs { 
+	margin-bottom: $small-value; 
+}
+
+.mbm { 
+	margin-bottom: $medium-value; 
+}
+
+.mbl { 
+	margin-bottom: $large-value; 
+}
+
+.mln { 
+	margin-left: 0; 
+}
+
+.mls { 
+	margin-left: $small-value; 
+}
+
+.mlm { 
+	margin-left: $medium-value; 
+}
+
+.mll { 
+	margin-left: $large-value; 
+}
+
+.ptn { 
+	padding-top: 0; 
+}
+
+.pts { 
+	padding-top: $small-value; 
+}
+
+.ptm { 
+	padding-top: $medium-value; 
+}
+
+.ptl { 
+	padding-top: $large-value; 
+}
+
+.prn { 
+	padding-right: 0; 
+}
+
+.prs { 
+	padding-right: $small-value; 
+}
+
+.prm { 
+	padding-right: $medium-value; 
+}
+
+.prl { 
+	padding-right: $large-value; 
+}
+
+.pbn { 
+	padding-bottom: 0; 
+}
+
+.pbs { 
+	padding-bottom: $small-value; 
+}
+
+.pbm { 
+	padding-bottom: $medium-value; 
+}
+
+.pbl { 
+	padding-bottom: $large-value; 
+}
+
+.pln { 
+	padding-left: 0; 
+}
+
+.pls { 
+	padding-left: $small-value; 
+}
+
+.plm { 
+	padding-left: $medium-value; 
+}
+
+.pll { 
+	padding-left: $large-value; 
+}

sass/_10-booleans.scss

@@ -4,8 +4,8 @@
 /* styling skip links */
 .skip-links {
 	position: absolute;
-
+	
-	a {
+	& a {
 		position: absolute;
 		overflow: hidden;
 		clip: rect(1px, 1px, 1px, 1px);

sass/knacss.scss

@@ -6,17 +6,18 @@
 @import "_01-base";
 
 // Sass files : chose the ones you need
-@import "_02-grids";
+@import "_02-helpers"; // width and spacers visually classes
-@import "_03-tables"; 
+@import "_03-grids"; // grids and autogrids
-@import "_04-forms";
+@import "_04-tables"; 
-@import "_05-icons";
+@import "_05-forms";
-@import "_06-rwd";
+@import "_06-icons"; // UTF-8 icons
-@import "_07-flexbox"; 
+@import "_07-flexbox";
-@import "_08-print";
+@import "_08-rwd"; // Responsive Web Design helpers
-@import "_09-booleans";
+@import "_09-print";
-@import "_10-gmaps";
+@import "_10-booleans"; // skip links and hyphens
-@import "_11-ie";
+@import "_11-gmaps"; // Google maps bugs fix
-@import "_12-styling";
+@import "_12-ie"; // IE6, IE7, IE8 support
+@import "_13-styling"; // minor stylings 
 
 /* ----------------------------- */
 /* ==own stylesheet              */