uses device as suffix not prefix

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) .

_grid.scss

@@ -140,21 +140,21 @@
     $deviceString: null;
 
     @if $device {
-        $deviceString: "#{$device}-";
+        $deviceString: "--#{$device}";
     }
 
     // loops the $gridWiths map
     @each $gridWidth, $width in $gridWidths {
 
         $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});
                 }
             }