From 2aa7f8cb9db8d730d0eea9bf406c35d7f6645c64 Mon Sep 17 00:00:00 2001
From: Arnaud CARIOU <arnaud.cariou@ext.mpsa.com>
Date: Thu, 16 Mar 2017 15:12:06 +0100
Subject: [PATCH] =?UTF-8?q?Restauration=20du=20$=20avant=20les=20variables?=
 =?UTF-8?q?=20pour=20des=20raisons=20de=20compatibilit=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .stylintrc                       |  20 +++
 css/stylus/knacss-unminified.css |  10 +-
 styl/config/_breakpoints.styl    |  10 +-
 styl/config/_mixins.styl         |  44 +++---
 styl/config/_variables.styl      |  68 ++++-----
 styl/grids/_grillade.styl        |  80 +++++------
 styl/knacss.styl                 |  20 +--
 styl/library/_base.styl          |  80 +++++------
 styl/library/_forms.styl         |  10 +-
 styl/library/_misc.styl          |   6 +-
 styl/library/_print.styl         |  26 ++--
 styl/library/_styling.styl       |   8 +-
 styl/library/_tables.styl        |  10 +-
 styl/objects/_autogrid.styl      |   4 +-
 styl/objects/_media.styl         |   4 +-
 styl/utilities/_helpers.styl     | 228 +++++++++++++++----------------
 styl/utilities/_layout.styl      |  58 ++++----
 styl/utilities/_responsive.styl  | 126 ++++++++---------
 18 files changed, 416 insertions(+), 396 deletions(-)
 create mode 100644 .stylintrc

diff --git a/.stylintrc b/.stylintrc
new file mode 100644
index 0000000..becfe45
--- /dev/null
+++ b/.stylintrc
@@ -0,0 +1,20 @@
+{
+  "brackets": false,
+  "colons": 'always',
+  "commentSpace": false,
+  "depthLimit": 4,
+  "exclude": ["node_modules/**/*"],
+  "globalDupe": true,
+  "groupOutputByFile": true,
+  "namingConvention": "lowercase-dash",
+  "noImportant": false,
+  "placeholders": "always",
+  "prefixVarsWithDollar": "always",
+  "quotePref": false,
+  "reporterOptions": {
+    "columns": ["lineData", "severity", "description", "rule"],
+    "columnSplitter": "  ",
+    "showHeaders": false,
+    "truncate": true
+  }
+}
diff --git a/css/stylus/knacss-unminified.css b/css/stylus/knacss-unminified.css
index 7c75115..7e48b9d 100644
--- a/css/stylus/knacss-unminified.css
+++ b/css/stylus/knacss-unminified.css
@@ -268,7 +268,7 @@ details,
 figure {
   margin-top: 0.75em;
   margin-bottom: 0;
-  line-height: 1.5;
+  line-height: line-height;
 }
 h1 .h1-like {
   font-size: 3.2rem;
@@ -443,9 +443,9 @@ code {
 }
 pre code {
   padding: 0;
+  border-radius: 0;
   background: none;
   color: inherit;
-  border-radius: 0;
 }
 mark {
   padding: 2px 4px;
@@ -466,7 +466,7 @@ blockquote {
   min-height: 2em;
 }
 blockquote::before {
-  content: "\201C";
+  content: '\201C';
   position: absolute;
   left: 0;
   top: 0;
@@ -488,11 +488,11 @@ q {
   font-style: normal;
 }
 q,
-.q {
+.kna-namespaceq {
   quotes: "“\00a0" "\00a0”";
 }
 q:lang(fr),
-.q:lang(fr) {
+.kna-namespaceq:lang(fr) {
   quotes: "«\00a0" "\00a0»";
 }
 hr {
diff --git a/styl/config/_breakpoints.styl b/styl/config/_breakpoints.styl
index e1e9221..48cdbf5 100644
--- a/styl/config/_breakpoints.styl
+++ b/styl/config/_breakpoints.styl
@@ -2,8 +2,8 @@
 
 // Warning : you should use your own values, regardless of the devices
 // Best practise : (max-width: $BP) and (min-width: ($BP + 1))
-tiny         = 543px // or 'em' if you prefer, of course
-small        = 767px
-medium       = 991px
-large        = 1199px
-extra-large  = 1439px
+$tiny         = 543px // or 'em' if you prefer, of course
+$small        = 767px
+$medium       = 991px
+$large        = 1199px
+$extra-large  = 1439px
diff --git a/styl/config/_mixins.styl b/styl/config/_mixins.styl
index bf1b834..ee81e0f 100644
--- a/styl/config/_mixins.styl
+++ b/styl/config/_mixins.styl
@@ -1,27 +1,27 @@
 // Additionnal "utility" breakpoints aliases
 // ex. @include respond-to("medium-up") {...}
-breakpoint(bp)
-  if bp == 'tiny'
-    return '(max-width: %s)' % tiny
-  else if bp == 'small'
-    return '(max-width: %s)' % small
-  else if bp == 'medium'
-    return '(max-width: %s)' % medium
-  else if bp == 'large'
-    return '(max-width: %s)' % large
-  else if bp == 'extra-large'
-    return '(max-width: %s)' % extra-large
-  else if bp == 'tiny-up'
-    return '(min-width: %s + 1)' % tiny
-  else if bp == 'small-up'
-    return '(min-width: %s + 1)' % small
-  else if bp == 'medium-up'
-    return '(min-width: %s + 1)' % medium
-  else if bp == 'large-up'
-    return '(min-width: %s + 1)' % large
-  else if bp == 'extra-large-up'
-    return '(min-width: %s + 1)' % extra-large
-  else if bp == 'retina'
+breakpoint($bp)
+  if $bp == 'tiny'
+    return '(max-width: %s)' % $tiny
+  else if $bp == 'small'
+    return '(max-width: %s)' % $small
+  else if $bp == 'medium'
+    return '(max-width: %s)' % $medium
+  else if $bp == 'large'
+    return '(max-width: %s)' % $large
+  else if $bp == 'extra-large'
+    return '(max-width: %s)' % $extra-large
+  else if $bp == 'tiny-up'
+    return '(min-width: %s + 1)' % $tiny
+  else if $bp == 'small-up'
+    return '(min-width: %s + 1)' % $small
+  else if $bp == 'medium-up'
+    return '(min-width: %s + 1)' % $medium
+  else if $bp == 'large-up'
+    return '(min-width: %s + 1)' % $large
+  else if $bp == 'extra-large-up'
+    return '(min-width: %s + 1)' % $extra-large
+  else if $bp == 'retina'
     return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)'
 
 /*
diff --git a/styl/config/_variables.styl b/styl/config/_variables.styl
index 7ddde94..8a06f69 100644
--- a/styl/config/_variables.styl
+++ b/styl/config/_variables.styl
@@ -1,50 +1,50 @@
 // Config file and project variables
 
 // font sizes
-base-font-size = 1.6rem // ex. 1.6rem would be "16px" equivalent
-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"
+$base-font-size = 1.6rem // ex. 1.6rem would be "16px" equivalent
+$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    = sans-serif // common font
-font-stack-headings  = sans-serif // headings font
-font-stack-monospace = consolas, courier, monospace // monospace font
+$font-stack-common    = sans-serif // common font
+$font-stack-headings  = sans-serif // headings font
+$font-stack-monospace = consolas, courier, monospace // monospace font
 
 // color scheme
-color1    = #000
-color2    = #fff
-color3    = #333
-color4    = #000
-color5    = #6FA939
+$color1    = #000
+$color2    = #fff
+$color3    = #333
+$color4    = #000
+$color5    = #6FA939
 
 // colors used in project
-base-color       = color1
-link-color       = color3
-base-background  = color2
+$base-color       = $color1
+$link-color       = $color3
+$base-background  = $color2
 // If you don't want any effect on focused/hovered links,
 // comment variable below or make it equal to either link-color or false or null
-link-hover-color = color4
-brand-primary    = color5
+$link-hover-color = $color4
+$brand-primary    = $color5
 
 
 // spacings (choose unit you prefer)
-tiny-value             = .5rem // tiny value for margins / paddings
-tiny-plus-value        = .7rem // tiny+ value for margins / paddings
-small-value            = 1rem // small value for margins / paddings
-small-plus-value       = 1.5rem // small+ value for margins / paddings
-medium-value           = 2rem // medium value for margins / paddings
-medium-plus-value      = 3rem // medium+ value for margins / paddings
-large-value            = 4rem // large value for margins / paddings
-large-plus-value       = 6rem // large value for margins / paddings
-extra-large-value      = 8rem // extra large value for margins / paddings
-extra-large-plus-value = 12rem // extra large value for margins / paddings
-ultra-large-value      = 16rem // ultra large value for margins / paddings
-ultra-large-plus-value = 20rem // ultra large value for margins / paddings
+$tiny-value             = .5rem // tiny value for margins / paddings
+$tiny-plus-value        = .7rem // tiny+ value for margins / paddings
+$small-value            = 1rem // small value for margins / paddings
+$small-plus-value       = 1.5rem // small+ value for margins / paddings
+$medium-value           = 2rem // medium value for margins / paddings
+$medium-plus-value      = 3rem // medium+ value for margins / paddings
+$large-value            = 4rem // large value for margins / paddings
+$large-plus-value       = 6rem // large value for margins / paddings
+$extra-large-value      = 8rem // extra large value for margins / paddings
+$extra-large-plus-value = 12rem // extra large value for margins / paddings
+$ultra-large-value      = 16rem // ultra large value for margins / paddings
+$ultra-large-plus-value = 20rem // ultra large value for margins / paddings
 
 //kna-namespace (default : null)
-kna-namespace = null;
+$kna-namespace = null;
diff --git a/styl/grids/_grillade.styl b/styl/grids/_grillade.styl
index 368e672..6d8240d 100644
--- a/styl/grids/_grillade.styl
+++ b/styl/grids/_grillade.styl
@@ -4,12 +4,12 @@
 @import '../vendor/flexbox-stylus/stylus/flexbox.styl'
 /* Doc : http://grillade.knacss.com */
 // gutter values for grid layouts. Unit can be: %, px, em, rem
-grid-gutters = { '': 1rem, '-l': 2rem, '-xl': 4rem }
+$grid-gutters = { '': 1rem, '-l': 2rem, '-xl': 4rem }
 // IEfixing, see
 // https://github.com/alsacreations/KNACSS/issues/133;
-iefix = 0.01px
+$iefix = 0.01px
 
-@media (min-width: tiny + 1)
+@media (min-width: $tiny + 1)
   [class*=" grid-"]
   [class^="grid-"]
     flexbox(flex)
@@ -22,23 +22,23 @@ iefix = 0.01px
 
 // Multi-line grid constructor
 // example : .grid-perso { @include grid(12, 3rem); }
-grid(grid-number = 1, own-gutter = 0)
+grid($grid-number = 1, $own-gutter = 0)
   & > *
-    width 'calc(100% / %s - %s)' % (grid-number iefix)
-  for key, size in grid-gutters
-    &.has-gutter{key}
-      margin-right -(size / 2)
-      margin-left -(size / 2)
+    width 'calc(100% / %s - %s)' % ($grid-number $iefix)
+  for $key, $size in $grid-gutters
+    &.has-gutter{$key}
+      margin-right -($size / 2)
+      margin-left -($size / 2)
       & > *
-        width 'calc(100% / %s - %s - %s)' % (grid-number size iefix)
-        margin-right (size / 2)
-        margin-left (size / 2)
-  if own-gutter != 0
-    margin-right (own-gutter / 2)
-    margin-left (own-gutter / 2)
+        width 'calc(100% / %s - %s - %s)' % ($grid-number $size $iefix)
+        margin-right ($size / 2)
+        margin-left ($size / 2)
+  if $own-gutter != 0
+    margin-right ($own-gutter / 2)
+    margin-left ($own-gutter / 2)
 
 // Mono-line grid constructor (.grid)
-@media (min-width: tiny + 1)
+@media (min-width: $tiny + 1)
   .grid
   .grid--reverse
     flexbox(flex)
@@ -47,16 +47,16 @@ grid(grid-number = 1, own-gutter = 0)
       box-sizing border-box
       min-width 0
       min-height 0
-    for key, size in grid-gutters
-      &.has-gutter{key} > * + *
-        margin-left 'calc(%s - %s)' % (size iefix)
+    for $key, $size in $grid-gutters
+      &.has-gutter{$key} > * + *
+        margin-left 'calc(%s - %s)' % ($size $iefix)
 
 // Constructing grids : will be compiled in CSS
-@media (min-width: tiny + 1)
-  for i in 2..12
-    grid-selector = 'grid-%s' % i
-    [class*=\"{grid-selector}\"]
-      grid(i, 0)
+@media (min-width: $tiny + 1)
+  for $i in 2..12
+    $grid-selector = 'grid-%s' % $i
+    [class*=\"{$grid-selector}\"]
+      grid($i, 0)
 
 .push
   margin-left auto !important
@@ -77,23 +77,23 @@ grid(grid-number = 1, own-gutter = 0)
 [class*="grid-"][class*="--reverse"]
   flex-direction(row-reverse)
 
-@media (min-width: tiny + 1)
-  flowToDivid = {'full': 1, 'one-half': 2, 'one-third': 3, 'one-quarter': 4, 'one-fifth': 5, 'one-sixth': 6, 'two-thirds': 3 * 2, 'three-quarters': 4 * 3, 'five-sixths': 6 * 5}
-  for flow, divider  in flowToDivid
-    .{flow}
+@media (min-width: $tiny + 1)
+  $flow-to-divid = {'full': 1, 'one-half': 2, 'one-third': 3, 'one-quarter': 4, 'one-fifth': 5, 'one-sixth': 6, 'two-thirds': 3 * 2, 'three-quarters': 4 * 3, 'five-sixths': 6 * 5}
+  for $flow, $divider  in $flow-to-divid
+    .{$flow}
       flex(0 0 auto)
-      width 'calc(100% / %s - %s)' % (divider iefix)
-      for key, size in grid-gutters
-        .has-gutter{key} .{flow}
-          width 'calc(100% / %s - %s - %s)' % (divider size iefix)
+      width 'calc(100% / %s - %s)' % ($divider $iefix)
+      for $key, $size in $grid-gutters
+        .has-gutter{$key} .{$flow}
+          width 'calc(100% / %s - %s - %s)' % ($divider $size $iefix)
 
 /* Responsive Small Breakpoint */
-@media (min-width: tiny + 1) and (max-width: medium)
-  for i in 1..4
-    index = '-small-%s' % i
-    [class*=\"{index}\"]
+@media (min-width: $tiny + 1) and (max-width: $medium)
+  for $i in 1..4
+    $index = '-small-%s' % $i
+    [class*=\"{$index}\"]
       & > *
-        width: 'calc(100% / %s - %s)' % (i iefix)
-        for key, size in grid-gutters
-          &.has-gutter{key} > *
-            width: 'calc(100% / %s - %s - %s)' % (i size iefix)
+        width: 'calc(100% / %s - %s)' % ($i $iefix)
+        for $key, $size in $grid-gutters
+          &.has-gutter{$key} > *
+            width: 'calc(100% / %s - %s - %s)' % ($i $size $iefix)
diff --git a/styl/knacss.styl b/styl/knacss.styl
index 0374b38..9662022 100644
--- a/styl/knacss.styl
+++ b/styl/knacss.styl
@@ -38,21 +38,21 @@
 @import 'library/_base.styl' // basic styles
 @import 'library/_print.styl' // print quick reset
 @import 'library/_styling.styl' // minor stylings
-@import 'library/_misc.styl'; // skip links, hyphens
-@import 'library/_tables.styl'; // data tables consistency
-@import 'library/_forms.styl'; // forms consistency
+@import 'library/_misc.styl' // skip links, hyphens
+@import 'library/_tables.styl' // data tables consistency
+@import 'library/_forms.styl' // forms consistency
 
 // Objects
-@import 'objects/_media.styl'; // media object
-@import 'objects/_autogrid.styl'; // media autogrid
+@import 'objects/_media.styl' // media object
+@import 'objects/_autogrid.styl' // media autogrid
 
 // Utilities
-@import 'utilities/_layout.styl'; // alignment, modules, positionning
-@import 'utilities/_helpers.styl'; // width and spacers helpers
-@import 'utilities/_responsive.styl'; // Responsive Web Design helpers
+@import 'utilities/_layout.styl' // alignment, modules, positionning
+@import 'utilities/_helpers.styl' // width and spacers helpers
+@import 'utilities/_responsive.styl' // Responsive Web Design helpers
 
 // Grids
-@import 'grids/_grillade.styl'; // grids
+@import 'grids/_grillade.styl' // grids
 
 
 /* ----------------------------- */
@@ -61,4 +61,4 @@
 
 /* Here should go your own CSS styles */
 // You can also link them with a Sass @import
-// @import "my-styles";
+// @import "my-styles"
diff --git a/styl/library/_base.styl b/styl/library/_base.styl
index 646a1a0..ab3308d 100644
--- a/styl/library/_base.styl
+++ b/styl/library/_base.styl
@@ -17,22 +17,22 @@ html
   font-size calc(1em * 0.625)
 
 body
-  font-size base-font-size
-  background-color base-background
-  color base-color
-  font-family font-stack-common
-  line-height line-height
+  font-size $base-font-size
+  background-color $base-background
+  color $base-color
+  font-family $font-stack-common
+  line-height $line-height
 
 a
-  color link-color
+  color $link-color
 
   // No styling on focus/hover if there's no effect. Avoids to then have to
   // override it countless times. See Issue #232
-  if link-hover-color is defined // && ( null == list( (link-color, null, false), link-hover-color) )
+  if $link-hover-color is defined // && ( null == list( (link-color, null, false), link-hover-color) )
     &:focus,
     &:hover,
     &:active
-      color link-hover-color
+      color $link-hover-color
 
 ul
 ol
@@ -48,7 +48,7 @@ figure
 
 /* font-sizing for content */
 p
-.{kna-namespace}p-like
+.{$kna-namespace}p-like
 ul
 ol
 dl
@@ -65,42 +65,42 @@ figure
   margin-bottom 0
   line-height line-height
 
-h1 .{kna-namespace}h1-like
-  font-size h1-size
-  if font-stack-headings is defined && font-stack-headings != font-stack-common
-    font-family font-stack-headings
+h1 .{$kna-namespace}h1-like
+  font-size $h1-size
+  if $font-stack-headings is defined && $font-stack-headings != $font-stack-common
+    font-family $font-stack-headings
 
-h2 .{kna-namespace}h2-like
-  font-size h2-size
-  if font-stack-headings is defined && font-stack-headings != font-stack-common
-    font-family font-stack-headings
+h2 .{$kna-namespace}h2-like
+  font-size $h2-size
+  if $font-stack-headings is defined && $font-stack-headings != $font-stack-common
+    font-family $font-stack-headings
 
-h3 .{kna-namespace}h3-like
-  font-size h3-size
+h3 .{$kna-namespace}h3-like
+  font-size $h3-size
 
-h4 .{kna-namespace}h4-like
-  font-size h4-size
+h4 .{$kna-namespace}h4-like
+  font-size $h4-size
 
-h5 .{kna-namespace}h5-like
-  font-size h5-size
+h5 .{$kna-namespace}h5-like
+  font-size $h5-size
 
-h6 .{kna-namespace}h6-like
-  font-size h6-size
+h6 .{$kna-namespace}h6-like
+  font-size $h6-size
 
 /* alternate font-sizing */
-.{kna-namespace}smaller
+.{$kna-namespace}smaller
   font-size 0.6em
 
-.{kna-namespace}small
+.{$kna-namespace}small
   font-size 0.8em
 
-.{kna-namespace}big
+.{$kna-namespace}big
   font-size 1.2em
 
-.{kna-namespace}bigger
+.{$kna-namespace}bigger
   font-size: 1.5em
 
-.{kna-namespace}biggest
+.{$kna-namespace}biggest
   font-size 2em
 
 code
@@ -110,11 +110,11 @@ kbd
   /* IE fix */
   white-space pre-line
   white-space pre-wrap
-  font-family font-stack-monospace
+  font-family $font-stack-monospace
   line-height normal
 
 em
-.{kna-namespace}italic
+.{$kna-namespace}italic
 address
 cite
 i
@@ -123,30 +123,30 @@ var
 
 /* avoid top margins on first content element */
 p
-.{kna-namespace}p-like
+.{$kna-namespace}p-like
 ul
 ol
 dl
 blockquote
 pre
 h1
-.{kna-namespace}h1-like
+.{$kna-namespace}h1-like
 h2
-.{kna-namespace}h2-like
+.{$kna-namespace}h2-like
 h3
-.{kna-namespace}h3-like
+.{$kna-namespace}h3-like
 h4
-.{kna-namespace}h4-like
+.{$kna-namespace}h4-like
 h5
-.{kna-namespace}h5-like
+.{$kna-namespace}h5-like
 h6
-.{kna-namespace}h6-like
+.{$kna-namespace}h6-like
   &:first-child
     margin-top 0
 
 /* avoid margins on nested elements */
 li p
-li .{kna-namespace}p-like
+li .{$kna-namespace}p-like
 li ul
 li ol
   margin-top 0
diff --git a/styl/library/_forms.styl b/styl/library/_forms.styl
index 0830e75..dd25362 100644
--- a/styl/library/_forms.styl
+++ b/styl/library/_forms.styl
@@ -7,7 +7,7 @@
 */
 
 /* buttons */
-.{kna-namespace}btn
+.{$kna-namespace}btn
   display inline-block
 
 /* forms items */
@@ -19,7 +19,7 @@ input
 button
 select
 label
-.{kna-namespace}btn
+.{$kna-namespace}btn
   font-family inherit
   font-size inherit
 
@@ -28,7 +28,7 @@ input
 optgroup
 select
 textarea
-  color base-color
+  color $base-color
 
 label
   vertical-align middle
@@ -66,7 +66,7 @@ input:-moz-placeholder
 textarea:-moz-placeholder
   color #777
 
-.{kna-namespace}btn
+.{$kna-namespace}btn
 input[type="button"]
 button
   &:focus
@@ -82,7 +82,7 @@ button
 input[type="button"]
 input[type="submit"]
 input[type="reset"]
-  &.{kna-namespace}unstyled
+  &.{$kna-namespace}unstyled
     padding 0
     border none
     line-height 1
diff --git a/styl/library/_misc.styl b/styl/library/_misc.styl
index e69a384..9f45977 100644
--- a/styl/library/_misc.styl
+++ b/styl/library/_misc.styl
@@ -3,7 +3,7 @@
 /* ----------------------------- */
 
 /* styling skip links */
-.{kna-namespace}skip-links
+.{$kna-namespace}skip-links
   position absolute
 
   & a
@@ -21,7 +21,7 @@
       clip auto
 
 // hyphens on tiny screens
-@media (max-width: tiny)
+@media (max-width: $tiny)
   /* you shall not pass */
   div
   textarea
@@ -35,7 +35,7 @@
     hyphens auto
 
 // use .no-wrapping to disallow hyphens on tiny screens
-@media (max-width: tiny)
+@media (max-width: $tiny)
   .no-wrapping
     word-wrap normal
     hyphens manual
diff --git a/styl/library/_print.styl b/styl/library/_print.styl
index 723c4c0..299ebc0 100644
--- a/styl/library/_print.styl
+++ b/styl/library/_print.styl
@@ -15,34 +15,34 @@
     font-size 12pt
 
   p
-  .{kna-namespace}p-like
+  .{$kna-namespace}p-like
   h1
-  .{kna-namespace}h1-like
+  .{$kna-namespace}h1-like
   h2
-  .{kna-namespace}h2-like
+  .{$kna-namespace}h2-like
   h3
-  .{kna-namespace}h3-like
+  .{$kna-namespace}h3-like
   h4
-  .{kna-namespace}h4-like
+  .{$kna-namespace}h4-like
   h5
-  .{kna-namespace}h5-like
+  .{$kna-namespace}h5-like
   h6
-  .{kna-namespace}h6-like
+  .{$kna-namespace}h6-like
   blockquote
   ul
   ol
     color #000
     margin auto
 
-  .{kna-namespace}print
+  .{$kna-namespace}print
     display block
 
-  .{kna-namespace}no-print
+  .{$kna-namespace}no-print
     display none
 
   /* no orphans, no widows */
   p
-  .{kna-namespace}p-like
+  .{$kna-namespace}p-like
   blockquote
     orphans 3
     widows 3
@@ -61,11 +61,11 @@
 
   /* no breaks after these elements */
   h1
-  .{kna-namespace}h1-like
+  .{$kna-namespace}h1-like
   h2
-  .{kna-namespace}h2-like
+  .{$kna-namespace}h2-like
   h3
-  .{kna-namespace}h3-like
+  .{$kna-namespace}h3-like
   caption
     page-break-after avoid
 
diff --git a/styl/library/_styling.styl b/styl/library/_styling.styl
index 216c02f..fd6dade 100644
--- a/styl/library/_styling.styl
+++ b/styl/library/_styling.styl
@@ -19,9 +19,9 @@ code
 
 pre code
   padding 0
+  border-radius 0
   background none
   color inherit
-  border-radius 0
 
 mark
   padding 2px 4px
@@ -42,7 +42,7 @@ blockquote
   min-height 2em
 
 blockquote::before
-  content "\201C"
+  content '\201C'
   position absolute
   left 0
   top 0
@@ -82,11 +82,11 @@ hr
 
 /* tables */
 table
-.{kna-namespace}table
+.{$kna-namespace}table
   border 1px solid #ccc
 
 caption
-  padding small-value
+  padding $small-value
   color #555
   font-style italic
 
diff --git a/styl/library/_tables.styl b/styl/library/_tables.styl
index 6556957..12dae8f 100644
--- a/styl/library/_tables.styl
+++ b/styl/library/_tables.styl
@@ -3,23 +3,23 @@
 /* ----------------------------- */
 
 table
-.{kna-namespace}table
+.{$kna-namespace}table
   width 100%
   max-width 100%
   table-layout fixed
   border-collapse collapse
   vertical-align top
-  margin-bottom medium-value
+  margin-bottom $medium-value
 
-.{kna-namespace}table
+.{$kna-namespace}table
   display table
 
 #recaptcha_table
-.{kna-namespace}table-auto
+.{$kna-namespace}table-auto
   table-layout auto
 
 td
 th
   vertical-align top
-  min-width medium-value
+  min-width $medium-value
   cursor default
diff --git a/styl/objects/_autogrid.styl b/styl/objects/_autogrid.styl
index 8383f8a..34fc5d8 100644
--- a/styl/objects/_autogrid.styl
+++ b/styl/objects/_autogrid.styl
@@ -1,6 +1,6 @@
 /* Autogrid object */
 /* see http://codepen.io/raphaelgoetter/pen/KMgBJd */
-@media (min-width: (tiny + 1))
+@media (min-width: ($tiny + 1))
   [class^="autogrid"]
   [class*=" autogrid"]
     display flex
@@ -11,7 +11,7 @@
     min-width 0 /* avoid min-width:auto */
 
 /* Autogrid variants */
-@media (min-width: (tiny + 1))
+@media (min-width: ($tiny + 1))
   .has-gutter > *:not(:first-child)
     margin-left 1rem
 
diff --git a/styl/objects/_media.styl b/styl/objects/_media.styl
index 04ca114..41937f7 100644
--- a/styl/objects/_media.styl
+++ b/styl/objects/_media.styl
@@ -1,6 +1,6 @@
 /* Media object */
 /* see http://codepen.io/raphaelgoetter/pen/KMWWwj */
-@media (min-width: (tiny + 1))
+@media (min-width: ($tiny + 1))
   .o-media
     display flex
     align-items flex-start
@@ -10,7 +10,7 @@
     min-width 0 /* avoid min-width:auto */
 
 /* Media variants */
-@media (min-width: (tiny + 1))
+@media (min-width: ($tiny + 1))
   .o-media--reverse
     flex-direction row-reverse
 
diff --git a/styl/utilities/_helpers.styl b/styl/utilities/_helpers.styl
index 175074a..03ea1da 100644
--- a/styl/utilities/_helpers.styl
+++ b/styl/utilities/_helpers.styl
@@ -38,241 +38,241 @@ ul
 /* ------------- */
 
 /* blocks widths (percentage and pixels) */
-.{kna-namespace}w10
+.{$kna-namespace}w10
   width 10%
 
-.{kna-namespace}w20
+.{$kna-namespace}w20
   width 20%
 
-.{kna-namespace}w25
+.{$kna-namespace}w25
   width 25%
 
-.{kna-namespace}w30
+.{$kna-namespace}w30
   width 30%
 
-.{kna-namespace}w33
+.{$kna-namespace}w33
   width 33.3333%
 
-.{kna-namespace}w40
+.{$kna-namespace}w40
   width 40%
 
-.{kna-namespace}w50
+.{$kna-namespace}w50
   width 50%
 
-.{kna-namespace}w60
+.{$kna-namespace}w60
   width 60%
 
-.{kna-namespace}w66
+.{$kna-namespace}w66
   width 66.6666%
 
-.{kna-namespace}w70
+.{$kna-namespace}w70
   width 70%
 
-.{kna-namespace}w75
+.{$kna-namespace}w75
   width 75%
 
-.{kna-namespace}w80
+.{$kna-namespace}w80
   width 80%
 
-.{kna-namespace}w90
+.{$kna-namespace}w90
   width 90%
 
-.{kna-namespace}w100
+.{$kna-namespace}w100
   width 100%
 
-.{kna-namespace}w50p
+.{$kna-namespace}w50p
   width 50px
 
-.{kna-namespace}w100p
+.{$kna-namespace}w100p
   width 100px
 
-.{kna-namespace}w150p
+.{$kna-namespace}w150p
   width 150px
 
-.{kna-namespace}w200p
+.{$kna-namespace}w200p
   width 200px
 
-.{kna-namespace}w300p
+.{$kna-namespace}w300p
   width 300px
 
 @media (min-width: 401px)
-  .{kna-namespace}w400p
+  .{$kna-namespace}w400p
     width 400px
 
-  .{kna-namespace}w500p
+  .{$kna-namespace}w500p
     width 500px
 
-  .{kna-namespace}w600p
+  .{$kna-namespace}w600p
     width 600px
 
 @media (min-width: 701px)
 
-  .{kna-namespace}w700p
+  .{$kna-namespace}w700p
     width 700px
 
-  .{kna-namespace}w800p
+  .{$kna-namespace}w800p
     width 800px
 
 @media (min-width: 961px)
-  .{kna-namespace}w960p
+  .{$kna-namespace}w960p
     width 960px
 
-  .{kna-namespace}mw960p
+  .{$kna-namespace}mw960p
     max-width 960px
 
-  .{kna-namespace}w1140p
+  .{$kna-namespace}w1140p
     width 1140px
 
-  .{kna-namespace}mw1140p
+  .{$kna-namespace}mw1140p
     max-width 1140px
 
-.{kna-namespace}wauto
+.{$kna-namespace}wauto
   width auto
 
 /* Spacing Helpers */
 /* --------------- */
 
-.{kna-namespace}man
-.{kna-namespace}ma0
+.{$kna-namespace}man
+.{$kna-namespace}ma0
   margin 0
 
-.{kna-namespace}pan
-.{kna-namespace}pa0
+.{$kna-namespace}pan
+.{$kna-namespace}pa0
   padding 0
 
-.{kna-namespace}mas
-  margin small-value
+.{$kna-namespace}mas
+  margin $small-value
 
-.{kna-namespace}mam
-  margin medium-value
+.{$kna-namespace}mam
+  margin $medium-value
 
-.{kna-namespace}mal
-  margin large-value
+.{$kna-namespace}mal
+  margin $large-value
 
-.{kna-namespace}pas
-  padding small-value
+.{$kna-namespace}pas
+  padding $small-value
 
-.{kna-namespace}pam
-  padding medium-value
+.{$kna-namespace}pam
+  padding $medium-value
 
-.{kna-namespace}pal
-  padding large-value
+.{$kna-namespace}pal
+  padding $large-value
 
-.{kna-namespace}mtn
-.{kna-namespace}mt0
+.{$kna-namespace}mtn
+.{$kna-namespace}mt0
   margin-top 0
 
-.{kna-namespace}mts
-  margin-top small-value
+.{$kna-namespace}mts
+  margin-top $small-value
 
-.{kna-namespace}mtm
-  margin-top medium-value
+.{$kna-namespace}mtm
+  margin-top $medium-value
 
-.{kna-namespace}mtl
-  margin-top large-value
+.{$kna-namespace}mtl
+  margin-top $large-value
 
-.{kna-namespace}mrn
-.{kna-namespace}mr0
+.{$kna-namespace}mrn
+.{$kna-namespace}mr0
   margin-right 0
 
-.{kna-namespace}mrs
-  margin-right small-value
+.{$kna-namespace}mrs
+  margin-right $small-value
 
-.{kna-namespace}mrm
-  margin-right medium-value
+.{$kna-namespace}mrm
+  margin-right $medium-value
 
-.{kna-namespace}mrl
-  margin-right large-value
+.{$kna-namespace}mrl
+  margin-right $large-value
 
-.{kna-namespace}mbn
-.{kna-namespace}mb0
+.{$kna-namespace}mbn
+.{$kna-namespace}mb0
   margin-bottom 0
 
-.{kna-namespace}mbs
-  margin-bottom small-value
+.{$kna-namespace}mbs
+  margin-bottom $small-value
 
-.{kna-namespace}mbm
-  margin-bottom medium-value
+.{$kna-namespace}mbm
+  margin-bottom $medium-value
 
-.{kna-namespace}mbl
-  margin-bottom large-value
+.{$kna-namespace}mbl
+  margin-bottom $large-value
 
-.{kna-namespace}mln
-.{kna-namespace}ml0
+.{$kna-namespace}mln
+.{$kna-namespace}ml0
   margin-left 0
 
-.{kna-namespace}mls
-  margin-left small-value
+.{$kna-namespace}mls
+  margin-left $small-value
 
-.{kna-namespace}mlm
-  margin-left medium-value
+.{$kna-namespace}mlm
+  margin-left $medium-value
 
-.{kna-namespace}mll
-  margin-left large-value
+.{$kna-namespace}mll
+  margin-left $large-value
 
-.{kna-namespace}mauto
+.{$kna-namespace}mauto
   margin auto
 
-.{kna-namespace}mtauto
+.{$kna-namespace}mtauto
   margin-top auto
 
-.{kna-namespace}mrauto
+.{$kna-namespace}mrauto
   margin-right auto
 
-.{kna-namespace}mbauto
+.{$kna-namespace}mbauto
   margin-bottom auto
 
-.{kna-namespace}mlauto
+.{$kna-namespace}mlauto
   margin-left: auto
 
-.{kna-namespace}ptn
-.{kna-namespace}pt0
+.{$kna-namespace}ptn
+.{$kna-namespace}pt0
   padding-top 0
 
-.{kna-namespace}pts
-  padding-top small-value
+.{$kna-namespace}pts
+  padding-top $small-value
 
-.{kna-namespace}ptm
-  padding-top medium-value
+.{$kna-namespace}ptm
+  padding-top $medium-value
 
-.{kna-namespace}ptl
-  padding-top large-value
+.{$kna-namespace}ptl
+  padding-top $large-value
 
-.{kna-namespace}prn
-.{kna-namespace}pr0
+.{$kna-namespace}prn
+.{$kna-namespace}pr0
   padding-right 0
 
-.{kna-namespace}prs
-  padding-right small-value
+.{$kna-namespace}prs
+  padding-right $small-value
 
-.{kna-namespace}prm
-  padding-right medium-value
+.{$kna-namespace}prm
+  padding-right $medium-value
 
-.{kna-namespace}prl
-  padding-right large-value
+.{$kna-namespace}prl
+  padding-right $large-value
 
-.{kna-namespace}pbn
-.{kna-namespace}pb0
+.{$kna-namespace}pbn
+.{$kna-namespace}pb0
   padding-bottom 0
 
-.{kna-namespace}pbs
-  padding-bottom small-value
+.{$kna-namespace}pbs
+  padding-bottom $small-value
 
-.{kna-namespace}pbm
-  padding-bottom medium-value
+.{$kna-namespace}pbm
+  padding-bottom $medium-value
 
-.{kna-namespace}pbl
-  padding-bottom large-value
+.{$kna-namespace}pbl
+  padding-bottom $large-value
 
-.{kna-namespace}pln
-.{kna-namespace}pl0
+.{$kna-namespace}pln
+.{$kna-namespace}pl0
   padding-left 0
 
-.{kna-namespace}pls
-  padding-left small-value
+.{$kna-namespace}pls
+  padding-left $small-value
 
-.{kna-namespace}plm
-  padding-left medium-value
+.{$kna-namespace}plm
+  padding-left $medium-value
 
-.{kna-namespace}pll
-  padding-left large-value
+.{$kna-namespace}pll
+  padding-left $large-value
diff --git a/styl/utilities/_layout.styl b/styl/utilities/_layout.styl
index 1f9b4eb..ab0b9cc 100644
--- a/styl/utilities/_layout.styl
+++ b/styl/utilities/_layout.styl
@@ -20,45 +20,45 @@
     border-collapse collapse
 
 /* simple blocks alignment */
-.{kna-namespace}left
+.{$kna-namespace}left
   margin-right auto
 
-.{kna-namespace}right
+.{$kna-namespace}right
   margin-left auto
 
-.{kna-namespace}center
+.{$kna-namespace}center
   margin-left auto
   margin-right auto
 
 /* text and contents alignment */
-.{kna-namespace}txtleft
+.{$kna-namespace}txtleft
   text-align left
 
-.{kna-namespace}txtright
+.{$kna-namespace}txtright
   text-align right
 
-.{kna-namespace}txtcenter
+.{$kna-namespace}txtcenter
   text-align center
 
 /* floating elements */
-.{kna-namespace}fl
+.{$kna-namespace}fl
   float left
 
-img.{kna-namespace}fl
-  margin-right small-value
+img.{$kna-namespace}fl
+  margin-right $small-value
 
-.{kna-namespace}fr
+.{$kna-namespace}fr
   float right
 
-img.{kna-namespace}fr
-  margin-left small-value
+img.{$kna-namespace}fr
+  margin-left $small-value
 
-img.{kna-namespace}fl
-img.{kna-namespace}fr
-  margin-bottom tiny-value
+img.{$kna-namespace}fl
+img.{$kna-namespace}fr
+  margin-bottom $tiny-value
 
 /* inline-block */
-.{kna-namespace}inbl
+.{$kna-namespace}inbl
   display inline-block
   vertical-align top
 
@@ -66,33 +66,33 @@ img.{kna-namespace}fr
 http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
 */
 
-[class*={kna-namespace}"flex-container"]
-.{kna-namespace}flex-container
+[class*=\"{$kna-namespace}flex-container\"]
+.{$kna-namespace}flex-container
   flexbox(flex)
   flex-wrap(wrap)
 
-.{kna-namespace}flex-container-h
+.{$kna-namespace}flex-container-h
   flex-direction(row)
 
-.{kna-namespace}flex-container-v
+.{$kna-namespace}flex-container-v
   flex-direction(column)
 
-.{kna-namespace}flex-item-fluid
+.{$kna-namespace}flex-item-fluid
   flex 1
   min-width 0
 
-.{kna-namespace}flex-item-first
-.{kna-namespace}item-first
+.{$kna-namespace}flex-item-first
+.{$kna-namespace}item-first
   order -1
 
-.{kna-namespace}flex-item-medium
-.{kna-namespace}item-medium
+.{$kna-namespace}flex-item-medium
+.{$kna-namespace}item-medium
   order 0
 
-.{kna-namespace}flex-item-last
-.{kna-namespace}item-last
+.{$kna-namespace}flex-item-last
+.{$kna-namespace}item-last
   order 1
 
-.{kna-namespace}flex-item-center
-.{kna-namespace}item-center
+.{$kna-namespace}flex-item-center
+.{$kna-namespace}item-center
   margin auto
diff --git a/styl/utilities/_responsive.styl b/styl/utilities/_responsive.styl
index 4996461..b26ae0e 100644
--- a/styl/utilities/_responsive.styl
+++ b/styl/utilities/_responsive.styl
@@ -5,41 +5,41 @@
 /* large screens */
 /* ------------- */
 
-@media (min-width: (medium + 1))
+@media (min-width: ($medium + 1))
 
   /* layouts for large screens */
-  .{kna-namespace}large-hidden
+  .{$kna-namespace}large-hidden
     display none !important
 
-  .{kna-namespace}large-visible
+  .{$kna-namespace}large-visible
     display block !important
 
-  .{kna-namespace}large-no-float
+  .{$kna-namespace}large-no-float
     float none
 
-  .{kna-namespace}large-inbl
+  .{$kna-namespace}large-inbl
     display inline-block
     float none
     vertical-align top
 
   /* widths for large screens */
-  .{kna-namespace}large-w25
+  .{$kna-namespace}large-w25
     width 25% !important
 
-  .{kna-namespace}large-w33
+  .{$kna-namespace}large-w33
     width 33.333333% !important
 
-  .{kna-namespace}large-w50
+  .{$kna-namespace}large-w50
     width 50% !important
 
-  .{kna-namespace}large-w66
+  .{$kna-namespace}large-w66
     width 66.666666% !important
 
-  .{kna-namespace}large-w75
+  .{$kna-namespace}large-w75
     width 75% !important
 
-  .{kna-namespace}large-w100
-  .{kna-namespace}large-wauto
+  .{$kna-namespace}large-w100
+  .{$kna-namespace}large-wauto
     display block !important
     float none !important
     clear none !important
@@ -49,48 +49,48 @@
     border 0
 
   /* margins for large screens */
-  .{kna-namespace}large-man
-  .{kna-namespace}large-ma0
+  .{$kna-namespace}large-man
+  .{$kna-namespace}large-ma0
     margin 0 !important
 
 /* medium screens */
 /* -------------- */
 
-@media (min-width: (small + 1)) and (max-width: large)
+@media (min-width: ($small + 1)) and (max-width: $large)
 
   /* layouts for medium screens */
-  .{kna-namespace}medium-hidden
+  .{$kna-namespace}medium-hidden
     display none !important
 
-  .{kna-namespace}medium-visible
+  .{$kna-namespace}medium-visible
     display block !important
 
-  .{kna-namespace}medium-no-float
+  .{$kna-namespace}medium-no-float
     float none
 
-  .{kna-namespace}medium-inbl
+  .{$kna-namespace}medium-inbl
     display inline-block
     float none
     vertical-align top
 
   /* widths for medium screens */
-  .{kna-namespace}medium-w25
+  .{$kna-namespace}medium-w25
     width 25% !important
 
-  .{kna-namespace}medium-w33
+  .{$kna-namespace}medium-w33
     width 33.333333% !important
 
-  .{kna-namespace}medium-w50
+  .{$kna-namespace}medium-w50
     width 50% !important
 
-  .{kna-namespace}medium-w66
+  .{$kna-namespace}medium-w66
     width 66.666666% !important
 
-  .{kna-namespace}medium-w75
+  .{$kna-namespace}medium-w75
     width 75% !important
 
-  .{kna-namespace}medium-w100
-  .{kna-namespace}medium-wauto
+  .{$kna-namespace}medium-w100
+  .{$kna-namespace}medium-wauto
     display block !important
     float none !important
     clear none !important
@@ -100,48 +100,48 @@
     border 0
 
   /* margins for medium screens */
-  .{kna-namespace}medium-man
-  .{kna-namespace}medium-ma0
+  .{$kna-namespace}medium-man
+  .{$kna-namespace}medium-ma0
     margin 0 !important
 
 /* small screens */
 /* ------------- */
 
-@media (min-width: (tiny + 1)) and (max-width: small)
+@media (min-width: ($tiny + 1)) and (max-width: $small)
 
   /* layouts for small screens */
-  .{kna-namespace}small-hidden
+  .{$kna-namespace}small-hidden
     display none !important
 
-  .{kna-namespace}small-visible
+  .{$kna-namespace}small-visible
     display block !important
 
-  .{kna-namespace}small-no-float
+  .{$kna-namespace}small-no-float
     float none
 
-  .{kna-namespace}small-inbl
+  .{$kna-namespace}small-inbl
     display inline-block
     float none
     vertical-align top
 
   /* widths for small screens */
-  .{kna-namespace}small-w25
+  .{$kna-namespace}small-w25
     width 25% !important
 
-  .{kna-namespace}small-w33
+  .{$kna-namespace}small-w33
     width 33.333333% !important
 
-  .{kna-namespace}small-w50
+  .{$kna-namespace}small-w50
     width 50% !important
 
-  .{kna-namespace}small-w66
+  .{$kna-namespace}small-w66
     width 66.666666% !important
 
-  .{kna-namespace}small-w75
+  .{$kna-namespace}small-w75
     width 75% !important
 
-  .{kna-namespace}small-w100
-  .{kna-namespace}small-wauto
+  .{$kna-namespace}small-w100
+  .{$kna-namespace}small-wauto
     display block !important
     float none !important
     clear none !important
@@ -151,22 +151,22 @@
     border 0
 
   /* margins for small screens */
-  .{kna-namespace}small-man
-  .{kna-namespace}small-ma0
+  .{$kna-namespace}small-man
+  .{$kna-namespace}small-ma0
     margin 0 !important
 
-  .{kna-namespace}small-pan
-  .{kna-namespace}small-pa0
+  .{$kna-namespace}small-pan
+  .{$kna-namespace}small-pa0
     padding 0 !important
 
 /* tiny screens */
 /* ------------ */
 
-@media (max-width: tiny)
+@media (max-width: $tiny)
 
   /* quick small resolution reset */
-  .{kna-namespace}mod
-  .{kna-namespace}col
+  .{$kna-namespace}mod
+  .{$kna-namespace}col
   fieldset
     display block !important
     float none !important
@@ -176,42 +176,42 @@
     margin-right 0 !important
     border 0
 
-  .{kna-namespace}flex-container
+  .{$kna-namespace}flex-container
     flex-direction column
 
   /* layouts for tiny screens */
-  .{kna-namespace}tiny-hidden
+  .{$kna-namespace}tiny-hidden
     display none !important
 
-  .{kna-namespace}tiny-visible
+  .{$kna-namespace}tiny-visible
     display block !important
 
-  .{kna-namespace}tiny-no-float
+  .{$kna-namespace}tiny-no-float
     float none
 
-  .{kna-namespace}tiny-inbl
+  .{$kna-namespace}tiny-inbl
     display inline-block
     float none
     vertical-align top
 
   /* widths for tiny screens */
-  .{kna-namespace}tiny-w25
+  .{$kna-namespace}tiny-w25
     width 25% !important
 
-  .{kna-namespace}tiny-w33
+  .{$kna-namespace}tiny-w33
     width 33.333333% !important
 
-  .{kna-namespace}tiny-w50
+  .{$kna-namespace}tiny-w50
     width 50% !important
 
-  .{kna-namespace}tiny-w66
+  .{$kna-namespace}tiny-w66
     width 66.666666% !important
 
-  .{kna-namespace}tiny-w75
+  .{$kna-namespace}tiny-w75
     width 75% !important
 
-  .{kna-namespace}tiny-w100
-  .{kna-namespace}tiny-wauto
+  .{$kna-namespace}tiny-w100
+  .{$kna-namespace}tiny-wauto
     display block !important
     float none !important
     clear none !important
@@ -221,10 +221,10 @@
     border 0
 
   /* margins for tiny screens */
-  .{kna-namespace}tiny-man
-  .{kna-namespace}tiny-ma0
+  .{$kna-namespace}tiny-man
+  .{$kna-namespace}tiny-ma0
     margin 0 !important
 
-  .{kna-namespace}tiny-pan
-  .{kna-namespace}tiny-pa0
+  .{$kna-namespace}tiny-pan
+  .{$kna-namespace}tiny-pa0
     padding 0 !important