From 99f9eb7da50cc7daf3a6715044c511ea366298bb Mon Sep 17 00:00:00 2001
From: David Aerne <meodai@gmail.com>
Date: Fri, 26 Feb 2016 23:59:22 +0100
Subject: [PATCH] uses device as suffix not prefix

---
 README.md  |  4 ++--
 _grid.scss | 14 +++++++-------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 68f7ef4..250f7af 100644
--- a/README.md
+++ b/README.md
@@ -70,7 +70,7 @@ body {
 
 
 ## Usage JS
-All the defined breakpoints are available 
+All the defined breakpoints are available
 
 ```javascript
 // mediaQuery.onEnter / onLeave (queryString,callback,callOnRegister)
@@ -100,7 +100,7 @@ if ( mediaQuery.isNot('mobile') ){
 It provides a lightweight, flexible and responsive grid based on sensible. The classes generated by it will look like this:
 
 ```css
-.l-one-whole, .l-one-half, .l-one-quarter, .l-mobile-one-whole, .l-mobile-one-half, .l-mobile-one-quarter
+.l-one-whole, .l-one-half, .l-one-quarter, .l-one-whole--mobile, .l-one-half--mobile, .l-one-quarter--mobile
 ```
 
 Wrap these elements in an element with the class `.l-grid`. Check out the [demo](http://codepen.io/meodai/pen/kzwAy?editors=011) .
diff --git a/_grid.scss b/_grid.scss
index fea5320..d69689e 100644
--- a/_grid.scss
+++ b/_grid.scss
@@ -140,7 +140,7 @@
     $deviceString: null;
 
     @if $device {
-        $deviceString: "#{$device}-";
+        $deviceString: "--#{$device}";
     }
 
     // loops the $gridWiths map
@@ -148,13 +148,13 @@
 
         $width: $width / 10% * (10% - $rounding);
 
-        %#{$slug}#{$deviceString}#{$gridWidth},
-        .#{$slug}#{$deviceString}#{$gridWidth} {
+        %#{$slug}#{$gridWidth}#{$deviceString},
+        .#{$slug}#{$gridWidth}#{$deviceString} {
             width: $width;
         }
         @if $pushClasses {
-            %#{$slug}push-#{$deviceString}#{$gridWidth},
-            .#{$slug}push-#{$deviceString}#{$gridWidth}{
+            %#{$slug}push-#{$gridWidth}#{$deviceString},
+            .#{$slug}push-#{$gridWidth}#{$deviceString}{
                 margin-left: $width;
             }
         }
@@ -165,8 +165,8 @@
             $width: $width / 10% * (10% - $rounding);
             %#{$slug}grid,
             .#{$slug}grid {
-                & > %#{$slug}#{$deviceString}#{$gridWidth},
-                & > .#{$slug}#{$deviceString}#{$gridWidth} {
+                & > %#{$slug}#{$gridWidth}#{$deviceString},
+                & > .#{$slug}#{$gridWidth}#{$deviceString} {
                     width: calc(#{$width} - #{$gutter});
                 }
             }