Working on #66

sass/00-config.scss

@@ -54,9 +54,7 @@ $ultra-large-screen		: 1600px; // ultra large screens media query
 $gutter		: 20px; // gutter value (%, px, em, rem) for grid layouts
 
 
-// Sass mixins
+// [Mixin] Rem with px fallback
-
-// Rem with px fallback
 @mixin rem($size) {
 	@if unitless($size) {
 	 	font-size: ($size * 1rem) / 1rem * $base-font-size;
@@ -67,7 +65,7 @@ $gutter		: 20px; // gutter value (%, px, em, rem) for grid layouts
 	}
 }
 
-// Em from px
+// [Mixin] Em from px
 @mixin em($size) {
 	@if unitless($size) {
 		$bf: $base-font-size / 1px;

sass/01-base.scss

@@ -1,7 +1,7 @@
 @import "00-config";
 
 /* ----------------------------- */
-/* == soft reset                 */
+/* ==soft reset                  */
 /* ----------------------------- */
 
 /**

sass/02-grids.scss

@@ -2,7 +2,6 @@
 
 /* ---------------------------------- */
 /* ==classic grids                    */
-/* .. use it when gutter size matters */
 /* ---------------------------------- */
 
 /**
@@ -17,28 +16,42 @@
 	overflow: hidden;
 }
 
-.grid > * { /* global styles for direct child ex. .grid3 */
+/**
+ * Global styles for direct child
+ * e.g. `.grid3`
+ * 1. Gutter value
+ */
+.grid > * {
 	display: block;
 	padding: 0;
-	margin-left: -$gutter; /* gutter value */
+	margin-left: -$gutter;
 	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;
 	margin-left: 0;
 	vertical-align: top;
 }
 
-/* whitespace fixing for modern browsers including IE9+ */
+/**
+ * Whitespace fixing for modern browsers including IE9+
+ */
 :root .grid {
 	font-size: 0;
 }
 
+/**
+ * 1. Rem fallback for Opera Mini
+ */
 :root .grid > * > * {
-	font-size: $base-font-size; /* fallback for Opera Mini */
+	font-size: $base-font-size;
-	font-size: ($base-font-size / 10px) + rem;
+	font-size: ($base-font-size / 10px) * 1rem;
 }
 
 /* Opera hack */
@@ -47,32 +60,73 @@
 	word-spacing: -0.43em;
 }
 
-.grid2 > * {width: 50%;}
+.grid2 > * {
-.grid3 > * {width: 33.333%;}
+	width: 50%;
-.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 */
+.grid3 > * {
+	width: 33.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 > * + * {
-.grid1-2 > *:first-child,
+	width: 66.666%;
-.grid2-1 > * + * { width: 33.333%; }
+}
-.grid1-3 > *:first-child,
-.grid3-1 > * + * { width: 25%; }
-.grid3-1 > *:first-child,
-.grid1-3 > * + * { width: 75%; }
 
-/* Responsiv-o-matic */
+.grid1-2 > *:first-child,
+.grid2-1 > * + * {
+	width: 33.333%;
+}
+
+.grid1-3 > *:first-child,
+.grid3-1 > * + * {
+	width: 25%;
+}
+
+.grid3-1 > *:first-child,
+.grid1-3 > * + * {
+	width: 75%;
+}
+
+/**
+ * Responsive-o-matic
+ */
 @media (max-width: $large-screen) {
 	.grid5 > *,
 	.grid6 > *,
 	.grid8 > *,
 	.grid10 > *,
-	.grid12 > * {width: 33.333%}
+	.grid12 > * {
+		width: 33.333%;
+	}
 }
 
 @media (max-width: $small-screen) {
@@ -82,11 +136,15 @@
 	.grid6 > *,
 	.grid8 > *,
 	.grid10 > *,
-	.grid12 > * {width: 50%}
+	.grid12 > * {
+		width: 50%;
+	}
 }
 
 @media (max-width: $tiny-screen) {
-	.grid > * > * {width: 100% !important}
+	.grid > * > * {
+		width: 100% !important,
+	}
 }
 
 /* ---------------------------------- */
@@ -94,10 +152,9 @@
 /* .. to automatically justify blocs  */
 /* ---------------------------------- */
 
-/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */
-
 /**
  * Container of autogrids
+ * Demo : http://codepen.io/raphaelgoetter/pen/Kqehf
  */
 [class*="autogrid"] {
 	text-align: justify;

sass/04-forms.scss

@@ -4,10 +4,10 @@
 /* ==forms                       */
 /* ----------------------------- */
 
-/* thanks to HTML5boilerplate,
+/**
-* github.com/nathansmith/formalize
+ * Thanks to HTML5boilerplate,
-* and www.sitepen.com
+ * Source: github.com/nathansmith/formalize and www.sitepen.com
-*/
+ */
 
 /**
  * Buttons
@@ -53,12 +53,15 @@ textarea {
 	resize: vertical;
 }
 
+/**
+ * 1. 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"] {
@@ -94,9 +97,9 @@ textarea:-moz-placeholder {
  * Removes inner padding and border in FF3+
  */
 button::-moz-focus-inner,
-input[type='button']::-moz-focus-inner,
+input[type="button"]::-moz-focus-inner,
-input[type='reset']::-moz-focus-inner,
+input[type="reset"]::-moz-focus-inner,
-input[type='submit']::-moz-focus-inner {
+input[type="submit"]::-moz-focus-inner {
 	border: 0;
 	padding: 0;
 }

sass/10-gmaps.scss

@@ -1,4 +1,5 @@
 @import "00-config";
+
 /* ----------------------------- */
 /* ==gmaps support               */
 /* ----------------------------- */