🔨 Addeda couple of helper classes

Added helper classes for columns to share the left over width

Author: lucasgruwez

dist/waffle-grid.css

@@ -1,5 +1,5 @@
 /*!
- * waffle-grid - v1.3.0 - (https://lucasgruwez.github.io/waffle-grid)
+ * waffle-grid - v1.3.1 - (https://lucasgruwez.github.io/waffle-grid)
  * Copyright 2017 Lucas Gruwez.
  * Licensed under MIT
  * https://lucasgruwez.github.io/waffle-grid
@@ -38,6 +38,11 @@
   margin-left: auto;
 }
 
+.w-auto {
+  -ms-flex: 1;
+      flex: 1;
+}
+
 .col-1-of-4,.col-2-of-8,.col-3-of-12 {
   width: calc(25% - 20px);
 }
@@ -235,6 +240,11 @@
     display: none;
   }
 
+  .w-m-auto {
+    -ms-flex: 1;
+        flex: 1;
+  }
+
   .col-m-1-of-4,.col-m-2-of-8 {
     width: calc(25% - 20px);
   }
@@ -385,6 +395,11 @@
     display: none;
   }
 
+  .w-s-auto {
+    -ms-flex: 1;
+        flex: 1;
+  }
+
   .col-s-1-of-4 {
     width: calc(25% - 20px);
   }
@@ -483,13 +498,13 @@
 }
 
 @media (min-width:480px) {
-  .s-and-lower,.s-only {
+  .s-and-lower {
     display: none;
   }
 }
 
 @media (min-width:840px) {
-  .m-and-lower,.m-only {
+  .m-and-lower {
     display: none;
   }
 }

dist/waffle-grid.min.css

@@ -37,6 +37,12 @@ gulp.task('css:minify', function() {
     .pipe(gulp.dest('dist'));
 });
 
+gulp.task('watch', function () {
+  gulp.watch('./src/**/*.scss', function () {
+    runSequence('sass:compile', 'css:minify')
+  });
+});
+
 gulp.task('default', function () {
   runSequence('sass:compile', 'css:minify');
 })

gulpfile.js

@@ -1,5 +1,5 @@
 /*!
- * waffle-grid - v1.3.0 - (https://lucasgruwez.github.io/waffle-grid)
+ * waffle-grid - v1.3.1 - (https://lucasgruwez.github.io/waffle-grid)
  * Copyright 2017 Lucas Gruwez.
  * Licensed under MIT
  * https://lucasgruwez.github.io/waffle-grid
@@ -60,6 +60,7 @@ $breakpoints: (
 .center {margin-left: auto; margin-right: auto;}
 .left	  {margin-right: auto;}
 .right  {margin-left: auto;}
+.w-auto {flex: 1}
 
 @each $col-am in $grid-columns {
 	@for $i from 1 through $col-am {
@@ -89,6 +90,7 @@ $breakpoints: (
 
 	@media (max-width: $bp-width) {
 		.#{$bp-name}-hide {display: none;}
+		.w-#{$bp-name}-auto {flex: 1}
 
 		@each $col-am in $bp-col-ams {
 			@for $i from 1 through $col-am {
@@ -134,7 +136,6 @@ $breakpoints: (
 	$bp-width: nth(nth($bp, 2), 1);
 
 	@media (min-width: $bp-width) {
-		.#{$bp-name}-only {display: none;}
 		.#{$bp-name}-and-lower {display: none;}
 	}
 }
@@ -145,5 +146,4 @@ $breakpoints: (
 
 
 
-
 // under 150 lines !!