Reorganized a bunch of things; normalized comments across all files; added a message system (_message.scss)

sass/_forms.scss

@@ -1,6 +1,6 @@
-/* ----------------------------- */
+/*----------------------------*\
-/* ==forms                       */
+ * Forms                      *
-/* ----------------------------- */
+\*----------------------------*/
 
 /**
  * Thanks to HTML5boilerplate
@@ -38,6 +38,9 @@ textarea {
 	@include inline-block();
 }
 
+/**
+ * Alternative classes
+ */
 .btn.alternate {}
 .btn.highlight {}
 .login   	   {}

sass/_grids.scss

@@ -1,6 +1,6 @@
-/* ----------------------------- */
+/*----------------------------*\
-/* ==grids                       */
+ * Grids                      *
-/* ----------------------------- */
+\*----------------------------*/
 
 /**
  * Equal grids with 2% gutter 

sass/_helpers.scss

@@ -1,6 +1,6 @@
-/* ----------------------------- */
+/*----------------------------*\
-/* ==helpers                       */
+ * Helpers                    *
-/* ----------------------------- */
+\*----------------------------*/
 
 /**
  * .{SIZE}-hidden and .{SIZE}-visible helpers
@@ -65,3 +65,22 @@ $breakpoints: large, small, tiny;
     hyphens: auto;
 }
 
+/**
+ * Skip links 
+ */
+.skip-links {
+    position: absolute;
+
+    a {
+        position: absolute;
+        left: -7000px;
+        padding: 0.5em;
+        background: #000;
+        color:#fff;
+        text-decoration: none;
+
+        &:focus {
+            position: static;
+        }
+    }
+}

sass/_icons.scss

@@ -1,6 +1,6 @@
-/* ----------------------------- */
+/*----------------------------*\
-/* ==icons                       */
+ * Icons                      *
-/* ----------------------------- */
+\*----------------------------*/
 
 .icon {
   @include inline-block();

sass/_iefix.scss

@@ -1,10 +1,18 @@
-/* HasLayout for IE6/IE7 */
+/*----------------------------*\
+ * IE Fix                     *
+\*----------------------------*/
+
+/**
+ * HasLayout for IE6/IE7 
+ */
 @if $legacy-support-for-ie {
 	.row, .col {
 		*zoom: 1;
 	}
 
-	/* Warning: .col needs a width on IE6/IE7 */
+	/**
+	 * Warning: .col needs a width on IE6/IE7 
+	 */
 	.col {
 		*display: inline;
 		*zoom: 1;

sass/_layout.scss

@@ -1,6 +1,6 @@
-/* ----------------------------- */
+/*----------------------------*\
-/* ==layouts                     */
+ * Layout                     *
-/* ----------------------------- */
+\*----------------------------*/
 
 /**
  * Switching box-model for all elements
@@ -176,10 +176,10 @@ img.right { margin-bottom: 5px; }
 .w300p  { width: 300px; }
 .w400p  { width: 400px; }
 .w500p  { width: 500px; }
-.w600p  { width: 600px; @extend %width-helper; }
+.w600p  { width: 600px;   @extend %width-helper; }
-.w700p  { width: 700px; @extend %width-helper; }
+.w700p  { width: 700px;   @extend %width-helper; }
-.w800p  { width: 800px; @extend %width-helper; }
+.w800p  { width: 800px;   @extend %width-helper; }
-.w960p  { width: 960px; @extend %width-helper; }
+.w960p  { width: 960px;   @extend %width-helper; }
 .mw960p { max-width: 960px; }
 
 /**

sass/_messages.scss

@@ -0,0 +1,45 @@
+/*----------------------------*\
+ * Messages                   *
+\*----------------------------*/
+
+/**
+ * Shared classes between all types of messages
+ */
+%message {
+    padding: .5em;
+    border-radius: .1em;
+    border: 1px solid;
+    text-shadow: 0 1px 0 rgba(white, .2);
+}
+
+/**
+ * Color scheming based on a single color
+ */
+@mixin message-scheme($color) {
+    color: $color;
+    background: lighten($color, 38%);
+    border-color: lighten(adjust-hue($color, -10), 20%);
+}
+
+/**
+ * Message types
+ */
+.message-error {
+    @extend %message;
+    @include message-scheme(#b94a48);
+}
+
+.message-ok {
+    @extend %message;
+    @include message-scheme(#468847);
+}
+
+.message-warning {
+    @extend %message;
+    @include message-scheme(#c09853);
+}
+
+.message-info {
+    @extend %message;
+    @include message-scheme(#3a87ad);
+}

sass/_mixins.scss

@@ -1,9 +1,9 @@
-/* ----------------------------- */
+/*----------------------------*\
-/* ==mixins                      */
+ * Mixins                     *
-/* ----------------------------- */
+\*----------------------------*/
 
 /**
- * Mixin to handle media queries breakpoints
+ * Mixin to handle media queries and retina
  */
 @mixin mq($keyword) {
 	@if $keyword == large  {
@@ -59,6 +59,9 @@
 	}
 }
 
+/**
+ * Mixin to prefix properties
+ */
 @mixin prefix($property, $value) {
 	$vendors: "-webkit-", "-moz-", "-ms-", "-o-", "";
 	@each $v in $vendors {

sass/_print.scss

@@ -1,6 +1,6 @@
-/* ----------------------------- */
+/*----------------------------*\
-/* ==print                       */
+ * Print stylesheet           *
-/* ----------------------------- */
+\*----------------------------*/
 
 @media print {
 	* {

sass/_reset.scss

@@ -1,10 +1,7 @@
-/* ----------------------------- */
+/*----------------------------*\
-/* ==reset                       */
+ * Soft reset                 *
-/* ----------------------------- */
+\*----------------------------*/
 
-/**
- * Soft reset 
- */
 html, body,
 textarea,
 figure, label {
@@ -20,8 +17,7 @@ ul, ol {
 	}
 }
 
-code, pre,
+code, pre, samp, kbd {
-samp, kbd {
 	white-space: pre-wrap;
 	font-family: consolas, 'DejaVu Sans Mono', courier, monospace;
 	line-height: 1em;
@@ -55,8 +51,7 @@ mark {
 	background: #ff0;
 }
 
-sup,
+sup, sub {
-sub {
 	vertical-align: 0;
 	position: relative;
 }
@@ -69,10 +64,6 @@ sub {
 	top: .5ex;
 }
 
-table { 
-	margin-bottom: 1.5em; 
-}
-
 /**
  * Avoid top margins on first content element 
  */
@@ -124,6 +115,17 @@ img {
 	}
 }
 
+/**
+ * Hide script and style tags in case of table mode
+ */
+body > script,
+body > style { 
+	display: none !important;
+}
+
+/**
+ * Force word wrapping on small screens
+ */
 @include mq(small) {
 	div, textarea, 
 	table, td, th, 
@@ -136,30 +138,3 @@ img {
 	    hyphens: auto;
     }
 }
-
-/**
- * Hide script and style tags in case of table mode
- */
-body > script,
-body > style { 
-	display: none !important;
-}
-
-
-/* skip-links */
-.skip-links {
-	position: absolute;
-
-	a {
-		position: absolute;
-		left: -7000px;
-		padding: 0.5em;
-		background: #000;
-		color:#fff;
-		text-decoration: none;
-
-		&:focus {
-			position: static;
-		}
-	}
-}

sass/_rwd.scss

@@ -26,14 +26,6 @@
 	zoom: 1.0;
 }
 
-@include mq(medium) {
-	/* Big resources like background-images, font-faces, etc. */
-}
-
-@include mq(retina) {
-	/* Retina-specific stuff here */
-}
-
 /* ---------------------------------- */
 /* ==Responsive large / small / tiny */
 /* ---------------------------------- */

sass/_tables.scss

@@ -1,8 +1,8 @@
-/* ----------------------------- */
+/*----------------------------*\
-/* ==tables                      */
+ * Tables                     *
-/* ----------------------------- */
+\*----------------------------*/
 
-$border: 1px solid #ccc;
+$border: 1px solid #ccc; // Default border style for all tables
 
 table,
 .table {
@@ -19,6 +19,7 @@ table,
 table {
 	width: 100%;
 	border: $border;
+	margin-bottom: 1.5em; 
 
 	&#recaptcha_table {
 		table-layout: auto; /* 1 */
@@ -35,9 +36,12 @@ caption {
 	font-style: italic;	
 }
 
+/**
+ * Remove thead on tiny screens
+ */
 thead {
 	@include mq(tiny) {
-		display: none;
+		display: none; /* 1 */
 	}
 }
 

sass/_typography.scss

@@ -7,17 +7,19 @@
  * 2. Orientation iOS font-size fix
  */
 html {
-	font-size: 62.5%; /* 1 */
+	font: 62.5%/1.5 "Century Gothic", helvetica, arial, sans-serif; /* 1 */
+	color: #000;
+	
 	@media (orientation: landscape) and (max-device-width: 768px) {
 		-webkit-text-size-adjust: 100%; /* 2 */
 	}
 }
 
+/**
+ * 1. Put the base font-size at 14px (1.4rem)
+ */
 body {
-	color: #000;
+	@include rem(14); /* 1 */
-	font-family: "Century Gothic", helvetica, arial, sans-serif;
-	@include rem(14);
-	line-height: 1.5;
 }
 
 /**

sass/knacss.scss

@@ -1,7 +1,10 @@
-/*
+/**
-* www.KNACSS.com V2.6d @author: Raphael Goetter, Alsacreations
+ * www.KNACSS.com V2.6d @author: Raphael Goetter, Alsacreations
-* Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/
+ * Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/
-*/
+ * 
+ * Sass version maintained by @HugoGiraudel
+ * Please report any bug or suggestion
+ */
 
 /** 
  * Enable support for old browsers
@@ -14,14 +17,15 @@ $legacy-support-for-mozilla: true; /* 2 */
 /**
  * Import modules of your choice
  */
-@import "mixins";
+@import "mixins";     // Sass only
-@import "helpers";
+@import "reset";      // Home made reset
-@import "forms";
+@import "helpers";    // A couple of helper classes and Sass placeholders
-@import "icons";
+@import "layout";     // Everything to layout your pages
-@import "print";
+@import "grids";      // Small grid system
-@import "tables";
+@import "typography"; // Typography baseline and vertical rythm
-@import "grids";
+@import "tables";     // Tables
-@import "layout";
+@import "forms";      // Forms
-@import "typography";
+@import "icons";      // Icons (unicode based) and bullets
-@import "iefix";
+@import "messages";   // Message system
-@import "reset";
+@import "iefix";      // Some IE fixes
+@import "print";      // Print stylesheet