diff --git a/bower.json b/bower.json
index 71d32cc..2a85863 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "KNACSS",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "homepage": "http://www.knacss.com/",
   "authors": [
     "Raphaël GOETTER, Alsacreations"
diff --git a/sass/00-config.scss b/sass/00-config.scss
new file mode 100644
index 0000000..6032595
--- /dev/null
+++ b/sass/00-config.scss
@@ -0,0 +1,76 @@
+// Config file : variables, mixins, ...
+
+
+// booleans
+$enable-ie678 			: true; // "true" to activate IE6/IE7/IE8 support
+$enable-styling			: true; // "true" to design basic elements like code, mark, blockquotes, etc.
+$enable-gmaps			: true; // if google maps is used
+$enable-skip-links		: true; // "true" to design skip links for accessibility concerns
+$enable-hyphens			: true; // activate automatic hyphens on small screens
+$enable-helpers-width	: true; // decide whether or not you need width helpers
+$enable-helpers-spacing	: true; // decide whether or not you need spacing helpers
+
+// font sizes
+$base-font-size	: 14px; // if "14px" then 1em = 14px
+$line-height	: 1.5; // equiv line-height 1.5
+$h1-size		: 3.2rem; // equiv "32px"
+$h2-size		: 2.8rem; // equiv "28px"
+$h3-size		: 2.4rem; // equiv "24px"
+$h4-size		: 2.0rem; // equiv "20px"
+$h5-size		: 1.8rem; // equiv "18px"
+$h6-size		: 1.6rem; // equiv "16px"
+
+// font stacks
+$font-stack-common		: Helvetica, Arial, sans-serif; // common font
+$font-stack-monospace	: Consolas, 'DejaVu Sans Mono', Courier, monospace; // monospace font
+$font-stack-universal	: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; // universal stack
+
+// font colors
+$base-color				: #000; // text color on body
+$base-color-link		: #333; // primary links color;
+$base-color-link-hover	: #000; // primary hovered/focused links color;
+
+// backgrounds
+$base-background		: #fff; // body background color
+
+// spacings
+$tiny-value				: 0.5em; // tiny value for margins / paddings
+$small-value			: 1em; // small value for margins / paddings
+$medium-value			: 2em; // medium value for margins / paddings
+$large-value			: 4em; // large value for margins / paddings
+$extra-large-value		: 6em; // extra large value for margins / paddings
+$ultra-large-value		: 10em; // ultra large value for margins / paddings
+
+// breakpoints
+$tiny-screen			: 320px; // tiny screens media query
+$small-screen			: 480px; // small screens media query
+$medium-screen			: 768px; // small screens media query
+$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
+$gutter		: 20px; // gutter value (%, px, em, rem) for grid layouts
+
+
+// Sass mixins : don't touch or you'll be banned ;)
+// px to em/rem 
+
+@mixin rem($size) {	
+	@if unitless($size) {
+	 	font-size: ($size * 1rem) / 1rem * $base-font-size;
+	 	font-size: $size * 1rem;
+	}
+	@else {
+	  @warn "Please make sure `$size` is unitless."
+	}
+}
+@mixin em($size) {	
+	@if unitless($size) {
+		$bf: $base-font-size / 1px;
+	 	font-size: $size / $bf * 1em;
+	}
+	@else {
+	  @warn "Please make sure `$size` is unitless."
+	}
+}
\ No newline at end of file
diff --git a/sass/01-base.scss b/sass/01-base.scss
new file mode 100644
index 0000000..9cff210
--- /dev/null
+++ b/sass/01-base.scss
@@ -0,0 +1,373 @@
+@import "00-config";
+/*!
+* www.KNACSS.com V3.0.0 (2014-05) @author: Raphael Goetter, Alsacreations (with help from Hugo Giraudel)
+* Licence WTFPL http://www.wtfpl.net/
+*/
+
+/* ----------------------------- */
+/* == soft reset                 */
+/* ----------------------------- */
+
+/* switching box model for all elements */
+* {
+	box-sizing: border-box;
+}
+
+/* soft reset */
+html,
+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;
+}
+
+/* ----------------------------- */
+/* == typography                 */
+/* ----------------------------- */
+
+/* base font-size corresponds to "10px" and is adapted to rem unit */
+html {
+	font-size: 62.5%;
+	-webkit-text-size-adjust: 100%;
+	    -ms-text-size-adjust: 100%;
+	        text-size-adjust: 100%;
+}
+body {
+	background-color: $base-background;
+	color: $base-color;
+	font-family: $font-stack-common;
+	font-size: ($base-font-size / 10px) + em;
+	line-height: $line-height;
+}
+
+/* font-sizing for content */
+p,
+.p-like,
+ul,
+ol,
+dl,
+blockquote,
+pre,
+td,
+th,
+label,
+textarea,
+caption,
+details, 
+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;
+}
+
+/* alternate font-sizing */
+.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);
+}
+
+code, 
+pre,
+samp,
+kbd {
+	white-space: pre-line; /* IE fix */
+	white-space: pre-wrap;
+	font-family: $font-stack-monospace;
+	line-height: normal;
+}
+em,
+.em,
+address,
+cite,
+dfn,
+i,
+var {
+	font-style: italic;
+}
+.no-em {
+	font-style: normal;
+}
+strong,
+.strong {
+	font-weight: bold;
+}
+.no-strong {
+	font-weight: normal;
+}
+small,
+sub,
+sup {
+	font-size: smaller;
+}
+
+/* ----------------------------- */
+/* == hiding content             */
+/* ----------------------------- */
+
+.visually-hidden { 
+	position: absolute !important; 
+	clip: rect(1px, 1px, 1px, 1px); 
+	overflow: hidden;
+	height: 1px; width: 1px;
+}
+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,
+blockquote, pre,
+h1, h2, h3, h4, h5, h6 {
+	&:first-child {
+		margin-top: 0;
+	}
+}
+
+/* avoid margins on nested elements */
+li p,
+li .p-like,
+li ul,
+li ol {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+/* max values */
+img, table, td, blockquote, code, pre, textarea, input, video {
+	max-width: 100%;
+}
+
+/* margin-bottom on tables */
+table { margin-bottom: $medium-value; }
+
+
+/* ----------------------------- */
+/* ==layout and modules          */
+/* ----------------------------- */
+
+/* float layout */
+/* module, gains superpower "BFC" Block Formating Context */
+.mod { 
+	overflow: hidden;
+}
+
+/* blocks that needs to be placed under floats */
+.clear,
+.line,
+.row {
+	clear: both;
+}
+
+/* blocks that must contain floats */
+.clearfix,
+.line {
+	&:after {
+		content: "";
+		display: table;
+		clear: both;
+	}
+}
+
+/* table layout */
+.row {
+	display: table;
+	table-layout: fixed;
+	width: 100%;
+}
+.row > *,
+.col {
+	display: table-cell;
+	vertical-align: top;
+}
+
+/* inline-block */
+.inbl {
+	display: inline-block;
+	vertical-align: top;
+}
+
+
+/* alignments (blocks and inline) */
+/* ------------------------------ */
+
+/* left (or starting) elements */
+.left,
+.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 {
+	margin-bottom: $tiny-value;
+}
+.center    { margin-left: auto; 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%; }
+	.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; }
+}
diff --git a/sass/02-grids.scss b/sass/02-grids.scss
new file mode 100644
index 0000000..cc024ee
--- /dev/null
+++ b/sass/02-grids.scss
@@ -0,0 +1,137 @@
+@import "00-config";
+
+/* ---------------------------------- */
+/* ==classic grids                    */
+/* .. use it when gutter size matters */
+/* ---------------------------------- */
+
+/* grids inspired from SUIT https://github.com/suitcss/suit */
+
+.grid { /* overall container of grids */
+	overflow: hidden;
+}
+.grid > * { /* global styles for direct child ex. .grid3 */
+	display: block;
+	padding: 0;
+	margin-left: -$gutter; /* gutter value */
+	text-align: left;
+}
+.grid > * > * { /* global styles for each "cell" */
+	display: inline-block;
+	padding-left: $gutter; /* gutter value */ 
+	margin-left: 0;
+	vertical-align: top;
+}
+/* whitespace fixing for modern browsers including IE9+ */
+:root .grid {
+	font-size: 0;
+}
+:root .grid > * > * {
+	font-size: $base-font-size; /* fallback for Opera Mini */
+	font-size: ($base-font-size / 10px) + rem;
+}
+/* Opera hack */
+.opera:-o-prefocus,
+.grid > * {
+	word-spacing: -0.43em;
+}
+.grid2 > * {width: 50%;}
+.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 > *:first-child,
+.grid2-1 > * + * { width: 33.333%; }
+.grid1-3 > *:first-child,
+.grid3-1 > * + * { width: 25%; }
+.grid3-1 > *:first-child,
+.grid1-3 > * + * { width: 75%; }
+
+/* Responsiv-o-matic */
+@media (max-width: $large-screen) {
+	.grid5 > *,
+	.grid6 > *,
+	.grid8 > *,
+	.grid10 > *,
+	.grid12 > * {width: 33.333%}
+}
+@media (max-width: $small-screen) {
+	.grid3 > *,
+	.grid4 > *,
+	.grid5 > *,
+	.grid6 > *,
+	.grid8 > *,
+	.grid10 > *,
+	.grid12 > * {width: 50%}
+}
+@media (max-width: $tiny-screen) {
+	.grid > * > * {width: 100% !important}
+}
+
+/* ---------------------------------- */
+/* ==autogrids                        */
+/* .. to automatically justify blocs  */
+/* ---------------------------------- */
+
+/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */
+
+[class*="autogrid"] { /* container of autogrids */
+	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+ */
+:root [class*="autogrid"] {
+	font-size: 0;
+}
+:root [class*="autogrid"] > * {
+	font-size: $base-font-size; /* fallback for Opera Mini */
+	font-size: ($base-font-size / 10px) + rem;
+}
+/* Opera hack */
+[class*="autogrid"]:-o-prefocus {
+	word-spacing: -0.43em;
+}
+.autogrid2 > * {width: 49%}
+.autogrid3 > * {width: 32%}
+.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%}
+}
+
+@media (max-width: $small-screen) {
+	.autogrid5 > *,
+	.autogrid6 > *,
+	.autogrid8 > *,
+	.autogrid10 > *,
+	.autogrid12 > * {width: 49%}
+}
+
+@media (max-width: $tiny-screen) {
+	[class*="autogrid"] > * {width: 100%}
+}
\ No newline at end of file
diff --git a/sass/03-tables.scss b/sass/03-tables.scss
new file mode 100644
index 0000000..56f27c0
--- /dev/null
+++ b/sass/03-tables.scss
@@ -0,0 +1,35 @@
+@import "00-config";
+/* ----------------------------- */
+/* ==tables                      */
+/* ----------------------------- */
+
+table,
+.table {
+	width: 100%;
+	max-width : 100%;
+	table-layout: fixed;
+	border-collapse: collapse;
+	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;
+	border: 1px #aaa dotted;
+	vertical-align: top;
+	min-width: $medium-value;
+	cursor: default;
+	text-align: left;
+}
\ No newline at end of file
diff --git a/sass/04-forms.scss b/sass/04-forms.scss
new file mode 100644
index 0000000..0728b0c
--- /dev/null
+++ b/sass/04-forms.scss
@@ -0,0 +1,82 @@
+@import "00-config";
+/* ----------------------------- */
+/* ==forms                       */
+/* ----------------------------- */
+
+/* thanks to HTML5boilerplate,
+* github.com/nathansmith/formalize 
+* and www.sitepen.com
+*/
+
+/* buttons */
+.btn {
+	display: inline-block;
+}
+
+/* forms items */
+form,
+fieldset {
+	border: none;
+}
+input,
+button,
+select,
+label,
+.btn {
+	vertical-align: middle;
+	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;
+	font-family: inherit;
+	font-size: inherit;
+	resize: vertical;
+}
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+	cursor: pointer;
+	-webkit-appearance: button; /* clickable input types in iOS */
+}
+input[type="search"] {
+	-webkit-appearance: textfield;
+}
+
+/* if select styling bugs on WebKit */
+/* select { -webkit-appearance: none; } */
+
+/* 'x' appears on right of search input when text is entered. This removes it */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+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;
+}
+
+/* Removes inner padding and border in FF3+ */
+button::-moz-focus-inner,
+input[type='button']::-moz-focus-inner,
+input[type='reset']::-moz-focus-inner,
+input[type='submit']::-moz-focus-inner {
+	border: 0;
+	padding: 0;
+}
\ No newline at end of file
diff --git a/sass/05-icons.scss b/sass/05-icons.scss
new file mode 100644
index 0000000..bdd4126
--- /dev/null
+++ b/sass/05-icons.scss
@@ -0,0 +1,139 @@
+@import "00-config";
+/* ----------------------------- */
+/* ==icons and bullets	         */
+/* ----------------------------- */
+
+.icon {display: inline-block;}
+
+.icon:before,
+.icon.after:after {
+	content: "";
+	display: inline-block;
+	vertical-align: middle;
+	position: relative; top: -0.1em;
+	margin: 0 0.3em 0 0;
+	font: 1.4em/1 sans-serif;
+	color: #000;
+	text-shadow: 1px 1px 0 rgba(0,0,0,.1);
+	speak: none;
+}
+
+@media (min-device-width: $small-screen) {
+	.icon:before,
+	.icon.after:after {
+	font: 1em/0.6 sans-serif;
+	-webkit-transform: rotateZ(0.05deg);
+	}
+}
+
+.icon.after:after {
+	margin: 0 0 0 8px;
+}
+.icon.after:before {
+	content: "" !important
+}
+.icon-rate:before,
+.icon-rate.after:after {
+	content: "\2605";
+}
+.icon-unrate:before,
+.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";
+	font-weight: bold;
+	font-size: 1.6em;
+	position: relative; 
+		top: -0.15em;
+}
+.icon-bracket2:before,
+.icon-bracket2.after:after {
+	content: "\203A";
+	font-weight: bold;
+	font-size: 1.6em;
+	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";
+	font-size: 1.6em;
+	top: -.05em;
+}
diff --git a/sass/06-rwd.scss b/sass/06-rwd.scss
new file mode 100644
index 0000000..90c4a19
--- /dev/null
+++ b/sass/06-rwd.scss
@@ -0,0 +1,181 @@
+@import "00-config";
+/* ----------------------------- */
+/* ==desktop and HD devices      */
+/* ----------------------------- */
+
+@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 */
+}
+
+/* ---------------------------------- */
+/* ==Responsive large / small / tiny  */
+/* ---------------------------------- */
+
+@media (min-width: $large-screen) {
+
+	/* layouts for large screens */
+	.large-hidden { display: none !important; }
+	.large-visible { display: block !important; }
+	.large-no-float {float: none; }
+	.large-inbl {
+		display: inline-block;
+		float: none;
+		vertical-align: top;
+	}
+	.large-row {
+		display: table;
+		table-layout: fixed;
+		width: 100% !important;
+	}
+	.large-col {
+		display: table-cell;
+		vertical-align: top;
+	}
+
+	/* widths for large screens */
+	.large-w25 { width: 25% !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;
+		float: none !important;
+		clear: none !important;
+		width: auto !important;
+		margin-left: 0 !important;
+		margin-right: 0 !important;
+		border: 0;		
+	}
+
+	/* margins for large screens */
+	.large-man { margin: 0 !important; }
+}
+
+@media (max-width: $small-screen) {
+
+	/* quick reset in small resolution and less */
+	.w600p,
+	.w700p,
+	.w800p,
+	.w960p,
+	.mw960p {
+		width: auto;
+		float: none;
+	} 
+
+	/* layouts for small screens */
+	.small-hidden { display: none !important; }
+	.small-visible { display: block !important; }
+	.small-no-float {float: none; }
+	.small-inbl {
+		display: inline-block;
+		float: none;
+		vertical-align: top;
+	}
+	.small-row {
+		display: table !important;
+		table-layout: fixed !important;
+		width: 100% !important;
+	}
+	.small-col {
+		display: table-cell !important;
+		vertical-align: top !important;
+	}
+
+	/* widths for small screens */
+	.small-w25 { width: 25% !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;
+		float: none !important;
+		clear: none !important;
+		width: auto !important;
+		margin-left: 0 !important;
+		margin-right: 0 !important;
+		border: 0;		
+	}
+	/* margins for small screens */
+	.small-man { margin: 0 !important; }
+	.small-pan { padding: 0 !important; }
+}
+
+@media (max-width: $tiny-screen) {
+
+	/* quick tiny resolution reset */
+	.mod,
+	.col,
+	fieldset {
+		display: block !important;
+		float: none !important;
+		clear: none !important;
+		width: auto !important;
+		margin-left: 0 !important;
+		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-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-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;
+		float: none !important;
+		clear: none !important;
+		width: auto !important;
+		margin-left: 0 !important;
+		margin-right: 0 !important;
+		border: 0;
+	}
+	/* margins for tiny screens */
+	.tiny-man { margin: 0 !important; }
+	.tiny-pan { padding: 0 !important; }
+}
diff --git a/sass/07-flexbox.scss b/sass/07-flexbox.scss
new file mode 100644
index 0000000..cd69d72
--- /dev/null
+++ b/sass/07-flexbox.scss
@@ -0,0 +1,24 @@
+@import "00-config";
+/* flexbox layout 
+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;
+}
\ No newline at end of file
diff --git a/sass/08-print.scss b/sass/08-print.scss
new file mode 100644
index 0000000..c954185
--- /dev/null
+++ b/sass/08-print.scss
@@ -0,0 +1,70 @@
+@import "00-config";
+/* quick print reset */
+@media print {
+	* {
+		background: transparent !important;
+		box-shadow: none !important;
+		text-shadow: none !important;
+	}
+	body {
+		width: auto !important;
+		margin: auto !important;
+		font-family: serif;
+		font-size: 12pt;
+		background-color: #fff !important;
+		color: #333 !important;
+	}
+	p,
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6,
+	blockquote,
+	ul,
+	ol {
+		color: #000 !important;
+		margin: auto !important;
+	}
+	.print {
+		display: block; /* displaying .print elements */
+	}
+	img { 
+		-webkit-filter: grayscale(100%);
+		-moz-filter: grayscale(100%);
+		-ms-filter: grayscale(100%);
+		-o-filter: grayscale(100%);
+		filter: grayscale(100%);
+	}
+	p,
+	blockquote {
+		orphans: 3; /* no orphans */
+		widows: 3; /* no widows */
+	}
+	blockquote,
+	ul,
+	ol {
+		page-break-inside: avoid; /* no breaks inside these elements */
+	}
+	h1 {
+		page-break-before: always; /* page break before main headers */
+	}
+	h1,
+	h2,
+	h3,
+	caption {
+		page-break-after: avoid; /* no breaks after these elements */
+	}
+	a {
+		color: #000 !important;
+		text-decoration: underline !important;
+	}
+	a[href]:after {
+		content: " (" attr(href) ")"; /* displaying URLs */
+	}
+	a[href^="javascript:"]:after,
+	a[href^="#"]:after {
+		content: "";
+	}
+}
\ No newline at end of file
diff --git a/sass/09-booleans.scss b/sass/09-booleans.scss
new file mode 100644
index 0000000..cfd96bf
--- /dev/null
+++ b/sass/09-booleans.scss
@@ -0,0 +1,35 @@
+@import "00-config";
+/* ----------------------------- */
+/* ==booleans                    */
+/* ----------------------------- */
+// skip-links boolean
+@if $enable-skip-links == true {
+	/* styling skip links */
+	.skip-links {
+		position: absolute;
+
+		a {
+			position: absolute;
+			left: -7000px;
+			padding: 0.5em;
+			background: black;
+			color: white;
+			text-decoration: none;
+		
+			&:focus {
+				position: static;
+			}
+		}
+	}
+}
+
+// hyphens boolean
+@if $enable-hyphens == true {
+	@media (max-width: $small-screen) {
+		/* you shall not pass */
+		div, textarea, table, td, th, code, pre, samp {
+			word-wrap: break-word;
+			hyphens: auto;
+		}
+	}
+}
\ No newline at end of file
diff --git a/sass/10-gmaps.scss b/sass/10-gmaps.scss
new file mode 100644
index 0000000..9b4d4bb
--- /dev/null
+++ b/sass/10-gmaps.scss
@@ -0,0 +1,19 @@
+@import "00-config";
+/* ----------------------------- */
+/* ==gmaps support               */
+/* ----------------------------- */
+// google maps boolean
+@if $enable-gmaps == true {
+	/* Google Gmap3 bug fix on images */
+	.gm-style img {
+		height: 100%;
+	}
+	:not(.gm-style) img {
+		height: auto;
+	}
+	.gm-style img,
+	.gmnoscreen img,
+	.gmnoprint img {
+		max-width: none !important;
+	}
+}
\ No newline at end of file
diff --git a/sass/11-ie.scss b/sass/11-ie.scss
new file mode 100644
index 0000000..bd95367
--- /dev/null
+++ b/sass/11-ie.scss
@@ -0,0 +1,102 @@
+@import "00-config";
+/* ----------------------------- */
+/* ==IE6, IE7, IE8 support       */
+/* ----------------------------- */
+// IE6, 7, 8 support boolean
+@if $enable-ie678 == true {
+	$bf: $base-font-size / 1px;
+	/* IE678 support */
+	.ie678 h1, .ie678 .h1-like {
+		$val: $h1-size / 1rem; 
+		$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%;
+	}
+
+	/* hasLayout for IE6/IE7 */
+	.clearfix,
+	.line,
+	.mod,
+	.row,
+	.col {
+		*zoom: 1;
+	}
+	/* inline-block and table-cell for IE6/IE7 */
+	/* warning: .col needs width on IE6/IE7 */
+	.btn,
+	.col,
+	.inbl {
+		*display: inline;
+		*zoom: 1;
+	}
+	.visually-hidden { 
+		*clip: rect(1px 1px 1px 1px); 
+	}
+	
+	/* IE8 grid hack */
+	.ie8 .grid > *,
+	.ie8 [class*="autogrid"] > * {
+		letter-spacing: -0.31em;
+		text-rendering: optimizespeed;
+	}
+	.ie8 .grid > * > *,
+	.ie8 [class*="autogrid"] > * > *{
+		letter-spacing: normal;
+		word-spacing: normal;
+		text-rendering: auto;
+	}
+
+	/* IE7 grid hack */
+	.grid > * > *,
+	[class*="autogrid"] > * > *{
+		*display: inline;
+		*zoom: 1;
+	}
+	
+	/* forms */
+	input[type="checkbox"],
+	input[type="radio"] {
+		padding: 0; /* Corrects excess space around these inputs in IE8/9 */
+	}
+	textarea {
+		overflow: auto; /* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */
+	}
+
+	/* Active box-sizing for IE6/IE7 */
+	/* @source https://github.com/Schepp/box-sizing-polyfill */
+	/*
+	.ie67 * {
+		behavior: url(/lib/box-sizing-polyfill/boxsizing.htc);
+	}
+	*/
+}
\ No newline at end of file
diff --git a/sass/12-styling.scss b/sass/12-styling.scss
new file mode 100644
index 0000000..76d7066
--- /dev/null
+++ b/sass/12-styling.scss
@@ -0,0 +1,104 @@
+@import "00-config";
+/* ----------------------------- */
+/* ==minor stylings              */
+/* ----------------------------- */
+
+// Styling boolean
+@if $enable-styling == true {
+	/* styling elements */
+	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;
+		height: 1px;
+		margin: 1em 0 2em;
+		padding: 0;
+		border: 0;
+		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;
+	}
+
+	/* alternate-vert tables */
+	.alternate-vert { 
+		border: 0;
+		border-right: 1px solid #ccc;
+	}
+	.alternate-vert tr > :first-child {
+		border-bottom: 0;
+	}
+	.alternate-vert tr > * + * {
+		border-top: 1px solid #ccc;
+	}
+
+	/* striped tables */
+	.striped tbody tr:nth-child(odd) {
+		background: #eee;
+		background: rgba(0, 0, 0, .05);
+	}
+
+	/* striped-vert tables */
+	.striped-vert tr > :first-child {
+		background: #eee;
+		background: rgba(0, 0, 0, .05);
+	}
+}
\ No newline at end of file
diff --git a/sass/knacksass.zip b/sass/knacksass.zip
new file mode 100644
index 0000000..b749e02
Binary files /dev/null and b/sass/knacksass.zip differ
diff --git a/sass/knacss.scss b/sass/knacss.scss
new file mode 100644
index 0000000..52f62c7
--- /dev/null
+++ b/sass/knacss.scss
@@ -0,0 +1,26 @@
+// Sass config file
+@import "00-config";
+
+// Sass base styles
+@import "01-base";
+
+// Sass files : chose the ones you need
+@import "02-grids";
+@import "03-tables"; 
+@import "04-forms";
+@import "05-icons";
+@import "06-rwd";
+@import "07-flexbox"; 
+@import "08-print";
+@import "09-booleans";
+@import "10-gmaps";
+@import "11-ie";
+@import "12-styling";
+
+/* ----------------------------- */
+/* ==own stylesheet              */
+/* ----------------------------- */
+
+/* Here should go your own CSS styles */
+/* You can also link them with a Sass @import */
+/* @import "my-styles"; */
\ No newline at end of file