Sass version 3.0.2

sass/01-base.scss

@@ -1,6 +1,6 @@
 @import "00-config";
 /*!
-* www.KNACSS.com V3.0.0 (2014-05) @author: Raphael Goetter, Alsacreations (with help from Hugo Giraudel)
+* www.KNACSS.com V3.0.2 (2014-05-07) @author: Raphael Goetter, Alsacreations (with help from Hugo Giraudel)
 * Licence WTFPL http://www.wtfpl.net/
 */
 
@@ -19,23 +19,28 @@ body {
 	margin: 0;
 	padding: 0;
 }
+
 ul,
 ol {
 	padding-left: 2em;
 }
+
 ul.unstyled {
 	list-style: none;
 }
+
 img {
 	height: auto;
 	vertical-align: middle;
 	border: 0;
 }
+
 audio,
 canvas,
 video {
 	display: inline-block;
 }
+
 svg:not(:root) {
 	overflow: hidden;
 }
@@ -51,6 +56,7 @@ html {
 	    -ms-text-size-adjust: 100%;
 	        text-size-adjust: 100%;
 }
+
 body {
 	background-color: $base-background;
 	color: $base-color;
@@ -73,27 +79,32 @@ label,
 textarea,
 caption,
 details, 
-figure, 
+figure {
-hgroup {
 	margin-top: 0.75em;
 	margin-bottom: 0;
 	line-height: $line-height;
 }
+
 h1, .h1-like {
 	font-size: $h1-size;
 }
+
 h2, .h2-like {
 	font-size: $h2-size;
 }
+
 h3, .h3-like {
 	font-size: $h3-size;
 }
+
 h4, .h4-like {
 	font-size: $h4-size;
 }
+
 h5, .h5-like {
 	font-size: $h5-size;
 }
+
 h6, .h6-like {
 	font-size: $h6-size;
 }
@@ -102,15 +113,19 @@ h6, .h6-like {
 .smaller {
 	@include em($base-font-size / 1px - 4);
 }
+
 .small {
 	@include em($base-font-size / 1px - 2);
 }
+
 .big {
 	@include em($base-font-size / 1px + 2);
 }
+
 .bigger {
 	@include em($base-font-size / 1px + 4);
 }
+
 .biggest {
 	@include em($base-font-size / 1px + 6);
 }
@@ -124,6 +139,7 @@ kbd {
 	font-family: $font-stack-monospace;
 	line-height: normal;
 }
+
 em,
 .em,
 address,
@@ -133,16 +149,20 @@ i,
 var {
 	font-style: italic;
 }
+
 .no-em {
 	font-style: normal;
 }
+
 strong,
 .strong {
 	font-weight: bold;
 }
+
 .no-strong {
 	font-weight: normal;
 }
+
 small,
 sub,
 sup {
@@ -153,38 +173,51 @@ sup {
 /* == hiding content             */
 /* ----------------------------- */
 
+/* hidden but not for assistance tools, Yahoo! method */
 .visually-hidden { 
 	position: absolute !important;
-	clip: rect(1px, 1px, 1px, 1px); 
+    border: 0 !important;
-	overflow: hidden;
+    height: 1px !important; 
-	height: 1px; width: 1px;
+    width: 1px !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+    clip: rect(1px, 1px, 1px, 1px) !important;
 }
+
 body > script {
 	display: none !important;
 }
-@media print {
+
-	.no-print {
-		display: none;
-	}
-}
 @media (max-width: $small-screen) {
 	.no-small-screen {
 		display: none;
 	}
 }
+
 @media (min-width: $large-screen) {
 	.no-large-screen {
 		display: none;
 	}
 }
+
 /* ----------------------------- */
 /* == browsers consistency       */
 /* ----------------------------- */
 
 /* avoid top margins on first content element */
-p, .p-like, ul, ol, dl,
+p, 
-blockquote, pre,
+.p-like, 
-h1, h2, h3, h4, h5, h6 {
+ul, 
+ol, 
+dl,
+blockquote, 
+pre,
+h1, 
+h2, 
+h3, 
+h4, 
+h5, 
+h6 {
 	&:first-child {
 		margin-top: 0;
 	}
@@ -200,12 +233,22 @@ li ol {
 }
 
 /* max values */
-img, table, td, blockquote, code, pre, textarea, input, video {
+img, 
+table, 
+td, 
+blockquote, 
+code, 
+pre, 
+textarea, 
+input, 
+video {
 	max-width: 100%;
 }
 
 /* margin-bottom on tables */
-table { margin-bottom: $medium-value; }
+table { 
+	margin-bottom: $medium-value; 
+}
 
 
 /* ----------------------------- */
@@ -241,6 +284,7 @@ table { margin-bottom: $medium-value; }
 	table-layout: fixed;
 	width: 100%;
 }
+
 .row > *,
 .col {
 	display: table-cell;
@@ -262,62 +306,166 @@ table { margin-bottom: $medium-value; }
 .start {
 	float: left;
 }
+
 img.left,
 img.start  {
 	margin-right: $small-value;
 }
+
 /* right (or ending) elements */
 .right,
 .end {
 	float: right;
 }
+
 img.right,
 img.end {
 	margin-left: $small-value;
 }
-img.left, img.right,
+
-img.start, img.end {
+img.left, 
+img.right,
+img.start, 
+img.end {
 	margin-bottom: $tiny-value;
 }
-.center    { margin-left: auto; margin-right: auto; }
+
-.txtleft   { text-align: left; }
+.center    { 
-.txtright  { text-align: right; }
+	margin-left: auto; 
-.txtcenter { text-align: center; }
+	margin-right: auto; 
+}
+
+.txtleft   { 
+	text-align: left; 
+}
+
+.txtright  { 
+	text-align: right; 
+}
+
+.txtcenter { 
+	text-align: center; 
+}
 
 
 // width helpers boolean
 @if $enable-helpers-width == true {
 	/* blocks widths (percentage and pixels) */
-	.w10    { width: 10%; }
+	.w10    { 
-	.w20    { width: 20%; }
+		width: 10%; 
-	.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; }
+	.w20    { 
-	.w100p  { width: 100px; }
+		width: 20%; 
-	.w150p  { width: 150px; }
+	}
-	.w200p  { width: 200px; }
+	
-	.w300p  { width: 300px; }
+	.w25    { 
-	.w400p  { width: 400px; }
+		width: 25%; 
-	.w500p  { width: 500px; }
+	}
-	.w600p  { width: 600px; }
+	
-	.w700p  { width: 700px; }
+	.w30    { 
-	.w800p  { width: 800px; }
+		width: 30%; 
-	.w960p  { width: 960px; }
+	}
-	.mw960p { max-width: 960px; }
+	
-	.w1140p  { width: 1140px; }
+	.w33    { 
-	.mw1140p { max-width: 1140px; }
+		width: 33.3333%; 
-	.wauto  { width: auto; }
+	}
+	
+	.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; 
+	}
 }
 
 
@@ -328,46 +476,163 @@ img.start, img.end {
 	a,t,r,b,l = all,top,right,bottom,left
 	s,m,l,n = small, medium, large, none
 	*/
-	.man { margin: 0; }
+	.man { 
-	.pan { padding: 0; }
+		margin: 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; }
+	.pan { 
-	.mts { margin-top: $small-value; }
+		padding: 0; 
-	.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; }
+	.mas { 
-	.pts { padding-top: $small-value; }
+		margin: $small-value; 
-	.ptm { padding-top: $medium-value; }
+	}
-	.ptl { padding-top: $large-value; }
+	
-	.prn { padding-right: 0; }
+	.mam {
-	.prs { padding-right: $small-value; }
+		margin: $medium-value; 
-	.prm { padding-right: $medium-value; }
+	}
-	.prl { padding-right: $large-value; }
+	
-	.pbn { padding-bottom: 0; }
+	.mal { 
-	.pbs { padding-bottom: $small-value; }
+		margin: $large-value; 
-	.pbm { padding-bottom: $medium-value; }
+	}
-	.pbl { padding-bottom: $large-value; }
+	
-	.pln { padding-left: 0; }
+	.pas { 
-	.pls { padding-left: $small-value; }
+		padding: $small-value; 
-	.plm { padding-left: $medium-value; }
+	}
-	.pll { padding-left: $large-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-grids.scss

@@ -7,52 +7,98 @@
 
 /* grids inspired from SUIT https://github.com/suitcss/suit */
 
-.grid { /* overall container of grids */
+/* overall container of grids */
+.grid { 
 	overflow: hidden;
 }
-.grid > * { /* global styles for direct child ex. .grid3 */
+
+/* global styles for direct child ex. .grid3 */
+/* 1- gutter value */
+.grid > * { 
 	display: block;
 	padding: 0;
-	margin-left: -$gutter; /* gutter value */
+	margin-left: -$gutter; /* 1 */
 	text-align: left;
 }
-.grid > * > * { /* global styles for each "cell" */
+
+/* global styles for each "cell" */
+/* 1- gutter value */
+.grid > * > * { 
 	display: inline-block;
-	padding-left: $gutter; /* gutter value */ 
+	padding-left: $gutter; /* 1 */ 
 	margin-left: 0;
 	vertical-align: top;
 }
+
 /* whitespace fixing for modern browsers including IE9+ */
+/* 1- fallback for Opera Mini */
 :root .grid {
 	font-size: 0;
 }
+
 :root .grid > * > * {
-	font-size: $base-font-size; /* fallback for Opera Mini */
+	font-size: $base-font-size; /* 1 */
 	font-size: ($base-font-size / 10px) + rem;
 }
+
 /* Opera hack */
 .opera:-o-prefocus,
 .grid > * {
 	word-spacing: -0.43em;
 }
-.grid2 > * {width: 50%;}
+
-.grid3 > * {width: 33.333%;}
+.grid2 > * {
-.grid4 > * {width: 25%;}
+	width: 50%;
-.grid5 > * {width: 20%;}
+}
-.grid6 > * {width: 16.667%;}
+
-.grid8 > * {width: 12.5%;}
+.grid3 > * {
-.grid10 > * {width: 10%;}
+	width: 33.333%;
-.grid12 > * {width: 8.333%;}
+}
+
+.grid4 > * {
+	width: 25%;
+}
+
+.grid5 > * {
+	width: 20%;
+}
+
+.grid6 > * {
+	width: 16.667%;
+}
+
+.grid8 > * {
+	width: 12.5%;
+}
+
+.grid10 > * {
+	width: 10%;
+}
+
+.grid12 > * {
+	width: 8.333%;
+}
 
 /* unequal grids (1-2, 2-1, 1-3 and 3-1) for 2 blocks */
 .grid2-1 > *:first-child,
-.grid1-2 > * + * { width: 66.666%; }
+.grid1-2 > * + * { 
+	width: 66.666%; 
+}
+
 .grid1-2 > *:first-child,
-.grid2-1 > * + * { width: 33.333%; }
+.grid2-1 > * + * { 
+	width: 33.333%; 
+}
+
 .grid1-3 > *:first-child,
-.grid3-1 > * + * { width: 25%; }
+.grid3-1 > * + * { 
+	width: 25%; 
+}
+
 .grid3-1 > *:first-child,
-.grid1-3 > * + * { width: 75%; }
+.grid1-3 > * + * { 
+	width: 75%; 
+}
 
 /* Responsiv-o-matic */
 @media (max-width: $large-screen) {
@@ -60,7 +106,9 @@
 	.grid6 > *,
 	.grid8 > *,
 	.grid10 > *,
-	.grid12 > * {width: 33.333%}
+	.grid12 > * {
+		width: 33.333%;
+	}
 }
 @media (max-width: $small-screen) {
 	.grid3 > *,
@@ -69,10 +117,14 @@
 	.grid6 > *,
 	.grid8 > *,
 	.grid10 > *,
-	.grid12 > * {width: 50%}
+	.grid12 > * {
+		width: 50%;
+	}
 }
 @media (max-width: $tiny-screen) {
-	.grid > * > * {width: 100% !important}
+	.grid > * > * {
+		width: 100% !important;
+	}
 }
 
 /* ---------------------------------- */
@@ -82,46 +134,79 @@
 
 /* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */
 
-[class*="autogrid"] { /* container of autogrids */
+/* container of autogrids */
+[class*="autogrid"] { 
 	text-align: justify;
 }
+
 [class*="autogrid"]:after {
 	content: "";
 	display: inline-block;
 	width: 100%; 
 }
+
 [class*="autogrid"] > * {
 	display: inline-block;
 	vertical-align: top;
 	text-align: left;
 }
+
 /* whitespace fixing for modern browsers including IE9+ */
+/* 1- fallback for Opera Mini */
 :root [class*="autogrid"] {
 	font-size: 0;
 }
+
 :root [class*="autogrid"] > * {
-	font-size: $base-font-size; /* fallback for Opera Mini */
+	font-size: $base-font-size; /* 1 */
 	font-size: ($base-font-size / 10px) + rem;
 }
+
 /* Opera hack */
 [class*="autogrid"]:-o-prefocus {
 	word-spacing: -0.43em;
 }
-.autogrid2 > * {width: 49%}
+
-.autogrid3 > * {width: 32%}
+.autogrid2 > * {
-.autogrid4 > * {width: 23.6%}
+	width: 49%;
-.autogrid5 > * {width: 19%}
+}
-.autogrid6 > * {width: 15%}
+
-.autogrid8 > * {width: 10.8%}
+.autogrid3 > * {
-.autogrid10 > * {width: 9%}
+	width: 32%;
-.autogrid12 > * {width: 6.4%}
+}
+
+.autogrid4 > * {
+	width: 23.6%;
+}
+
+.autogrid5 > * {
+	width: 19%;
+}
+
+.autogrid6 > * {
+	width: 15%;
+}
+
+.autogrid8 > * {
+	width: 10.8%;
+}
+
+.autogrid10 > * {
+	width: 9%;
+}
+
+.autogrid12 > * {
+	width: 6.4%;
+}
 
 @media (max-width: $large-screen) {
 	.autogrid5 > *,
 	.autogrid6 > *,
 	.autogrid8 > *,
 	.autogrid10 > *,
-	.autogrid12 > * {width: 32%}
+	.autogrid12 > * {
+		width: 32%;
+	}
 }
 
 @media (max-width: $small-screen) {
@@ -129,9 +214,13 @@
 	.autogrid6 > *,
 	.autogrid8 > *,
 	.autogrid10 > *,
-	.autogrid12 > * {width: 49%}
+	.autogrid12 > * {
+		width: 49%;
+	}
 }
 
 @media (max-width: $tiny-screen) {
-	[class*="autogrid"] > * {width: 100%}
+	[class*="autogrid"] > * {
+		width: 100%;
+	}
 }

sass/03-tables.scss

@@ -12,18 +12,22 @@ table,
 	vertical-align: top;
 	border: 1px solid #ccc;
 }
+
 .table {
 	display: table;
 }
+
 table#recaptcha_table,
 table.table-auto {
 	table-layout:auto;
 }
+
 caption {
 	padding: $small-value;
 	color: #555;
 	font-style: italic;	
 }
+
 td,
 th {
 	padding: 0.3em 0.8em;

sass/04-forms.scss

@@ -18,6 +18,7 @@ form,
 fieldset {
 	border: none;
 }
+
 input,
 button,
 select,
@@ -27,15 +28,18 @@ label,
 	font-family: inherit;
 	font-size: inherit;
 }
+
 label { 
 	display: inline-block;
 	vertical-align: middle;
 	cursor: pointer;
 }
+
 legend {
 	border: 0;
 	white-space: normal;
 }
+
 textarea {
 	min-height: 5em;
 	vertical-align: top;
@@ -43,13 +47,16 @@ textarea {
 	font-size: inherit;
 	resize: vertical;
 }
+
+/* clickable input types in iOS */
 button,
 input[type="button"],
 input[type="reset"],
 input[type="submit"] {
 	cursor: pointer;
-	-webkit-appearance: button; /* clickable input types in iOS */
+	-webkit-appearance: button; 
 }
+
 input[type="search"] {
 	-webkit-appearance: textfield;
 }
@@ -64,9 +71,11 @@ input[type="search"]::-webkit-search-results-button,
 input[type="search"]::-webkit-search-results-decoration {
 	display: none;
 }
+
 ::-webkit-input-placeholder {
 	color: #777;
 }
+
 input:-moz-placeholder,
 textarea:-moz-placeholder {
 	color: #777;

sass/05-icons.scss

@@ -29,9 +29,11 @@
 .icon.after:after {
 	margin: 0 0 0 8px;
 }
+
 .icon.after:before {
 	content: "" !important
 }
+
 .icon-rate:before,
 .icon-rate.after:after {
 	content: "\2605";
@@ -40,42 +42,51 @@
 .icon-unrate.after:after{
 	content: "\2606";
 }
+
 .icon-check:before,
 .icon-check.after:after{
 	content: "\2713";
 }
+
 .icon-uncheck:before,
 .icon-uncheck.after:after{
 	content: "\2717";
 }
+
 .icon-cloud:before,
 .icon-cloud.after:after {
 	content: "\2601";
 }
+
 .icon-dl:before,
 .icon-dl.after:after {
 	content: "\21E3";
 	font-weight: bold;
 }
+
 .icon-cross:before,
 .icon-cross.after:after {
 	content: "\2716";
 	font-weight: bold;
 }
+
 .icon-arrow1:before, 
 .icon-arrow1.after:after {
 	content: "\2192";
 	position: relative; 
 		top: -0.15em;
 }
+
 .icon-arrow2:before,
 .icon-arrow2.after:after {
 	content: "\279E";
 }
+
 .icon-arrow3:before,
 .icon-arrow3.after:after {
 	content: "\279A";
 }
+
 .icon-bracket1:before,
 .icon-bracket1.after:after {
 	content: "\2039";
@@ -84,6 +95,7 @@
 	position: relative; 
 		top: -0.15em;
 }
+
 .icon-bracket2:before,
 .icon-bracket2.after:after {
 	content: "\203A";
@@ -92,45 +104,54 @@
 	position: relative; 
 		top: -0.15em;
 }
+
 .icon-up:before,
 .icon-up.after:after {
 	content: "\25B2";
 }
+
 .icon-down:before,
 .icon-down.after:after {
 	content: "\25BC";
 }
+
 .icon-bull:before,
 .icon-bull.after:after {
 	content: "\2022";
 	font-size: 1.2em;
 	top: -0.05em;
 }
+
 .icon-bull2:before,
 .icon-bull2.after:after {
 	content: "\25E6";
 	top: -0.05em;
 }
+
 .icon-bull3:before,
 .icon-bull3.after:after{
 	content: "\2023";
 	font-size: 1.6em;
 	top: -0.05em;
 }
+
 .icon-nav:before,
 .icon-nav.after:after {
 	content: "\2261";
 	font-weight: bold;
 }
+
 .icon-losange:before,
 .icon-losange.after:after {
 	content: "\25C6";
 }
+
 .icon-asteri:before,
 .icon-asteri.after:after {
 	content: "\2731";
 	font-weight: bold;
 }
+
 .icon-mail:before,
 .icon-mail.after:after {
 	content: "\2709";

sass/06-rwd.scss

@@ -6,6 +6,7 @@
 @media (min-width: $small-screen) {
 /* here go rules for big resources and big screens like: background-images, font-faces, etc. */
 }
+
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
 /* Style adjustments for retina devices */
 }
@@ -17,9 +18,18 @@
 @media (min-width: $large-screen) {
 
 	/* layouts for large screens */
-	.large-hidden { display: none !important; }
+	.large-hidden { 
-	.large-visible { display: block !important; }
+		display: none !important; 
-	.large-no-float {float: none; }
+	}
+	
+	.large-visible { 
+		display: block !important; 
+	}
+	
+	.large-no-float {
+		float: none; 
+	}
+	
 	.large-inbl {
 		display: inline-block;
 		float: none;
@@ -36,11 +46,26 @@
 	}
 
 	/* widths for large screens */
-	.large-w25 { width: 25% !important; }
+	.large-w25 { 
-	.large-w33 { width: 33.3333% !important; }
+		width: 25% !important; 
-	.large-w50 { width: 50% !important; }
+	}
-	.large-w66 { width: 66.6666% !important; }
+	
-	.large-w75 { width: 75% !important; }
+	.large-w33 { 
+		width: 33.3333% !important; 
+	}
+	
+	.large-w50 { 
+		width: 50% !important; 
+	}
+	
+	.large-w66 { 
+		width: 66.6666% !important; 
+	}
+	
+	.large-w75 { 
+		width: 75% !important; 
+	}
+	
 	.large-w100,
 	.large-wauto {
 		display: block !important;
@@ -53,7 +78,9 @@
 	}
 
 	/* margins for large screens */
-	.large-man { margin: 0 !important; }
+	.large-man { 
+		margin: 0 !important; 
+	}
 }
 
 @media (max-width: $small-screen) {
@@ -69,9 +96,18 @@
 	} 
 
 	/* layouts for small screens */
-	.small-hidden { display: none !important; }
+	.small-hidden { 
-	.small-visible { display: block !important; }
+		display: none !important; 
-	.small-no-float {float: none; }
+	}
+	
+	.small-visible { 
+		display: block !important; 
+	}
+	
+	.small-no-float {
+		float: none; 
+	}
+	
 	.small-inbl {
 		display: inline-block;
 		float: none;
@@ -88,11 +124,26 @@
 	}
 
 	/* widths for small screens */
-	.small-w25 { width: 25% !important; }
+	.small-w25 { 
-	.small-w33 { width: 33.3333% !important; }
+		width: 25% !important; 
-	.small-w50 { width: 50% !important; }
+	}
-	.small-w66 { width: 66.6666% !important; }
+	
-	.small-w75 { width: 75% !important; }
+	.small-w33 { 
+		width: 33.3333% !important; 
+	}
+	
+	.small-w50 { 
+		width: 50% !important; 
+	}
+	
+	.small-w66 { 
+		width: 66.6666% !important; 
+	}
+	
+	.small-w75 { 
+		width: 75% !important; 
+	}
+	
 	.small-w100,
 	.small-wauto  {
 		display: block !important;
@@ -103,9 +154,15 @@
 		margin-right: 0 !important;
 		border: 0;		
 	}
+	
 	/* margins for small screens */
-	.small-man { margin: 0 !important; }
+	.small-man { 
-	.small-pan { padding: 0 !important; }
+		margin: 0 !important; 
+	}
+	
+	.small-pan { 
+		padding: 0 !important; 
+	}
 }
 
 @media (max-width: $tiny-screen) {
@@ -122,49 +179,79 @@
 		margin-right: 0 !important;
 		border: 0;
 	}
+	
 	.w300p,
 	.w400p,
 	.w500p {
 		width: auto;
 		float: none;
 	}
+	
 	.row { 
 		display: block !important;
 		width: 100% !important;
 	}
 
 	/* layouts for tiny screens */
-	.tiny-hidden { display: none !important; }
+	.tiny-hidden { 
-	.tiny-visible { display: block !important; }
+		display: none !important; 
-	.tiny-no-float {float: none;}
+	}
+	
+	.tiny-visible { 
+		display: block !important; 
+	}
+	
+	.tiny-no-float {
+		float: none;
+	}
+	
 	.tiny-inbl {
 		display: inline-block;
 		float: none;
 		vertical-align: top;
 	}
+	
 	.tiny-row {
 		display: table !important;
 		table-layout: fixed !important;
 		width: 100% !important;
 	}
+	
 	.tiny-col {
 		display: table-cell !important;
 		vertical-align: top !important;
 	}
+	
 	th,
 	td {
 		display: block !important;
 		width: auto !important;
 		text-align: left !important;
 	}
+	
 	thead { display: none; }
 
 	/* widths for tiny screens */
-	.tiny-w25 { width: 25% !important; }
+	.tiny-w25 { 
-	.tiny-w33 { width: 33.3333% !important; }
+		width: 25% !important; 
-	.tiny-w50 { width: 50% !important; }
+	}
-	.tiny-w66 { width: 66.6666% !important; }
+	
-	.tiny-w75 { width: 75% !important; }
+	.tiny-w33 { 
+		width: 33.3333% !important; 
+	}
+	
+	.tiny-w50 { 
+		width: 50% !important; 
+	}
+	
+	.tiny-w66 { 
+		width: 66.6666% !important; 
+	}
+	
+	.tiny-w75 { 
+		width: 75% !important; 
+	}
+	
 	.tiny-w100,
 	.tiny-wauto { 
 		display: block !important;
@@ -175,7 +262,13 @@
 		margin-right: 0 !important;
 		border: 0;
 	}
+	
 	/* margins for tiny screens */
-	.tiny-man { margin: 0 !important; }
+	.tiny-man { 
-	.tiny-pan { padding: 0 !important; }
+		margin: 0 !important; 
+	}
+	
+	.tiny-pan { 
+		padding: 0 !important; 
+	}
 }

sass/07-flexbox.scss

@@ -4,21 +4,27 @@ Tutorial: http://knacss.com/demos/tutoriel.html#flex */
 .flex {
 	display : flex;
 }
+
 .flex-h {
 	flex-direction: row;
 }
+
 .flex-v {
 	flex-direction: column;
 }
+
 .flex-fluid {
 	flex: 1;
 }
+
 .flex-start {
 	order : -1;
 }
+
 .flex-mid {
 	order : 1;
 }
+
 .flex-end {
 	order : 42;
 }

sass/08-print.scss

@@ -6,6 +6,7 @@
 		box-shadow: none !important;
 		text-shadow: none !important;
 	}
+	
 	body {
 		width: auto !important;
 		margin: auto !important;
@@ -14,6 +15,7 @@
 		background-color: #fff !important;
 		color: #333 !important;
 	}
+	
 	p,
 	h1,
 	h2,
@@ -27,42 +29,56 @@
 		color: #000 !important;
 		margin: auto !important;
 	}
+	
 	.print {
-		display: block; /* displaying .print elements */
+		display: block;
 	}
+	
+	.no-print {
+		display: none;
+	}
+	
 	img { 
-		-webkit-filter: grayscale(100%);
-		-moz-filter: grayscale(100%);
-		-ms-filter: grayscale(100%);
-		-o-filter: grayscale(100%);
 		filter: grayscale(100%);
 	}
+	
+	/* no orphans, no widows */
 	p,
 	blockquote {
-		orphans: 3; /* no orphans */
+		orphans: 3; 
-		widows: 3; /* no widows */
+		widows: 3;
 	}
+	
+	/* no breaks inside these elements */
 	blockquote,
 	ul,
 	ol {
-		page-break-inside: avoid; /* no breaks inside these elements */
+		page-break-inside: avoid; 
 	}
+	
+	/* page break before main headers */
 	h1 {
-		page-break-before: always; /* page break before main headers */
+		page-break-before: always; 
 	}
+	
+	/* no breaks after these elements */
 	h1,
 	h2,
 	h3,
 	caption {
-		page-break-after: avoid; /* no breaks after these elements */
+		page-break-after: avoid; 
 	}
+	
 	a {
 		color: #000 !important;
 		text-decoration: underline !important;
 	}
+	
+	/* displaying URLs */
 	a[href]:after {
-		content: " (" attr(href) ")"; /* displaying URLs */
+		content: " (" attr(href) ")"; 
 	}
+	
 	a[href^="javascript:"]:after,
 	a[href^="#"]:after {
 		content: "";

sass/09-booleans.scss

@@ -27,7 +27,14 @@
 @if $enable-hyphens == true {
 	@media (max-width: $small-screen) {
 		/* you shall not pass */
-		div, textarea, table, td, th, code, pre, samp {
+		div, 
+		textarea, 
+		table, 
+		td, 
+		th, 
+		code, 
+		pre, 
+		samp {
 			word-wrap: break-word;
 			hyphens: auto;
 		}

sass/10-gmaps.scss

@@ -8,9 +8,11 @@
 	.gm-style img {
 		height: 100%;
 	}
+	
 	:not(.gm-style) img {
 		height: auto;
 	}
+	
 	.gm-style img,
 	.gmnoscreen img,
 	.gmnoprint img {

sass/11-ie.scss

@@ -11,34 +11,41 @@
 		$em : $val * 10 / $bf;
 		font-size: $em +0em; 
 	}
+	
 	.ie678 h2, .ie678 .h2-like {
 		$val: $h2-size / 1rem;
 		$em : $val * 10 / $bf;
 		font-size: $em +0em;
 	}
+	
 	.ie678 h3, .ie678 .h3-like {
 		$val: $h3-size / 1rem;
 		$em : $val * 10 / $bf;
 		font-size: $em +0em;
 	}
+	
 	.ie678 h4, .ie678 .h4-like {
 		$val: $h4-size / 1rem;
 		$em : $val * 10 / $bf;
 		font-size: $em +0em;
 	}
+	
 	.ie678 h5, .ie678 .h5-like {
 		$val: $h5-size / 1rem;
 		$em : $val * 10 / $bf;
 		font-size: $em +0em;
 	}
+	
 	.ie678 h6, .ie678 .h6-like {
 		$val: $h6-size / 1rem;
 		$em : $val * 10 / $bf;
 		font-size: $em +0em;
 	}
+	
 	.ie678 img {
 		width: auto; /* @bugfix for IE8 */
 	}
+	
 	.ie678 .gm-style img {
 		height: 100%;
 	}
@@ -51,6 +58,7 @@
 	.col {
 		*zoom: 1;
 	}
+	
 	/* inline-block and table-cell for IE6/IE7 */
 	/* warning: .col needs width on IE6/IE7 */
 	.btn,
@@ -69,6 +77,7 @@
 		letter-spacing: -0.31em;
 		text-rendering: optimizespeed;
 	}
+	
 	.ie8 .grid > * > *,
 	.ie8 [class*="autogrid"] > * > *{
 		letter-spacing: normal;
@@ -84,12 +93,15 @@
 	}
 	
 	/* forms */
+	 /* Corrects excess space around these inputs in IE8/9 */
 	input[type="checkbox"],
 	input[type="radio"] {
-		padding: 0; /* Corrects excess space around these inputs in IE8/9 */
+		padding: 0;
 	}
+	
+	/* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */
 	textarea {
-		overflow: auto; /* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */
+		overflow: auto;
 	}
 
 	/* Active box-sizing for IE6/IE7 */

sass/12-styling.scss

@@ -9,53 +9,65 @@
 	code, kbd, mark {
 		border-radius: 2px;
 	}
+	
 	kbd {
 		padding: 0 2px;
 		border: 1px solid #999;
 	}
+	
 	code {
 		padding: 2px 4px;
 		background: rgba(0,0,0,0.04);
 		color: #b11; 
 	}
+	
 	pre code {
 		padding: none;
 		background: none;
 		color: inherit;
 		border-radius: 0;
 	}
+	
 	mark {
 		padding:2px 4px;
 		background: #ff0;
 	}
+	
 	sup,
 	sub {
 		vertical-align: 0;
 		position: relative;
 	}
+	
 	sup {
 		bottom: 1ex;
 	}
+	
 	sub {
 		top: 0.5ex;
 	}
+	
 	blockquote {
 		margin-left: 0;
 		padding-left: 1em;
 		border-left: 4px solid rgba(0,0,0,0.15);
 		font-style: italic;
 	}
+	
 	q {
 		font-style: normal;
 	}
+	
 	q,
 	.q {
 		quotes: "“\00a0" "\00a0”";
 	}
+	
 	q:lang(fr),
 	.q:lang(fr) {
 		quotes: "«\00a0" "\00a0»";
 	}
+	
 	hr {
 		display: block;
 		clear: both;
@@ -66,14 +78,17 @@
 		color: #ccc;
 		background-color: #ccc;
 	}
+	
 	/* alternate tables */
 	.alternate { border: 0; }
 	.alternate tbody { 
 		border: 1px solid #ccc; 
 	}
+	
 	.alternate thead tr > * + * {
 		border-left: 0;
 	}
+	
 	.alternate tbody tr > * + * {
 		border-left: 1px solid #ccc;
 	}
@@ -83,9 +98,11 @@
 		border: 0;
 		border-right: 1px solid #ccc;
 	}
+	
 	.alternate-vert tr > :first-child {
 		border-bottom: 0;
 	}
+	
 	.alternate-vert tr > * + * {
 		border-top: 1px solid #ccc;
 	}