Fixed issue #21

Added helper prefixes, now v1.3.6.
Also added sponsor button on repo, linking to paypal.me.

.github/FUNDING.yml

@@ -0,0 +1 @@
+custom: https://paypal.me/lucasgruwez

.gitignore

@@ -71,4 +71,4 @@ typings/
 
 # custom gitignored folders
 
-docs/_jade
+package-lock.json

README.md

@@ -42,7 +42,7 @@ $ npm install waffle-grid
 # or
 $ bower install waffle-grid
 ```
-If you want you can still download the waffle grid [here](https://github.com/lucasgruwez/waffle-grid/releases/download/v1.3.1/waffle-grid.min.css).
+If you want you can still download the waffle grid [here](https://github.com/lucasgruwez/waffle-grid/releases).
 
 ## Docs
 

dist/waffle-grid.css

@@ -1,5 +1,5 @@
 /*!
- * waffle-grid - v1.3.5 - (https://lucasgruwez.github.io/waffle-grid)
+ * waffle-grid - v1.3.6 - (https://lucasgruwez.github.io/waffle-grid)
  * Copyright 2017 Lucas Gruwez.
  * Licensed under MIT
  * https://lucasgruwez.github.io/waffle-grid
@@ -10,13 +10,16 @@
 }
 
 .grid,.row {
+  display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
 
 .grid {
-  -ms-flex-direction: column;
-      flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
 }
 
 .grid.full-width {
@@ -25,15 +28,18 @@
 }
 
 .row {
-  -ms-flex-direction: row;
-      flex-direction: row;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
   width: 100%;
   -ms-flex-wrap: wrap;
       flex-wrap: wrap;
 }
 
 .col {
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   margin: 10px;
   vertical-align: top;
 }
@@ -47,8 +53,9 @@
 }
 
 .w-auto {
-  -ms-flex: 1;
-      flex: 1;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
 }
 
 .col-1-of-4,.col-2-of-8,.col-3-of-12 {
@@ -249,8 +256,9 @@
   }
 
   .w-m-auto {
-    -ms-flex: 1;
-        flex: 1;
+    -webkit-box-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
   }
 
   .m-un-push {
@@ -412,8 +420,9 @@
   }
 
   .w-s-auto {
-    -ms-flex: 1;
-        flex: 1;
+    -webkit-box-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
   }
 
   .s-un-push {

docs/_config.yml

@@ -10,10 +10,10 @@ url:        lucasgruwez.github.io
 baseurl:    /waffle-grid
 
 # Custom variables
-version:    v1.3.5
+version:    v1.3.6
 cdn:        https://unpkg.com/waffle-grid
 repo:       https://github.com/lucasgruwez/waffle-grid
-download:   https://github.com/lucasgruwez/waffle-grid/releases/download/v1.3.5/waffle-grid.min.css
+download:   https://github.com/lucasgruwez/waffle-grid/releases/download/v1.3.6/waffle-grid.min.css
 docs:       https://github.com/lucasgruwez/waffle-grid/wiki
 stargazers: https://github.com/lucasgruwez/waffle-grid/stargazers
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "waffle-grid",
-  "version": "1.3.5",
+  "version": "1.3.6",
   "description": "An easy to use flexbox grid system",
   "main": "dist/waffle-grid.min.css",
   "repository": {

src/waffle-grid.scss

@@ -1,5 +1,5 @@
 /*!
- * waffle-grid - v1.3.5 - (https://lucasgruwez.github.io/waffle-grid)
+ * waffle-grid - v1.3.6 - (https://lucasgruwez.github.io/waffle-grid)
  * Copyright 2017 Lucas Gruwez.
  * Licensed under MIT
  * https://lucasgruwez.github.io/waffle-grid
@@ -11,6 +11,7 @@ $grid-classname: "grid" !default;
 $row-classname: "row" !default;
 $column-classname: "col" !default;
 $container-classname: "container" !default;
+$helper-prefix: "" !default;
 
 // Column amounts, results in:
 // .col-n-of-4, or .col-n-of-8
@@ -68,10 +69,10 @@ $breakpoints: (
   vertical-align: top;
 }
 
-.center {margin-left: auto; margin-right: auto;}
-.left   {margin-right: auto;}
-.right  {margin-left: auto;}
-.w-auto {flex: 1}
+.#{$helper-prefix}center {margin-left: auto; margin-right: auto;}
+.#{$helper-prefix}left   {margin-right: auto;}
+.#{$helper-prefix}right  {margin-left: auto;}
+.#{$helper-prefix}w-auto {flex: 1}
 
 @each $col-am in $grid-columns {
 	@for $i from 1 through $col-am {