From b1c96f437318a94658a750d8891f1b9429edff0e Mon Sep 17 00:00:00 2001
From: magsout <guillaume.demesy@gmail.com>
Date: Tue, 5 May 2015 23:22:30 +0200
Subject: [PATCH] Added namespace var Sass + Less version

---
 bower.json               |   2 +-
 changelog.md             |  10 ++-
 less/_00-config.less     |   3 +
 less/_01b-base.less      |  61 ++++++++-------
 less/_02-layout.less     |  60 +++++++--------
 less/_03-grids.less      |  50 ++++++------
 less/_04-tables.less     |   8 +-
 less/_05-forms.less      |   8 +-
 less/_06-helpers.less    | 160 +++++++++++++++++++--------------------
 less/_07-responsive.less | 152 ++++++++++++++++++-------------------
 less/_08-print.less      |  50 ++++++------
 less/_09-misc.less       |   6 +-
 less/_10-styling.less    |  22 +++---
 package.json             |   2 +-
 sass/_00-config.scss     |   5 +-
 sass/_01b-base.scss      |  62 +++++++--------
 sass/_02-layout.scss     |  60 +++++++--------
 sass/_03-grids.scss      |  46 +++++------
 sass/_04-tables.scss     |   8 +-
 sass/_05-forms.scss      |  14 ++--
 sass/_06-helpers.scss    | 160 +++++++++++++++++++--------------------
 sass/_07-responsive.scss | 154 ++++++++++++++++++-------------------
 sass/_08-print.scss      |  48 ++++++------
 sass/_09-misc.scss       |  18 ++---
 sass/_10-styling.scss    |  22 +++---
 25 files changed, 600 insertions(+), 591 deletions(-)

diff --git a/bower.json b/bower.json
index 665f4e7..291b8c7 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "KNACSS",
-  "version": "4.1.6",
+  "version": "4.2.0",
   "homepage": "http://www.knacss.com/",
   "authors": [
     "Raphaël GOETTER, Alsacreations"
diff --git a/changelog.md b/changelog.md
index ee0ae57..dce1427 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,3 +1,7 @@
+# changelog v4.2.0 (05 mai 2015)
+
+- possibilité d'ajouter un namespace à l'ensemble des classes (configurable dans le fichier config de Less et Sass)
+
 # changelog v4.1.6 (17 avril 2015)
 
 - mise en commentaire des sauts de page print avant un h1
@@ -14,7 +18,7 @@
 
 Les classes relatives à flexbox ont été renommées pour ne pas entrer en conflit avec des outils tels que Modernizer (qui ajoutent aux-aussi ce genre de classes).
 
-Anciens noms : 
+Anciens noms :
 
 ```
 .flexbox, .flexbox-h
@@ -24,7 +28,7 @@ Anciens noms :
 .flexitem-first, .flexitem-medium, .flexitem-last
 ```
 
-Nouveaux noms : 
+Nouveaux noms :
 
 ```
 .flex-container, .flex-container-h
@@ -49,7 +53,7 @@ Nouveaux noms :
 
 * documentation en français
 * PDF pense-bête mis à jour : http://knacss.com/KNACSS-cheatsheet.pdf
-* gros ménage de printemps (gros nettoyage de tous les espaces et tabulations disgrâcieux) 
+* gros ménage de printemps (gros nettoyage de tous les espaces et tabulations disgrâcieux)
 * dans la section "quick print reset", ajout des classes .p-like, h1-like, h2-like etc.
 * mise en commun globale de tous les styles p avec .p-like (h1 et h1-like, etc.).
 * déplacement et commentaire sur la règle body > script
diff --git a/less/_00-config.less b/less/_00-config.less
index 9509a59..91853d9 100644
--- a/less/_00-config.less
+++ b/less/_00-config.less
@@ -55,3 +55,6 @@
 @number:  4; // number of equal columns
 @left:    2; // left side of uneven columns
 @right:   1; // right side of uneven columns
+
+//namespace (default : empty)
+@kna-namespace:~"";
diff --git a/less/_01b-base.less b/less/_01b-base.less
index 0d79335..6b76c1e 100644
--- a/less/_01b-base.less
+++ b/less/_01b-base.less
@@ -16,7 +16,7 @@ ol {
 	padding-left: 2em;
 }
 
-ul.unstyled {
+ul.@{kna-namespace}unstyled {
 	list-style: none;
 }
 
@@ -40,24 +40,24 @@ figure {
 /* ----------------------------- */
 
 html {
-	
+
 	/* set base font-size to equiv "10px", which is adapted to rem unit */
 	font-size: 62.5%;
-	
+
 	/* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
 	/* thanks to @guardian, @victorbritopro and @eQRoeil */
 	font-size: ~'calc(1em * .625)';
-	
+
 	/* disallow text zooming on orientation change (non standard property) */
 	-webkit-text-size-adjust: 100%;
 	    -ms-text-size-adjust: 100%;
 }
 
 body {
-	
+
 	/* set body font-size in em (1.4em equiv "14px") */
 	font-size: unit((@base-font-size / 10), em);
-	
+
 	background-color: @base-background;
 	color: @base-color;
 	font-family: @font-stack-common;
@@ -73,7 +73,7 @@ a {
 
 /* font-sizing for content */
 p,
-.p-like,
+.@{kna-namespace}p-like,
 ul,
 ol,
 dl,
@@ -92,55 +92,55 @@ figure {
 }
 
 h1,
-.h1-like {
+.@{kna-namespace}h1-like {
 	font-size: @h1-size;
 	font-family: @font-stack-headings;
 }
 
 h2,
-.h2-like {
+.@{kna-namespace}h2-like {
 	font-size: @h2-size;
 	font-family: @font-stack-headings;
 }
 
 h3,
-.h3-like {
+.@{kna-namespace}h3-like {
 	font-size: @h3-size;
 }
 
 h4,
-.h4-like {
+.@{kna-namespace}h4-like {
 	font-size: @h4-size;
 }
 
 h5,
-.h5-like {
+.@{kna-namespace}h5-like {
 	font-size: @h5-size;
 }
 
 h6,
-.h6-like {
+.@{kna-namespace}h6-like {
 	font-size: @h6-size;
 }
 
 /* alternate font-sizing */
-.smaller {
+.@{kna-namespace}smaller {
 	font-size: 0.6em;
 }
 
-.small {
+.@{kna-namespace}small {
 	font-size: 0.8em;
 }
 
-.big {
+.@{kna-namespace}big {
 	font-size: 1.2em;
 }
 
-.bigger {
+.@{kna-namespace}bigger {
 	font-size: 1.5em;
 }
 
-.biggest {
+.@{kna-namespace}biggest {
 	font-size: 2em;
 }
 
@@ -156,7 +156,7 @@ kbd {
 }
 
 em,
-.italic,
+.@{kna-namespace}italic,
 address,
 cite,
 i,
@@ -175,7 +175,7 @@ sup {
 /* ----------------------------- */
 
 /* hidden but not for an assistive technology like a screen reader, Yahoo! method */
-.visually-hidden {
+.@{kna-namespace}visually-hidden {
 	position: absolute !important;
 	border: 0 !important;
 	height: 1px !important;
@@ -186,13 +186,13 @@ sup {
 }
 
 @media (max-width: @small-screen) {
-	.no-small-screen {
+	.@{kna-namespace}no-small-screen {
 		display: none;
 	}
 }
 
 @media (min-width: @large-screen) {
-	.no-large-screen {
+	.@{kna-namespace}no-large-screen {
 		display: none;
 	}
 }
@@ -203,24 +203,24 @@ sup {
 
 /* avoid top margins on first content element */
 p,
-.p-like,
+.@{kna-namespace}p-like,
 ul,
 ol,
 dl,
 blockquote,
 pre,
 h1,
-.h1-like,
+.@{kna-namespace}h1-like,
 h2,
-.h2-like,
+.@{kna-namespace}h2-like,
 h3,
-.h3-like,
+.@{kna-namespace}h3-like,
 h4,
-.h4-like,
+.@{kna-namespace}h4-like,
 h5,
-.h5-like,
+.@{kna-namespace}h5-like,
 h6,
-.h6-like {
+.@{kna-namespace}h6-like {
 	&:first-child {
 		margin-top: 0;
 	}
@@ -228,7 +228,7 @@ h6,
 
 /* avoid margins on nested elements */
 li p,
-li .p-like,
+li .@{kna-namespace}p-like,
 li ul,
 li ol {
 	margin-top: 0;
@@ -253,4 +253,3 @@ svg {
 table {
 	margin-bottom: @medium-value;
 }
-
diff --git a/less/_02-layout.less b/less/_02-layout.less
index 8a26ad5..44189fa 100644
--- a/less/_02-layout.less
+++ b/less/_02-layout.less
@@ -3,20 +3,20 @@
 /* ----------------------------- */
 
 /* module, gains superpower "BFC" Block Formating Context */
-.mod {
+.@{kna-namespace}mod {
 	overflow: hidden;
 }
 
 /* blocks that needs to be placed under floats */
-.clear,
-.line,
-.row {
+.@{kna-namespace}clear,
+.@{kna-namespace}line,
+.@{kna-namespace}row {
 	clear: both;
 }
 
 /* blocks that must contain floats */
-.clearfix,
-.line {
+.@{kna-namespace}clearfix,
+.@{kna-namespace}line {
 	&::after {
 		content: "";
 		display: table;
@@ -26,63 +26,63 @@
 }
 
 /* simple blocks alignment */
-.left {
+.@{kna-namespace}left {
 	margin-right: auto;
 }
 
-.right {
+.@{kna-namespace}right {
 	margin-left: auto;
 }
 
-.center {
+.@{kna-namespace}center {
 	margin-left: auto;
 	margin-right: auto;
 }
 
 /* text and contents alignment */
-.txtleft {
+.@{kna-namespace}txtleft {
 	text-align: left;
 }
 
-.txtright {
+.@{kna-namespace}txtright {
 	text-align: right;
 }
 
-.txtcenter {
+.@{kna-namespace}txtcenter {
 	text-align: center;
 }
 
 /* floating elements */
-.fl {
+.@{kna-namespace}fl {
 	float: left;
 }
 
-img.fl {
+img.@{kna-namespace}fl {
 	margin-right: @small-value;
 }
 
-.fr {
+.@{kna-namespace}fr {
 	float: right;
 }
 
-img.fr {
+img.@{kna-namespace}fr {
 	margin-left: @small-value;
 }
 
-img.fl,
-img.fr {
+img.@{kna-namespace}fl,
+img.@{kna-namespace}fr {
 	margin-bottom: @tiny-value;
 }
 
 /* table layout */
-.row {
+.@{kna-namespace}row {
 	display: table;
 	table-layout: fixed;
 	width: 100%;
 }
 
-.row > *,
-.col {
+.@{kna-namespace}row > *,
+.@{kna-namespace}col {
 	display: table-cell;
 	vertical-align: top;
 }
@@ -93,7 +93,7 @@ body > script {
 }
 
 /* inline-block */
-.inbl {
+.@{kna-namespace}inbl {
 	display: inline-block;
 	vertical-align: top;
 }
@@ -102,35 +102,35 @@ body > script {
 http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
 */
 
-[class*="flex-container"] {
+[class*="@{kna-namespace}flex-container"] {
 	display : flex;
 	flex-wrap: wrap;
 }
 
-.flex-container-h {
+.@{kna-namespace}flex-container-h {
 	flex-direction: row;
 }
 
-.flex-container-v {
+.@{kna-namespace}flex-container-v {
 	flex-direction: column;
 }
 
-.flex-item-fluid {
+.@{kna-namespace}flex-item-fluid {
 	flex: 1;
 }
 
-.flex-item-first {
+.@{kna-namespace}flex-item-first {
 	order : -1;
 }
 
-.flex-item-medium {
+.@{kna-namespace}flex-item-medium {
 	order : 0;
 }
 
-.flex-item-last {
+.@{kna-namespace}flex-item-last {
 	order : 1;
 }
 
-.flex-item-center {
+.@{kna-namespace}flex-item-center {
 	margin: auto;
 }
diff --git a/less/_03-grids.less b/less/_03-grids.less
index cb6ebc6..c6ae2c2 100644
--- a/less/_03-grids.less
+++ b/less/_03-grids.less
@@ -17,7 +17,7 @@
 // left = left ratio column (default = 2) / right = right ratio column (default = 1)
 // example : .grid-perso { .uneven-grid(2, 1); }
 
-[class*="grid-"] {
+[class*="@{kna-namespace}grid-"] {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
@@ -25,7 +25,7 @@
 	margin-left: -@gutter;
 }
 
-[class*="grid-"] > * {
+[class*="@{kna-namespace}grid-"] > * {
 	flex: 0 0 auto;
 	display: block; /* IE fix */
 	width: ~'calc(100% * 1 / @{number} - @{gutter})';
@@ -34,18 +34,18 @@
 
 // LESS mixins for *equal* columns grid container
 // example : .grid-perso { .grid(12); }
-.grid(@number:@number, @gutter:@gutter) { 
+.grid(@number:@number, @gutter:@gutter) {
  & > * {
 	  width: ~'calc(100% * 1 / @{number} - @{gutter})';
 	}
-	& > .flex-item-double {
+	& > .@{kna-namespace}flex-item-double {
 		width: ~'calc(100% * 2 / @{number} - @{gutter})';
 	}
 	@media (min-width: (@tiny-screen + 1)) and (max-width: @small-screen) {
 		& > * {
 			width: ~'calc(100% * 1 / 2 - @{gutter})';
 		}
-		& > .flex-item-double {
+		& > .@{kna-namespace}flex-item-double {
 			width: ~'calc(100% - @{gutter})';
 		}
 	}
@@ -53,7 +53,7 @@
 		& > * {
 			width: ~'calc(100% - @{gutter})';
 		}
-		& > .flex-item-double {
+		& > .@{kna-namespace}flex-item-double {
 			width: ~'calc(100% - @{gutter})';
 		}
 	}
@@ -61,45 +61,45 @@
 
 // Examples : will be compiled in CSS
 
-.grid-2 {
+.@{kna-namespace}grid-2 {
 	.grid(2);
 }
 
-.grid-3 {
+.@{kna-namespace}grid-3 {
 	.grid(3);
 }
 
-.grid-4 {
+.@{kna-namespace}grid-4 {
 	.grid(4);
 }
 
-.grid-5 {
+.@{kna-namespace}grid-5 {
 	.grid(5);
 }
 
-.grid-6 {
+.@{kna-namespace}grid-6 {
 	.grid(6);
 }
 
-.grid-7 {
+.@{kna-namespace}grid-7 {
 	.grid(7);
 }
 
-.grid-8 {
+.@{kna-namespace}grid-8 {
 	.grid(8);
 }
 
-.grid-10 {
+.@{kna-namespace}grid-10 {
 	.grid(10);
 }
 
-.grid-12 {
+.@{kna-namespace}grid-12 {
 	.grid(12);
 }
 
 // LESS mixins for *unequal* columns grid container
 // example : .grid-perso { .uneven-grid(2, 1); }
- .uneven-grid(@left:@left, @right:@right, @gutter:@gutter) { 
+ .uneven-grid(@left:@left, @right:@right, @gutter:@gutter) {
 	& > *:nth-child(odd) {
 		@size: (@left / (@left + @right)) * 100%;
 		width: ~'calc(@{size} - @{gutter})';
@@ -118,34 +118,34 @@
 
 // Examples : will be compiled in CSS
 
-.grid-2-1 {
+.@{kna-namespace}grid-2-1 {
 	.uneven-grid(2,1);
 }
 
-.grid-1-2 {
+.@{kna-namespace}grid-1-2 {
 	.uneven-grid(1,2);
 }
 
-.grid-3-1 {
+.@{kna-namespace}grid-3-1 {
 	.uneven-grid(3,1);
 }
 
-.grid-1-3 {
+.@{kna-namespace}grid-1-3 {
 	.uneven-grid(1,3);
 }
 
-.grid-3-2 {
+.@{kna-namespace}grid-3-2 {
 	.uneven-grid(3,2);
 }
 
-.grid-2-3 {
+.@{kna-namespace}grid-2-3 {
 	.uneven-grid(2,3);
 }
 
-.grid-4-1 {
+.@{kna-namespace}grid-4-1 {
 	.uneven-grid(4,1);
 }
 
-.grid-1-4 {
+.@{kna-namespace}grid-1-4 {
 	.uneven-grid(1,4);
-}
\ No newline at end of file
+}
diff --git a/less/_04-tables.less b/less/_04-tables.less
index fe968ad..7d740d1 100644
--- a/less/_04-tables.less
+++ b/less/_04-tables.less
@@ -3,7 +3,7 @@
 /* ----------------------------- */
 
 table,
-.table {
+.@{kna-namespace}table {
 	width: 100%;
 	max-width : 100%;
 	table-layout: fixed;
@@ -12,12 +12,12 @@ table,
 	border: 1px solid #ccc;
 }
 
-.table {
+.@{kna-namespace}table {
 	display: table;
 }
 
-table#recaptcha_table,
-table.table-auto {
+table#@{kna-namespace}recaptcha_table,
+table.@{kna-namespace}table-auto {
 	table-layout:auto;
 }
 
diff --git a/less/_05-forms.less b/less/_05-forms.less
index d222b19..7c5ba61 100644
--- a/less/_05-forms.less
+++ b/less/_05-forms.less
@@ -7,7 +7,7 @@
 */
 
 /* buttons */
-.btn {
+.@{kna-namespace}btn {
 	display: inline-block;
 }
 
@@ -21,7 +21,7 @@ input,
 button,
 select,
 label,
-.btn {
+.@{kna-namespace}btn {
 	vertical-align: middle;
 	font-family: inherit;
 	font-size: inherit;
@@ -74,7 +74,7 @@ textarea:-moz-placeholder {
 	color: #777;
 }
 
-.btn:focus,
+.@{kna-namespace}btn:focus,
 input[type="button"]:focus,
 button:focus {
 	outline: 0;
@@ -86,7 +86,7 @@ button:focus {
 }
 
 /* unstyled forms */
-.unstyled {
+.@{kna-namespace}unstyled {
 	button&,
 	input[type="button"]&,
 	input[type="submit"]&,
diff --git a/less/_06-helpers.less b/less/_06-helpers.less
index 2dbd802..d157b9c 100644
--- a/less/_06-helpers.less
+++ b/less/_06-helpers.less
@@ -4,120 +4,120 @@
 /* ---------------------------------- */
 
 /* blocks widths (percentage and pixels) */
-.w10 {
+.@{kna-namespace}w10 {
 	width: 10%;
 }
 
-.w20 {
+.@{kna-namespace}w20 {
 	width: 20%;
 }
 
-.w25 {
+.@{kna-namespace}w25 {
 	width: 25%;
 }
 
-.w30 {
+.@{kna-namespace}w30 {
 	width: 30%;
 }
 
-.w33 {
+.@{kna-namespace}w33 {
 	width: 33.3333%;
 }
 
-.w40 {
+.@{kna-namespace}w40 {
 	width: 40%;
 }
 
-.w50 {
+.@{kna-namespace}w50 {
 	width: 50%;
 }
 
-.w60 {
+.@{kna-namespace}w60 {
 	width: 60%;
 }
 
-.w66 {
+.@{kna-namespace}w66 {
 	width: 66.6666%;
 }
 
-.w70 {
+.@{kna-namespace}w70 {
 	width: 70%;
 }
 
-.w75 {
+.@{kna-namespace}w75 {
 	width: 75%;
 }
 
-.w80 {
+.@{kna-namespace}w80 {
 	width: 80%;
 }
 
-.w90 {
+.@{kna-namespace}w90 {
 	width: 90%;
 }
 
-.w100 {
+.@{kna-namespace}w100 {
 	width: 100%;
 }
 
 
-.w50p {
+.@{kna-namespace}w50p {
 	width: 50px;
 }
 
-.w100p {
+.@{kna-namespace}w100p {
 	width: 100px;
 }
 
-.w150p {
+.@{kna-namespace}w150p {
 	width: 150px;
 }
 
-.w200p {
+.@{kna-namespace}w200p {
 	width: 200px;
 }
 
-.w300p {
+.@{kna-namespace}w300p {
 	width: 300px;
 }
 
-.w400p {
+.@{kna-namespace}w400p {
 	width: 400px;
 }
 
-.w500p {
+.@{kna-namespace}w500p {
 	width: 500px;
 }
 
-.w600p {
+.@{kna-namespace}w600p {
 	width: 600px;
 }
 
-.w700p {
+.@{kna-namespace}w700p {
 	width: 700px;
 }
 
-.w800p {
+.@{kna-namespace}w800p {
 	width: 800px;
 }
 
-.w960p {
+.@{kna-namespace}w960p {
 	width: 960px;
 }
 
-.mw960p {
+.@{kna-namespace}mw960p {
 	max-width: 960px;
 }
 
-.w1140p {
+.@{kna-namespace}w1140p {
 	width: 1140px;
 }
 
-.mw1140p {
+.@{kna-namespace}mw1140p {
 	max-width: 1140px;
 }
 
-.wauto {
+.@{kna-namespace}wauto {
 	width: auto;
 }
 
@@ -126,172 +126,172 @@ p,m = padding,margin
 a,t,r,b,l = all,top,right,bottom,left
 s,m,l,n = small, medium, large, none
 */
-.man,
-.ma0 {
+.@{kna-namespace}man,
+.@{kna-namespace}ma0 {
 	margin: 0;
 }
 
-.pan,
-.pa0 {
+.@{kna-namespace}pan,
+.@{kna-namespace}pa0 {
 	padding: 0;
 }
 
-.mas {
+.@{kna-namespace}mas {
 	margin: @small-value;
 }
 
-.mam {
+.@{kna-namespace}mam {
 	margin: @medium-value;
 }
 
-.mal {
+.@{kna-namespace}mal {
 	margin: @large-value;
 }
 
-.pas {
+.@{kna-namespace}pas {
 	padding: @small-value;
 }
 
-.pam {
+.@{kna-namespace}pam {
 	padding: @medium-value;
 }
 
-.pal {
+.@{kna-namespace}pal {
 	padding: @large-value;
 }
 
-.mtn,
-.mt0 {
+.@{kna-namespace}mtn,
+.@{kna-namespace}mt0 {
 	margin-top: 0;
 }
 
-.mts {
+.@{kna-namespace}mts {
 	margin-top: @small-value;
 }
 
-.mtm {
+.@{kna-namespace}mtm {
 	margin-top: @medium-value;
 }
 
-.mtl {
+.@{kna-namespace}mtl {
 	margin-top: @large-value;
 }
 
-.mrn,
-.mr0 {
+.@{kna-namespace}mrn,
+.@{kna-namespace}mr0 {
 	margin-right: 0;
 }
 
-.mrs {
+.@{kna-namespace}mrs {
 	margin-right: @small-value;
 }
 
-.mrm {
+.@{kna-namespace}mrm {
 	margin-right: @medium-value;
 }
 
-.mrl {
+.@{kna-namespace}mrl {
 	margin-right: @large-value;
 }
 
-.mbn,
-.mb0 {
+.@{kna-namespace}mbn,
+.@{kna-namespace}mb0 {
 	margin-bottom: 0;
 }
 
-.mbs {
+.@{kna-namespace}mbs {
 	margin-bottom: @small-value;
 }
 
-.mbm {
+.@{kna-namespace}mbm {
 	margin-bottom: @medium-value;
 }
 
-.mbl {
+.@{kna-namespace}mbl {
 	margin-bottom: @large-value;
 }
 
-.mln,
-.ml0 {
+.@{kna-namespace}mln,
+.@{kna-namespace}ml0 {
 	margin-left: 0;
 }
 
-.mls {
+.@{kna-namespace}mls {
 	margin-left: @small-value;
 }
 
-.mlm {
+.@{kna-namespace}mlm {
 	margin-left: @medium-value;
 }
 
-.mll {
+.@{kna-namespace}mll {
 	margin-left: @large-value;
 }
 
-.ptn,
-.pt0 {
+.@{kna-namespace}ptn,
+.@{kna-namespace}pt0 {
 	padding-top: 0;
 }
 
-.pts {
+.@{kna-namespace}pts {
 	padding-top: @small-value;
 }
 
-.ptm {
+.@{kna-namespace}ptm {
 	padding-top: @medium-value;
 }
 
-.ptl {
+.@{kna-namespace}ptl {
 	padding-top: @large-value;
 }
 
-.prn,
-.pr0 {
+.@{kna-namespace}prn,
+.@{kna-namespace}pr0 {
 	padding-right: 0;
 }
 
-.prs {
+.@{kna-namespace}prs {
 	padding-right: @small-value;
 }
 
-.prm {
+.@{kna-namespace}prm {
 	padding-right: @medium-value;
 }
 
-.prl {
+.@{kna-namespace}prl {
 	padding-right: @large-value;
 }
 
-.pbn,
-.pb0 {
+.@{kna-namespace}pbn,
+.@{kna-namespace}pb0 {
 	padding-bottom: 0;
 }
 
-.pbs {
+.@{kna-namespace}pbs {
 	padding-bottom: @small-value;
 }
 
-.pbm {
+.@{kna-namespace}pbm {
 	padding-bottom: @medium-value;
 }
 
-.pbl {
+.@{kna-namespace}pbl {
 	padding-bottom: @large-value;
 }
 
-.pln,
-.pl0 {
+.@{kna-namespace}pln,
+.@{kna-namespace}pl0 {
 	padding-left: 0;
 }
 
-.pls {
+.@{kna-namespace}pls {
 	padding-left: @small-value;
 }
 
-.plm {
+.@{kna-namespace}plm {
 	padding-left: @medium-value;
 }
 
-.pll {
+.@{kna-namespace}pll {
 	padding-left: @large-value;
-}
\ No newline at end of file
+}
diff --git a/less/_07-responsive.less b/less/_07-responsive.less
index a9c0db3..c401735 100644
--- a/less/_07-responsive.less
+++ b/less/_07-responsive.less
@@ -17,58 +17,58 @@
 @media (min-width: (@medium-screen + 1)) {
 
 	/* layouts for large screens */
-	.large-hidden {
+	.@{kna-namespace}large-hidden {
 		display: none !important;
 	}
 
-	.large-visible {
+	.@{kna-namespace}large-visible {
 		display: block !important;
 	}
 
-	.large-no-float {
+	.@{kna-namespace}large-no-float {
 		float: none;
 	}
 
-	.large-inbl {
+	.@{kna-namespace}large-inbl {
 		display: inline-block;
 		float: none;
 		vertical-align: top;
 	}
 
-	.large-row {
+	.@{kna-namespace}large-row {
 		display: table;
 		table-layout: fixed;
 		width: 100% !important;
 	}
 
-	.large-col {
+	.@{kna-namespace}large-col {
 		display: table-cell;
 		vertical-align: top;
 	}
 
 	/* widths for large screens */
-	.large-w25 {
+	.@{kna-namespace}large-w25 {
 		width: 25% !important;
 	}
 
-	.large-w33 {
+	.@{kna-namespace}large-w33 {
 		width: 33.3333% !important;
 	}
 
-	.large-w50 {
+	.@{kna-namespace}large-w50 {
 		width: 50% !important;
 	}
 
-	.large-w66 {
+	.@{kna-namespace}large-w66 {
 		width: 66.6666% !important;
 	}
 
-	.large-w75 {
+	.@{kna-namespace}large-w75 {
 		width: 75% !important;
 	}
 
-	.large-w100,
-	.large-wauto {
+	.@{kna-namespace}large-w100,
+	.@{kna-namespace}large-wauto {
 		display: block !important;
 		float: none !important;
 		clear: none !important;
@@ -79,7 +79,7 @@
 	}
 
 	/* margins for large screens */
-	.large-man {
+	.@{kna-namespace}large-man {
 		margin: 0 !important;
 	}
 }
@@ -91,58 +91,58 @@
 @media (min-width: (@small-screen + 1)) and (max-width: @medium-screen) {
 
 	/* layouts for medium screens */
-	.medium-hidden {
+	.@{kna-namespace}medium-hidden {
 		display: none !important;
 	}
 
-	.medium-visible {
+	.@{kna-namespace}medium-visible {
 		display: block !important;
 	}
 
-	.medium-no-float {
+	.@{kna-namespace}medium-no-float {
 		float: none;
 	}
 
-	.medium-inbl {
+	.@{kna-namespace}medium-inbl {
 		display: inline-block;
 		float: none;
 		vertical-align: top;
 	}
 
-	.medium-row {
+	.@{kna-namespace}medium-row {
 		display: table;
 		table-layout: fixed;
 		width: 100% !important;
 	}
 
-	.medium-col {
+	.@{kna-namespace}medium-col {
 		display: table-cell;
 		vertical-align: top;
 	}
 
 	/* widths for medium screens */
-	.medium-w25 {
+	.@{kna-namespace}medium-w25 {
 		width: 25% !important;
 	}
 
-	.medium-w33 {
+	.@{kna-namespace}medium-w33 {
 		width: 33.3333% !important;
 	}
 
-	.medium-w50 {
+	.@{kna-namespace}medium-w50 {
 		width: 50% !important;
 	}
 
-	.medium-w66 {
+	.@{kna-namespace}medium-w66 {
 		width: 66.6666% !important;
 	}
 
-	.medium-w75 {
+	.@{kna-namespace}medium-w75 {
 		width: 75% !important;
 	}
 
-	.medium-w100,
-	.medium-wauto {
+	.@{kna-namespace}medium-w100,
+	.@{kna-namespace}medium-wauto {
 		display: block !important;
 		float: none !important;
 		clear: none !important;
@@ -153,8 +153,8 @@
 	}
 
 	/* margins for medium screens */
-	.medium-man,
-	.medium-ma0 {
+	.@{kna-namespace}medium-man,
+	.@{kna-namespace}medium-ma0 {
 		margin: 0 !important;
 	}
 }
@@ -166,68 +166,68 @@
 @media (min-width: (@tiny-screen + 1)) and (max-width: @small-screen) {
 
 	/* quick reset in small resolution and less */
-	.w600p,
-	.w700p,
-	.w800p,
-	.w960p,
-	.mw960p {
+	.@{kna-namespace}w600p,
+	.@{kna-namespace}w700p,
+	.@{kna-namespace}w800p,
+	.@{kna-namespace}w960p,
+	.@{kna-namespace}mw960p {
 		width: auto;
 		float: none;
 	}
 
 	/* layouts for small screens */
-	.small-hidden {
+	.@{kna-namespace}small-hidden {
 		display: none !important;
 	}
 
-	.small-visible {
+	.@{kna-namespace}small-visible {
 		display: block !important;
 	}
 
-	.small-no-float {
+	.@{kna-namespace}small-no-float {
 		float: none;
 	}
 
-	.small-inbl {
+	.@{kna-namespace}small-inbl {
 		display: inline-block;
 		float: none;
 		vertical-align: top;
 	}
 
-	.small-row {
+	.@{kna-namespace}small-row {
 		display: table !important;
 		table-layout: fixed !important;
 		width: 100% !important;
 	}
 
-	.small-col {
+	.@{kna-namespace}small-col {
 		display: table-cell !important;
 		vertical-align: top !important;
 	}
 
 	/* widths for small screens */
-	.small-w25 {
+	.@{kna-namespace}small-w25 {
 		width: 25% !important;
 	}
 
-	.small-w33 {
+	.@{kna-namespace}small-w33 {
 		width: 33.3333% !important;
 	}
 
-	.small-w50 {
+	.@{kna-namespace}small-w50 {
 		width: 50% !important;
 	}
 
-	.small-w66 {
+	.@{kna-namespace}small-w66 {
 		width: 66.6666% !important;
 	}
 
-	.small-w75 {
+	.@{kna-namespace}small-w75 {
 		width: 75% !important;
 	}
 
-	.small-w100,
-	.small-wauto {
+	.@{kna-namespace}small-w100,
+	.@{kna-namespace}small-wauto {
 		display: block !important;
 		float: none !important;
 		clear: none !important;
@@ -238,13 +238,13 @@
 	}
 
 	/* margins for small screens */
-	.small-man,
-	.small-ma0 {
+	.@{kna-namespace}small-man,
+	.@{kna-namespace}small-ma0 {
 		margin: 0 !important;
 	}
 
-	.small-pan,
-	.small-pa0 {
+	.@{kna-namespace}small-pan,
+	.@{kna-namespace}small-pa0 {
 		padding: 0 !important;
 	}
 
@@ -257,8 +257,8 @@
 @media (max-width: @tiny-screen) {
 
 	/* quick tiny resolution reset */
-	.mod,
-	.col,
+	.@{kna-namespace}mod,
+	.@{kna-namespace}col,
 	fieldset {
 		display: block !important;
 		float: none !important;
@@ -268,49 +268,49 @@
 		margin-right: 0 !important;
 		border: 0;
 	}
-	
-	.flex-container {
+
+	.@{kna-namespace}flex-container {
 		flex-direction: column;
 	}
 
-	.w300p,
-	.w400p,
-	.w500p {
+	.@{kna-namespace}w300p,
+	.@{kna-namespace}w400p,
+	.@{kna-namespace}w500p {
 		width: auto;
 		float: none;
 	}
 
-	.row {
+	.@{kna-namespace}row {
 		display: block !important;
 		width: 100% !important;
 	}
 
 	/* layouts for tiny screens */
-	.tiny-hidden {
+	.@{kna-namespace}tiny-hidden {
 		display: none !important;
 	}
 
-	.tiny-visible {
+	.@{kna-namespace}tiny-visible {
 		display: block !important;
 	}
 
-	.tiny-no-float {
+	.@{kna-namespace}tiny-no-float {
 		float: none;
 	}
 
-	.tiny-inbl {
+	.@{kna-namespace}tiny-inbl {
 		display: inline-block;
 		float: none;
 		vertical-align: top;
 	}
 
-	.tiny-row {
+	.@{kna-namespace}tiny-row {
 		display: table !important;
 		table-layout: fixed !important;
 		width: 100% !important;
 	}
 
-	.tiny-col {
+	.@{kna-namespace}tiny-col {
 		display: table-cell !important;
 		vertical-align: top !important;
 	}
@@ -327,28 +327,28 @@
 	}
 
 	/* widths for tiny screens */
-	.tiny-w25 {
+	.@{kna-namespace}tiny-w25 {
 		width: 25% !important;
 	}
 
-	.tiny-w33 {
+	.@{kna-namespace}tiny-w33 {
 		width: 33.3333% !important;
 	}
 
-	.tiny-w50 {
+	.@{kna-namespace}tiny-w50 {
 		width: 50% !important;
 	}
 
-	.tiny-w66 {
+	.@{kna-namespace}tiny-w66 {
 		width: 66.6666% !important;
 	}
 
-	.tiny-w75 {
+	.@{kna-namespace}tiny-w75 {
 		width: 75% !important;
 	}
 
-	.tiny-w100,
-	.tiny-wauto {
+	.@{kna-namespace}tiny-w100,
+	.@{kna-namespace}tiny-wauto {
 		display: block !important;
 		float: none !important;
 		clear: none !important;
@@ -359,13 +359,13 @@
 	}
 
 	/* margins for tiny screens */
-	.tiny-man,
-	.tiny-ma0 {
+	.@{kna-namespace}tiny-man,
+	.@{kna-namespace}tiny-ma0 {
 		margin: 0 !important;
 	}
 
-	.tiny-pan,
-	.tiny-pa0 {
+	.@{kna-namespace}tiny-pan,
+	.@{kna-namespace}tiny-pa0 {
 		padding: 0 !important;
 	}
 
diff --git a/less/_08-print.less b/less/_08-print.less
index 180aba4..6e25ea1 100644
--- a/less/_08-print.less
+++ b/less/_08-print.less
@@ -1,12 +1,12 @@
 /* quick print reset */
 @media print {
-	
+
 	* {
 		background: transparent !important;
 		box-shadow: none !important;
 		text-shadow: none !important;
 	}
-	
+
 	body {
 		width: auto !important;
 		margin: auto !important;
@@ -15,79 +15,79 @@
 		background-color: #fff !important;
 		color: #333 !important;
 	}
-	
+
 	p,
-	.p-like,
+	.@{kna-namespace}p-like,
 	h1,
-	.h1-like,
+	.@{kna-namespace}h1-like,
 	h2,
-	.h2-like,
+	.@{kna-namespace}h2-like,
 	h3,
-	.h3-like,
+	.@{kna-namespace}h3-like,
 	h4,
-	.h4-like,
+	.@{kna-namespace}h4-like,
 	h5,
-	.h5-like,
+	.@{kna-namespace}h5-like,
 	h6,
-	.h6-like,
+	.@{kna-namespace}h6-like,
 	blockquote,
 	ul,
 	ol {
 		color: #000 !important;
 		margin: auto !important;
 	}
-	
-	.print {
+
+	.@{kna-namespace}print {
 		display: block;
 	}
-	
-	.no-print {
+
+	.@{kna-namespace}no-print {
 		display: none;
 	}
-	
+
 	/* no orphans, no widows */
 	p,
-	.p-like,
+	.@{kna-namespace}p-like,
 	blockquote {
 		orphans: 3;
 		widows: 3;
 	}
-	
+
 	/* no breaks inside these elements */
 	blockquote,
 	ul,
 	ol {
 		page-break-inside: avoid;
 	}
-	
+
 	/* page break before main headers
 	h1,
 	.h1-like {
 		page-break-before: always;
 	}
 	*/
-	
+
 	/* no breaks after these elements */
 	h1,
-	.h1-like,
+	.@{kna-namespace}h1-like,
 	h2,
-	.h2-like,
+	.@{kna-namespace}h2-like,
 	h3,
-	.h3-like,
+	.@{kna-namespace}h3-like,
 	caption {
 		page-break-after: avoid;
 	}
-	
+
 	a {
 		color: #000 !important;
 		text-decoration: underline !important;
 	}
-	
+
 	/* displaying URLs */
 	a[href]::after {
 		content: " (" attr(href) ")";
 	}
-	
+
 	a[href^="javascript:"]::after,
 	a[href^="#"]::after {
 		content: "";
diff --git a/less/_09-misc.less b/less/_09-misc.less
index 808ee3b..f55f8c3 100644
--- a/less/_09-misc.less
+++ b/less/_09-misc.less
@@ -3,9 +3,9 @@
 /* ----------------------------- */
 
 /* styling skip links */
-.skip-links {
+.@{kna-namespace}skip-links {
 	position: absolute;
-	
+
 	& a {
 		position: absolute;
 		overflow: hidden;
@@ -14,7 +14,7 @@
 		background: black;
 		color: white;
 		text-decoration: none;
-		
+
 		&:focus {
 			position: static;
 			overflow: visible;
diff --git a/less/_10-styling.less b/less/_10-styling.less
index 2f0531b..bfa3c92 100644
--- a/less/_10-styling.less
+++ b/less/_10-styling.less
@@ -77,12 +77,12 @@ q {
 }
 
 q,
-.q {
+.@{kna-namespace}q {
 	quotes: "“\00a0" "\00a0”";
 }
 
 q:lang(fr),
-.q:lang(fr) {
+.@{kna-namespace}q:lang(fr) {
 	quotes: "«\00a0" "\00a0»";
 }
 
@@ -98,44 +98,44 @@ hr {
 }
 
 /* alternate tables */
-.table-alternate {
+.@{kna-namespace}table-alternate {
 	border: 0;
 }
 
-.table-alternate tbody {
+.@{kna-namespace}table-alternate tbody {
 	border: 1px solid #ccc;
 }
 
-.table-alternate thead tr > * + * {
+.@{kna-namespace}table-alternate thead tr > * + * {
 	border-left: 0;
 }
 
-.table-alternate tbody tr > * + * {
+.@{kna-namespace}table-alternate tbody tr > * + * {
 	border-left: 1px solid #ccc;
 }
 
 /* alternate-vert tables */
-.table-alternate-v {
+.@{kna-namespace}table-alternate-v {
 	border: 0;
 	border-right: 1px solid #ccc;
 }
 
-.table-alternate-v tr > :first-child {
+.@{kna-namespace}table-alternate-v tr > :first-child {
 	border-bottom: 0;
 }
 
-.table-alternate-v tr > * + * {
+.@{kna-namespace}table-alternate-v tr > * + * {
 	border-top: 1px solid #ccc;
 }
 
 /* striped tables */
-.table-striped tbody tr:nth-child(odd) {
+.@{kna-namespace}table-striped tbody tr:nth-child(odd) {
 	background: #eee;
 	background: rgba(0, 0, 0, .05);
 }
 
 /* striped-vert tables */
-.table-striped-v tr > :first-child {
+.@{kna-namespace}table-striped-v tr > :first-child {
 	background: #eee;
 	background: rgba(0, 0, 0, .05);
 }
diff --git a/package.json b/package.json
index ecd0e07..b176ff6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "knacss",
-    "version": "4.1.6",
+    "version": "4.2.0",
     "homepage": "http://www.knacss.com/",
     "bugs": "https://github.com/raphaelgoetter/KNACSS/issues",
     "author": [
diff --git a/sass/_00-config.scss b/sass/_00-config.scss
index c718e51..cef4647 100644
--- a/sass/_00-config.scss
+++ b/sass/_00-config.scss
@@ -54,4 +54,7 @@ $ultra-large-screen     : 1920px; // ultra large screens
 $gutter:  1em; // gutter value for grid layouts. Unit can be: %, px, em, rem
 $number:  4; // number of equal columns
 $left:    2; // left side of uneven columns
-$right:   1; // right side of uneven columns
\ No newline at end of file
+$right:   1; // right side of uneven columns
+
+//kna-namespace (default : null)
+$kna-namespace: null !default;
diff --git a/sass/_01b-base.scss b/sass/_01b-base.scss
index 0d2255e..d6b869e 100644
--- a/sass/_01b-base.scss
+++ b/sass/_01b-base.scss
@@ -16,7 +16,7 @@ ol {
 	padding-left: 2em;
 }
 
-ul.unstyled {
+ul.#{$kna-namespace}unstyled {
 	list-style: none;
 }
 
@@ -40,24 +40,24 @@ figure {
 /* ----------------------------- */
 
 html {
-	
+
 	/* set base font-size to equiv "10px", which is adapted to rem unit */
 	font-size: 62.5%;
-	
+
 	/* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
 	/* thanks to @guardian, @victorbritopro and @eQRoeil */
 	font-size: calc(1em * 0.625);
-	
+
 	/* disallow text zooming on orientation change (non standard property) */
 	-webkit-text-size-adjust: 100%;
 	    -ms-text-size-adjust: 100%;
 }
 
 body {
-	
+
 	/* set body font-size in em (1.4em equiv "14px") */
 	font-size: ($base-font-size / 10px) + em;
-	
+
 	background-color: $base-background;
 	color: $base-color;
 	font-family: $font-stack-common;
@@ -73,7 +73,7 @@ a {
 
 /* font-sizing for content */
 p,
-.p-like,
+.#{$kna-namespace}p-like,
 ul,
 ol,
 dl,
@@ -91,50 +91,50 @@ figure {
 	line-height: $line-height;
 }
 
-h1, .h1-like {
+h1, .#{$kna-namespace}h1-like {
 	font-size: $h1-size;
 	font-family: $font-stack-headings;
 }
 
-h2, .h2-like {
+h2, .#{$kna-namespace}h2-like {
 	font-size: $h2-size;
 	font-family: $font-stack-headings;
 }
 
-h3, .h3-like {
+h3, .#{$kna-namespace}h3-like {
 	font-size: $h3-size;
 }
 
-h4, .h4-like {
+h4, .#{$kna-namespace}h4-like {
 	font-size: $h4-size;
 }
 
-h5, .h5-like {
+h5, .#{$kna-namespace}h5-like {
 	font-size: $h5-size;
 }
 
-h6, .h6-like {
+h6, .#{$kna-namespace}h6-like {
 	font-size: $h6-size;
 }
 
 /* alternate font-sizing */
-.smaller {
+.#{$kna-namespace}smaller {
 	font-size: 0.6em;
 }
 
-.small {
+.#{$kna-namespace}small {
 	font-size: 0.8em;
 }
 
-.big {
+.#{$kna-namespace}big {
 	font-size: 1.2em;
 }
 
-.bigger {
+.#{$kna-namespace}bigger {
 	font-size: 1.5em;
 }
 
-.biggest {
+.#{$kna-namespace}biggest {
 	font-size: 2em;
 }
 
@@ -150,7 +150,7 @@ kbd {
 }
 
 em,
-.italic,
+.#{$kna-namespace}italic,
 address,
 cite,
 i,
@@ -169,7 +169,7 @@ sup {
 /* ----------------------------- */
 
 /* hidden but not for assistance tools, Yahoo! method */
-.visually-hidden {
+.#{$kna-namespace}visually-hidden {
 	position: absolute !important;
 	border: 0 !important;
 	height: 1px !important;
@@ -180,13 +180,13 @@ sup {
 }
 
 @media (max-width: $small-screen) {
-	.no-small-screen {
+	.#{$kna-namespace}no-small-screen {
 		display: none;
 	}
 }
 
 @media (min-width: $large-screen) {
-	.no-large-screen {
+	.#{$kna-namespace}no-large-screen {
 		display: none;
 	}
 }
@@ -197,24 +197,24 @@ sup {
 
 /* avoid top margins on first content element */
 p,
-.p-like,
+.#{$kna-namespace}p-like,
 ul,
 ol,
 dl,
 blockquote,
 pre,
 h1,
-.h1-like,
+.#{$kna-namespace}h1-like,
 h2,
-.h2-like,
+.#{$kna-namespace}h2-like,
 h3,
-.h3-like,
+.#{$kna-namespace}h3-like,
 h4,
-.h4-like,
+.#{$kna-namespace}h4-like,
 h5,
-.h5-like,
+.#{$kna-namespace}h5-like,
 h6,
-.h6-like {
+.#{$kna-namespace}h6-like {
 	&:first-child {
 		margin-top: 0;
 	}
@@ -222,7 +222,7 @@ h6,
 
 /* avoid margins on nested elements */
 li p,
-li .p-like,
+li .#{$kna-namespace}p-like,
 li ul,
 li ol {
 	margin-top: 0;
@@ -245,5 +245,5 @@ svg {
 
 /* margin-bottom on tables */
 table {
-	margin-bottom: $medium-value; 
+	margin-bottom: $medium-value;
 }
diff --git a/sass/_02-layout.scss b/sass/_02-layout.scss
index 2a871b3..632b106 100644
--- a/sass/_02-layout.scss
+++ b/sass/_02-layout.scss
@@ -3,20 +3,20 @@
 /* ----------------------------- */
 
 /* module, gains superpower "BFC" Block Formating Context */
-.mod {
+.#{$kna-namespace}mod {
 	overflow: hidden;
 }
 
 /* blocks that needs to be placed under floats */
-.clear,
-.line,
-.row {
+.#{$kna-namespace}clear,
+.#{$kna-namespace}line,
+.#{$kna-namespace}row {
 	clear: both;
 }
 
 /* blocks that must contain floats */
-.clearfix,
-.line {
+.#{$kna-namespace}clearfix,
+.#{$kna-namespace}line {
 	&::after {
 		content: "";
 		display: table;
@@ -26,63 +26,63 @@
 }
 
 /* simple blocks alignment */
-.left {
+.#{$kna-namespace}left {
 	margin-right: auto;
 }
 
-.right {
+.#{$kna-namespace}right {
 	margin-left: auto;
 }
 
-.center {
+.#{$kna-namespace}center {
 	margin-left: auto;
 	margin-right: auto;
 }
 
 /* text and contents alignment */
-.txtleft {
+.#{$kna-namespace}txtleft {
 	text-align: left;
 }
 
-.txtright {
+.#{$kna-namespace}txtright {
 	text-align: right;
 }
 
-.txtcenter {
+.#{$kna-namespace}txtcenter {
 	text-align: center;
 }
 
 /* floating elements */
-.fl {
+.#{$kna-namespace}fl {
 	float: left;
 }
 
-img.fl {
+img.#{$kna-namespace}fl {
 	margin-right: $small-value;
 }
 
-.fr {
+.#{$kna-namespace}fr {
 	float: right;
 }
 
-img.fr {
+img.#{$kna-namespace}fr {
 	margin-left: $small-value;
 }
 
-img.fl,
-img.fr {
+img.#{$kna-namespace}fl,
+img.#{$kna-namespace}fr {
 	margin-bottom: $tiny-value;
 }
 
 /* table layout */
-.row {
+.#{$kna-namespace}row {
 	display: table;
 	table-layout: fixed;
 	width: 100%;
 }
 
-.row > *,
-.col {
+.#{$kna-namespace}row > *,
+.#{$kna-namespace}col {
 	display: table-cell;
 	vertical-align: top;
 }
@@ -93,7 +93,7 @@ body > script {
 }
 
 /* inline-block */
-.inbl {
+.#{$kna-namespace}inbl {
 	display: inline-block;
 	vertical-align: top;
 }
@@ -102,35 +102,35 @@ body > script {
 http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
 */
 
-[class*="flex-container"] {
+[class*="#{$kna-namespace}flex-container"] {
 	display : flex;
 	flex-wrap: wrap;
 }
 
-.flex-container-h {
+.#{$kna-namespace}flex-container-h {
 	flex-direction: row;
 }
 
-.flex-container-v {
+.#{$kna-namespace}flex-container-v {
 	flex-direction: column;
 }
 
-.flex-item-fluid {
+.#{$kna-namespace}flex-item-fluid {
 	flex: 1;
 }
 
-.flex-item-first {
+.#{$kna-namespace}flex-item-first {
 	order : -1;
 }
 
-.flex-item-medium {
+.#{$kna-namespace}flex-item-medium {
 	order : 0;
 }
 
-.flex-item-last {
+.#{$kna-namespace}flex-item-last {
 	order : 1;
 }
 
-.flex-item-center {
+.#{$kna-namespace}flex-item-center {
 	margin: auto;
 }
diff --git a/sass/_03-grids.scss b/sass/_03-grids.scss
index 7ac73f2..0fd7291 100644
--- a/sass/_03-grids.scss
+++ b/sass/_03-grids.scss
@@ -17,7 +17,7 @@
 // left = left ratio column (default = 2) / right = right ratio column (default = 1) / gutter (default = 1em)
 // example : .grid-perso { @include uneven-grid(2, 1, 10px); }
 
-[class*="grid-"] {
+[class*="#{$kna-namespace}grid-"] {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
@@ -25,7 +25,7 @@
 	margin-left: -$gutter;
 }
 
-[class*="grid-"] > * {
+[class*="#{$kna-namespace}grid-"] > * {
 	flex: 0 0 auto;
 	display: block; /* IE fix */
 	width: calc(100% * 1 / #{$number} - #{$gutter});
@@ -38,14 +38,14 @@
 & > * {
 	width: calc(100% * 1 / #{$number} - #{$gutter});
 }
-& > .flex-item-double {
+& > .#{$kna-namespace}flex-item-double {
 	width: calc(100% * 2 / #{$number} - #{$gutter});
 }
 	@media (min-width: ($tiny-screen + 1)) and (max-width: $small-screen) {
 		& > * {
 			width: calc(100% * 1 / 2 - #{$gutter});
 		}
-		& > .flex-item-double {
+		& > .#{$kna-namespace}flex-item-double {
 			width: calc(100% - #{$gutter});
 		}
 	}
@@ -53,7 +53,7 @@
 		& > * {
 			width: calc(100% - #{$gutter});
 		}
-		& > .flex-item-double {
+		& > .#{$kna-namespace}flex-item-double {
 			width: calc(100% - #{$gutter});
 		}
 	}
@@ -61,39 +61,39 @@
 
 // Examples : will be compiled in CSS
 
-.grid-2 {
+.#{$kna-namespace}grid-2 {
 	@include grid(2);
 }
 
-.grid-3 {
+.#{$kna-namespace}grid-3 {
 	@include grid(3);
 }
 
-.grid-4 {
+.#{$kna-namespace}grid-4 {
 	@include grid(4);
 }
 
-.grid-5 {
+.#{$kna-namespace}grid-5 {
 	@include grid(5);
 }
 
-.grid-6 {
+.#{$kna-namespace}grid-6 {
 	@include grid(6);
 }
 
-.grid-7 {
+.#{$kna-namespace}grid-7 {
 	@include grid(7);
 }
 
-.grid-8 {
+.#{$kna-namespace}grid-8 {
 	@include grid(8);
 }
 
-.grid-10 {
+.#{$kna-namespace}grid-10 {
 	@include grid(10);
 }
 
-.grid-12 {
+.#{$kna-namespace}grid-12 {
 	@include grid(12);
 }
 
@@ -118,34 +118,34 @@
 
 // Examples : will be compiled in CSS
 
-.grid-2-1 {
+.#{$kna-namespace}grid-2-1 {
 	@include uneven-grid(2,1);
 }
 
-.grid-1-2 {
+.#{$kna-namespace}grid-1-2 {
 	@include uneven-grid(1,2);
 }
 
-.grid-3-1 {
+.#{$kna-namespace}grid-3-1 {
 	@include uneven-grid(3,1);
 }
 
-.grid-1-3 {
+.#{$kna-namespace}grid-1-3 {
 	@include uneven-grid(1,3);
 }
 
-.grid-3-2 {
+.#{$kna-namespace}grid-3-2 {
 	@include uneven-grid(3,2);
 }
 
-.grid-2-3 {
+.#{$kna-namespace}grid-2-3 {
 	@include uneven-grid(2,3);
 }
 
-.grid-4-1 {
+.#{$kna-namespace}grid-4-1 {
 	@include uneven-grid(4,1);
 }
 
-.grid-1-4 {
+.#{$kna-namespace}grid-1-4 {
 	@include uneven-grid(1,4);
-}
\ No newline at end of file
+}
diff --git a/sass/_04-tables.scss b/sass/_04-tables.scss
index 8979941..70c8be8 100644
--- a/sass/_04-tables.scss
+++ b/sass/_04-tables.scss
@@ -3,7 +3,7 @@
 /* ----------------------------- */
 
 table,
-.table {
+.#{$kna-namespace}table {
 	width: 100%;
 	max-width : 100%;
 	table-layout: fixed;
@@ -12,12 +12,12 @@ table,
 	border: 1px solid #ccc;
 }
 
-.table {
+.#{$kna-namespace}table {
 	display: table;
 }
 
-table#recaptcha_table,
-table.table-auto {
+table##{$kna-namespace}recaptcha_table,
+table.#{$kna-namespace}table-auto {
 	table-layout:auto;
 }
 
diff --git a/sass/_05-forms.scss b/sass/_05-forms.scss
index 1b7e061..6819fde 100644
--- a/sass/_05-forms.scss
+++ b/sass/_05-forms.scss
@@ -7,7 +7,7 @@
 */
 
 /* buttons */
-.btn {
+.#{$kna-namespace}btn {
 	display: inline-block;
 }
 
@@ -21,7 +21,7 @@ input,
 button,
 select,
 label,
-.btn {
+.#{$kna-namespace}btn {
 	vertical-align: middle;
 	font-family: inherit;
 	font-size: inherit;
@@ -74,7 +74,7 @@ textarea:-moz-placeholder {
 	color: #777;
 }
 
-.btn:focus,
+.#{$kna-namespace}btn:focus,
 input[type="button"]:focus,
 button:focus {
 	outline: 0;
@@ -87,10 +87,10 @@ button:focus {
 
 /* unstyled forms */
 
-button.unstyled,
-input[type="button"].unstyled,
-input[type="submit"].unstyled,
-input[type="reset"].unstyled {
+button.#{$kna-namespace}unstyled,
+input[type="button"].#{$kna-namespace}unstyled,
+input[type="submit"].#{$kna-namespace}unstyled,
+input[type="reset"].#{$kna-namespace}unstyled {
 	padding: 0;
 	border: none;
 	line-height: 1;
diff --git a/sass/_06-helpers.scss b/sass/_06-helpers.scss
index 8dbd817..80a383d 100644
--- a/sass/_06-helpers.scss
+++ b/sass/_06-helpers.scss
@@ -4,119 +4,119 @@
 /* ---------------------------------- */
 
 /* blocks widths (percentage and pixels) */
-.w10 {
+.#{$kna-namespace}w10 {
 	width: 10%;
 }
 
-.w20 {
+.#{$kna-namespace}w20 {
 	width: 20%;
 }
 
-.w25 {
+.#{$kna-namespace}w25 {
 	width: 25%;
 }
 
-.w30 {
+.#{$kna-namespace}w30 {
 	width: 30%;
 }
 
-.w33 {
+.#{$kna-namespace}w33 {
 	width: 33.3333%;
 }
 
-.w40 {
+.#{$kna-namespace}w40 {
 	width: 40%;
 }
 
-.w50 {
+.#{$kna-namespace}w50 {
 	width: 50%;
 }
 
-.w60 {
+.#{$kna-namespace}w60 {
 	width: 60%;
 }
 
-.w66 {
+.#{$kna-namespace}w66 {
 	width: 66.6666%;
 }
 
-.w70 {
+.#{$kna-namespace}w70 {
 	width: 70%;
 }
 
-.w75 {
+.#{$kna-namespace}w75 {
 	width: 75%;
 }
 
-.w80 {
+.#{$kna-namespace}w80 {
 	width: 80%;
 }
 
-.w90 {
+.#{$kna-namespace}w90 {
 	width: 90%;
 }
 
-.w100 {
+.#{$kna-namespace}w100 {
 	width: 100%;
 }
 
-.w50p {
+.#{$kna-namespace}w50p {
 	width: 50px;
 }
 
-.w100p {
+.#{$kna-namespace}w100p {
 	width: 100px;
 }
 
-.w150p {
+.#{$kna-namespace}w150p {
 	width: 150px;
 }
 
-.w200p {
+.#{$kna-namespace}w200p {
 	width: 200px;
 }
 
-.w300p {
+.#{$kna-namespace}w300p {
 	width: 300px;
 }
 
-.w400p {
+.#{$kna-namespace}w400p {
 	width: 400px;
 }
 
-.w500p {
+.#{$kna-namespace}w500p {
 	width: 500px;
 }
 
-.w600p {
+.#{$kna-namespace}w600p {
 	width: 600px;
 }
 
-.w700p {
+.#{$kna-namespace}w700p {
 	width: 700px;
 }
 
-.w800p {
+.#{$kna-namespace}w800p {
 	width: 800px;
 }
 
-.w960p {
+.#{$kna-namespace}w960p {
 	width: 960px;
 }
 
-.mw960p {
+.#{$kna-namespace}mw960p {
 	max-width: 960px;
 }
 
-.w1140p {
+.#{$kna-namespace}w1140p {
 	width: 1140px;
 }
 
-.mw1140p {
+.#{$kna-namespace}mw1140p {
 	max-width: 1140px;
 }
 
-.wauto {
+.#{$kna-namespace}wauto {
 	width: auto;
 }
 
@@ -125,172 +125,172 @@ p,m = padding,margin
 a,t,r,b,l = all,top,right,bottom,left
 s,m,l,n = small, medium, large, none
 */
-.man,
-.ma0 {
+.#{$kna-namespace}man,
+.#{$kna-namespace}ma0 {
 	margin: 0;
 }
 
-.pan,
-.pa0 {
+.#{$kna-namespace}pan,
+.#{$kna-namespace}pa0 {
 	padding: 0;
 }
 
-.mas {
+.#{$kna-namespace}mas {
 	margin: $small-value;
 }
 
-.mam {
+.#{$kna-namespace}mam {
 	margin: $medium-value;
 }
 
-.mal {
+.#{$kna-namespace}mal {
 	margin: $large-value;
 }
 
-.pas {
+.#{$kna-namespace}pas {
 	padding: $small-value;
 }
 
-.pam {
+.#{$kna-namespace}pam {
 	padding: $medium-value;
 }
 
-.pal {
+.#{$kna-namespace}pal {
 	padding: $large-value;
 }
 
-.mtn,
-.mt0 {
+.#{$kna-namespace}mtn,
+.#{$kna-namespace}mt0 {
 	margin-top: 0;
 }
 
-.mts {
+.#{$kna-namespace}mts {
 	margin-top: $small-value;
 }
 
-.mtm {
+.#{$kna-namespace}mtm {
 	margin-top: $medium-value;
 }
 
-.mtl {
+.#{$kna-namespace}mtl {
 	margin-top: $large-value;
 }
 
-.mrn,
-.mr0 {
+.#{$kna-namespace}mrn,
+.#{$kna-namespace}mr0 {
 	margin-right: 0;
 }
 
-.mrs {
+.#{$kna-namespace}mrs {
 	margin-right: $small-value;
 }
 
-.mrm {
+.#{$kna-namespace}mrm {
 	margin-right: $medium-value;
 }
 
-.mrl {
+.#{$kna-namespace}mrl {
 	margin-right: $large-value;
 }
 
-.mbn,
-.mb0 {
+.#{$kna-namespace}mbn,
+.#{$kna-namespace}mb0 {
 	margin-bottom: 0;
 }
 
-.mbs {
+.#{$kna-namespace}mbs {
 	margin-bottom: $small-value;
 }
 
-.mbm {
+.#{$kna-namespace}mbm {
 	margin-bottom: $medium-value;
 }
 
-.mbl {
+.#{$kna-namespace}mbl {
 	margin-bottom: $large-value;
 }
 
-.mln,
-.ml0 {
+.#{$kna-namespace}mln,
+.#{$kna-namespace}ml0 {
 	margin-left: 0;
 }
 
-.mls {
+.#{$kna-namespace}mls {
 	margin-left: $small-value;
 }
 
-.mlm {
+.#{$kna-namespace}mlm {
 	margin-left: $medium-value;
 }
 
-.mll {
+.#{$kna-namespace}mll {
 	margin-left: $large-value;
 }
 
-.ptn,
-.pt0 {
+.#{$kna-namespace}ptn,
+.#{$kna-namespace}pt0 {
 	padding-top: 0;
 }
 
-.pts {
+.#{$kna-namespace}pts {
 	padding-top: $small-value;
 }
 
-.ptm {
+.#{$kna-namespace}ptm {
 	padding-top: $medium-value;
 }
 
-.ptl {
+.#{$kna-namespace}ptl {
 	padding-top: $large-value;
 }
 
-.prn,
-.pr0 {
+.#{$kna-namespace}prn,
+.#{$kna-namespace}pr0 {
 	padding-right: 0;
 }
 
-.prs {
+.#{$kna-namespace}prs {
 	padding-right: $small-value;
 }
 
-.prm {
+.#{$kna-namespace}prm {
 	padding-right: $medium-value;
 }
 
-.prl {
+.#{$kna-namespace}prl {
 	padding-right: $large-value;
 }
 
-.pbn,
-.pb0 {
+.#{$kna-namespace}pbn,
+.#{$kna-namespace}pb0 {
 	padding-bottom: 0;
 }
 
-.pbs {
+.#{$kna-namespace}pbs {
 	padding-bottom: $small-value;
 }
 
-.pbm {
+.#{$kna-namespace}pbm {
 	padding-bottom: $medium-value;
 }
 
-.pbl {
+.#{$kna-namespace}pbl {
 	padding-bottom: $large-value;
 }
 
-.pln,
-.pl0 {
+.#{$kna-namespace}pln,
+.#{$kna-namespace}pl0 {
 	padding-left: 0;
 }
 
-.pls {
+.#{$kna-namespace}pls {
 	padding-left: $small-value;
 }
 
-.plm {
+.#{$kna-namespace}plm {
 	padding-left: $medium-value;
 }
 
-.pll {
+.#{$kna-namespace}pll {
 	padding-left: $large-value;
-}
\ No newline at end of file
+}
diff --git a/sass/_07-responsive.scss b/sass/_07-responsive.scss
index 0c401e5..4c7e7de 100644
--- a/sass/_07-responsive.scss
+++ b/sass/_07-responsive.scss
@@ -17,56 +17,56 @@
 @media (min-width: ($medium-screen + 1)) {
 
 	/* layouts for large screens */
-	.large-hidden {
+	.#{$kna-namespace}large-hidden {
 		display: none !important;
 	}
 
-	.large-visible {
+	.#{$kna-namespace}large-visible {
 		display: block !important;
 	}
 
-	.large-no-float {
+	.#{$kna-namespace}large-no-float {
 		float: none;
 	}
 
-	.large-inbl {
+	.#{$kna-namespace}large-inbl {
 		display: inline-block;
 		float: none;
 		vertical-align: top;
 	}
-	.large-row {
+	.#{$kna-namespace}large-row {
 		display: table;
 		table-layout: fixed;
 		width: 100% !important;
 	}
-	.large-col {
+	.#{$kna-namespace}large-col {
 		display: table-cell;
 		vertical-align: top;
 	}
 
 	/* widths for large screens */
-	.large-w25 {
+	.#{$kna-namespace}large-w25 {
 		width: 25% !important;
 	}
 
-	.large-w33 {
+	.#{$kna-namespace}large-w33 {
 		width: 33.3333% !important;
 	}
 
-	.large-w50 {
+	.#{$kna-namespace}large-w50 {
 		width: 50% !important;
 	}
 
-	.large-w66 {
+	.#{$kna-namespace}large-w66 {
 		width: 66.6666% !important;
 	}
 
-	.large-w75 {
+	.#{$kna-namespace}large-w75 {
 		width: 75% !important;
 	}
 
-	.large-w100,
-	.large-wauto {
+	.#{$kna-namespace}large-w100,
+	.#{$kna-namespace}large-wauto {
 		display: block !important;
 		float: none !important;
 		clear: none !important;
@@ -77,8 +77,8 @@
 	}
 
 	/* margins for large screens */
-	.large-man,
-	.large-ma0 {
+	.#{$kna-namespace}large-man,
+	.#{$kna-namespace}large-ma0 {
 		margin: 0 !important;
 	}
 }
@@ -90,58 +90,58 @@
 @media (min-width: ($small-screen + 1)) and (max-width: $medium-screen)  {
 
 	/* layouts for medium screens */
-	.medium-hidden {
+	.#{$kna-namespace}medium-hidden {
 		display: none !important;
 	}
 
-	.medium-visible {
+	.#{$kna-namespace}medium-visible {
 		display: block !important;
 	}
 
-	.medium-no-float {
+	.#{$kna-namespace}medium-no-float {
 		float: none;
 	}
 
-	.medium-inbl {
+	.#{$kna-namespace}medium-inbl {
 		display: inline-block;
 		float: none;
 		vertical-align: top;
 	}
 
-	.medium-row {
+	.#{$kna-namespace}medium-row {
 		display: table;
 		table-layout: fixed;
 		width: 100% !important;
 	}
 
-	.medium-col {
+	.#{$kna-namespace}medium-col {
 		display: table-cell;
 		vertical-align: top;
 	}
 
 	/* widths for medium screens */
-	.medium-w25 {
+	.#{$kna-namespace}medium-w25 {
 		width: 25% !important;
 	}
 
-	.medium-w33 {
+	.#{$kna-namespace}medium-w33 {
 		width: 33.3333% !important;
 	}
 
-	.medium-w50 {
+	.#{$kna-namespace}medium-w50 {
 		width: 50% !important;
 	}
 
-	.medium-w66 {
+	.#{$kna-namespace}medium-w66 {
 		width: 66.6666% !important;
 	}
 
-	.medium-w75 {
+	.#{$kna-namespace}medium-w75 {
 		width: 75% !important;
 	}
 
-	.medium-w100,
-	.medium-wauto {
+	.#{$kna-namespace}medium-w100,
+	.#{$kna-namespace}medium-wauto {
 		display: block !important;
 		float: none !important;
 		clear: none !important;
@@ -152,8 +152,8 @@
 	}
 
 	/* margins for medium screens */
-	.medium-man,
-	.medium-ma0 {
+	.#{$kna-namespace}medium-man,
+	.#{$kna-namespace}medium-ma0 {
 		margin: 0 !important;
 	}
 }
@@ -165,68 +165,68 @@
 @media (min-width: ($tiny-screen + 1)) and (max-width: $small-screen) {
 
 	/* quick reset in small resolution and less */
-	.w600p,
-	.w700p,
-	.w800p,
-	.w960p,
-	.mw960p {
+	.#{$kna-namespace}w600p,
+	.#{$kna-namespace}w700p,
+	.#{$kna-namespace}w800p,
+	.#{$kna-namespace}w960p,
+	.#{$kna-namespace}mw960p {
 		width: auto;
 		float: none;
 	}
 
 	/* layouts for small screens */
-	.small-hidden {
+	.#{$kna-namespace}small-hidden {
 		display: none !important;
 	}
 
-	.small-visible {
+	.#{$kna-namespace}small-visible {
 		display: block !important;
 	}
 
-	.small-no-float {
+	.#{$kna-namespace}small-no-float {
 		float: none;
 	}
 
-	.small-inbl {
+	.#{$kna-namespace}small-inbl {
 		display: inline-block;
 		float: none;
 		vertical-align: top;
 	}
 
-	.small-row {
+	.#{$kna-namespace}small-row {
 		display: table !important;
 		table-layout: fixed !important;
 		width: 100% !important;
 	}
 
-	.small-col {
+	.#{$kna-namespace}small-col {
 		display: table-cell !important;
 		vertical-align: top !important;
 	}
 
 	/* widths for small screens */
-	.small-w25 {
+	.#{$kna-namespace}small-w25 {
 		width: 25% !important;
 	}
 
-	.small-w33 {
+	.#{$kna-namespace}small-w33 {
 		width: 33.3333% !important;
 	}
 
-	.small-w50 {
+	.#{$kna-namespace}small-w50 {
 		width: 50% !important;
 	}
 
-	.small-w66 {
+	.#{$kna-namespace}small-w66 {
 		width: 66.6666% !important;
 	}
 
-	.small-w75 {
+	.#{$kna-namespace}small-w75 {
 		width: 75% !important;
 	}
 
-	.small-w100,
-	.small-wauto {
+	.#{$kna-namespace}small-w100,
+	.#{$kna-namespace}small-wauto {
 		display: block !important;
 		float: none !important;
 		clear: none !important;
@@ -237,13 +237,13 @@
 	}
 
 	/* margins for small screens */
-	.small-man,
-	.small-ma0 {
+	.#{$kna-namespace}small-man,
+	.#{$kna-namespace}small-ma0 {
 		margin: 0 !important;
 	}
 
-	.small-pan,
-	.small-pa0 {
+	.#{$kna-namespace}small-pan,
+	.#{$kna-namespace}small-pa0 {
 		padding: 0 !important;
 	}
 
@@ -256,8 +256,8 @@
 @media (max-width: $tiny-screen) {
 
 	/* quick small resolution reset */
-	.mod,
-	.col,
+	.#{$kna-namespace}mod,
+	.#{$kna-namespace}col,
 	fieldset {
 		display: block !important;
 		float: none !important;
@@ -267,49 +267,49 @@
 		margin-right: 0 !important;
 		border: 0;
 	}
-	
-	.flex-container {
+
+	.#{$kna-namespace}flex-container {
 		flex-direction: column;
 	}
 
-	.w300p,
-	.w400p,
-	.w500p {
+	.#{$kna-namespace}w300p,
+	.#{$kna-namespace}w400p,
+	.#{$kna-namespace}w500p {
 		width: auto;
 		float: none;
 	}
 
-	.row {
+	.#{$kna-namespace}row {
 		display: block !important;
 		width: 100% !important;
 	}
 
 	/* layouts for tiny screens */
-	.tiny-hidden {
+	.#{$kna-namespace}tiny-hidden {
 		display: none !important;
 	}
 
-	.tiny-visible {
+	.#{$kna-namespace}tiny-visible {
 		display: block !important;
 	}
 
-	.tiny-no-float {
+	.#{$kna-namespace}tiny-no-float {
 		float: none;
 	}
 
-	.tiny-inbl {
+	.#{$kna-namespace}tiny-inbl {
 		display: inline-block;
 		float: none;
 		vertical-align: top;
 	}
 
-	.tiny-row {
+	.#{$kna-namespace}tiny-row {
 		display: table !important;
 		table-layout: fixed !important;
 		width: 100% !important;
 	}
 
-	.tiny-col {
+	.#{$kna-namespace}tiny-col {
 		display: table-cell !important;
 		vertical-align: top !important;
 	}
@@ -326,28 +326,28 @@
 	}
 
 	/* widths for tiny screens */
-	.tiny-w25 {
+	.#{$kna-namespace}tiny-w25 {
 		width: 25% !important;
 	}
 
-	.tiny-w33 {
+	.#{$kna-namespace}tiny-w33 {
 		width: 33.3333% !important;
 	}
 
-	.tiny-w50 {
+	.#{$kna-namespace}tiny-w50 {
 		width: 50% !important;
 	}
 
-	.tiny-w66 {
+	.#{$kna-namespace}tiny-w66 {
 		width: 66.6666% !important;
 	}
 
-	.tiny-w75 {
+	.#{$kna-namespace}tiny-w75 {
 		width: 75% !important;
 	}
 
-	.tiny-w100,
-	.tiny-wauto {
+	.#{$kna-namespace}tiny-w100,
+	.#{$kna-namespace}tiny-wauto {
 		display: block !important;
 		float: none !important;
 		clear: none !important;
@@ -358,13 +358,13 @@
 	}
 
 	/* margins for tiny screens */
-	.tiny-man,
-	.tiny-ma0 {
+	.#{$kna-namespace}tiny-man,
+	.#{$kna-namespace}tiny-ma0 {
 		margin: 0 !important;
 	}
 
-	.tiny-pan,
-	.tiny-pa0 {
+	.#{$kna-namespace}tiny-pan,
+	.#{$kna-namespace}tiny-pa0 {
 		padding: 0 !important;
 	}
 
diff --git a/sass/_08-print.scss b/sass/_08-print.scss
index ec910ef..194189d 100644
--- a/sass/_08-print.scss
+++ b/sass/_08-print.scss
@@ -5,7 +5,7 @@
 		box-shadow: none !important;
 		text-shadow: none !important;
 	}
-	
+
 	body {
 		width: auto !important;
 		margin: auto !important;
@@ -14,79 +14,79 @@
 		background-color: #fff !important;
 		color: #333 !important;
 	}
-	
+
 	p,
-	.p-like,
+	.#{$kna-namespace}p-like,
 	h1,
-	.h1-like,
+	.#{$kna-namespace}h1-like,
 	h2,
-	.h2-like,
+	.#{$kna-namespace}h2-like,
 	h3,
-	.h3-like,
+	.#{$kna-namespace}h3-like,
 	h4,
-	.h4-like,
+	.#{$kna-namespace}h4-like,
 	h5,
-	.h5-like,
+	.#{$kna-namespace}h5-like,
 	h6,
-	.h6-like,
+	.#{$kna-namespace}h6-like,
 	blockquote,
 	ul,
 	ol {
 		color: #000 !important;
 		margin: auto !important;
 	}
-	
-	.print {
+
+	.#{$kna-namespace}print {
 		display: block;
 	}
-	
-	.no-print {
+
+	.#{$kna-namespace}no-print {
 		display: none;
 	}
-	
+
 	/* no orphans, no widows */
 	p,
-	.p-like,
+	.#{$kna-namespace}p-like,
 	blockquote {
 		orphans: 3;
 		widows: 3;
 	}
-	
+
 	/* no breaks inside these elements */
 	blockquote,
 	ul,
 	ol {
 		page-break-inside: avoid;
 	}
-	
+
 	/* page break before main headers
 	h1,
 	.h1-like {
 		page-break-before: always;
 	}
 	*/
-	
+
 	/* no breaks after these elements */
 	h1,
-	.h1-like,
+	.#{$kna-namespace}h1-like,
 	h2,
-	.h2-like,
+	.#{$kna-namespace}h2-like,
 	h3,
-	.h3-like,
+	.#{$kna-namespace}h3-like,
 	caption {
 		page-break-after: avoid;
 	}
-	
+
 	a {
 		color: #000 !important;
 		text-decoration: underline !important;
 	}
-	
+
 	/* displaying URLs */
 	a[href]::after {
 		content: " (" attr(href) ")";
 	}
-	
+
 	a[href^="javascript:"]::after,
 	a[href^="#"]::after {
 		content: "";
diff --git a/sass/_09-misc.scss b/sass/_09-misc.scss
index 11f5f30..99dce1d 100644
--- a/sass/_09-misc.scss
+++ b/sass/_09-misc.scss
@@ -3,9 +3,9 @@
 /* ----------------------------- */
 
 /* styling skip links */
-.skip-links {
+.#{$kna-namespace}skip-links {
 	position: absolute;
-	
+
 	& a {
 		position: absolute;
 		overflow: hidden;
@@ -26,13 +26,13 @@
 // hyphens on small screens
 @media (max-width: $small-screen) {
 	/* you shall not pass */
-	div, 
-	textarea, 
-	table, 
-	td, 
-	th, 
-	code, 
-	pre, 
+	div,
+	textarea,
+	table,
+	td,
+	th,
+	code,
+	pre,
 	samp {
 		word-wrap: break-word;
 		hyphens: auto;
diff --git a/sass/_10-styling.scss b/sass/_10-styling.scss
index 74b90e5..662c4b1 100644
--- a/sass/_10-styling.scss
+++ b/sass/_10-styling.scss
@@ -75,12 +75,12 @@ q {
 }
 
 q,
-.q {
+.#{$kna-namespace}q {
 	quotes: "“\00a0" "\00a0”";
 }
 
 q:lang(fr),
-.q:lang(fr) {
+.#{$kna-namespace}q:lang(fr) {
 	quotes: "«\00a0" "\00a0»";
 }
 
@@ -96,44 +96,44 @@ hr {
 }
 
 /* alternate tables */
-.table-alternate {
+.#{$kna-namespace}table-alternate {
 	border: 0;
 }
 
-.table-alternate tbody {
+.#{$kna-namespace}table-alternate tbody {
 	border: 1px solid #ccc;
 }
 
-.table-alternate thead tr > * + * {
+.#{$kna-namespace}table-alternate thead tr > * + * {
 	border-left: 0;
 }
 
-.table-alternate tbody tr > * + * {
+.#{$kna-namespace}table-alternate tbody tr > * + * {
 	border-left: 1px solid #ccc;
 }
 
 /* alternate-vert tables */
-.table-alternate-v {
+.#{$kna-namespace}table-alternate-v {
 	border: 0;
 	border-right: 1px solid #ccc;
 }
 
-.table-alternate-v tr > :first-child {
+.#{$kna-namespace}table-alternate-v tr > :first-child {
 	border-bottom: 0;
 }
 
-.table-alternate-v tr > * + * {
+.#{$kna-namespace}table-alternate-v tr > * + * {
 	border-top: 1px solid #ccc;
 }
 
 /* striped tables */
-.table-striped tbody tr:nth-child(odd) {
+.#{$kna-namespace}table-striped tbody tr:nth-child(odd) {
 	background: #eee;
 	background: rgba(0, 0, 0, .05);
 }
 
 /* striped-vert tables */
-.table-striped-v tr > :first-child {
+.#{$kna-namespace}table-striped-v tr > :first-child {
 	background: #eee;
 	background: rgba(0, 0, 0, .05);
 }