add functionality for better gutter control in responsive designs (#4)

* v1.2.0 add functionality for better gutter control in responsive designs

index.css

@@ -5,7 +5,7 @@
    ██╔═██╗ ██║██║     ██╔═██╗ ██║   ██║██╔══╝  ██╔══╝
    ██║  ██╗██║╚██████╗██║  ██╗╚██████╔╝██║     ██║
    ╚═╝  ╚═╝╚═╝ ╚═════╝╚═╝  ╚═╝ ╚═════╝ ╚═╝     ╚═╝
- * Kickoff’s CSS Grid Module v1.1.0
+ * Kickoff’s CSS Grid Module v1.2.0
  * https://github.com/trykickoff/kickoff-grid.css
  * http://trykickoff.com
  */
@@ -20,6 +20,60 @@
  * Grid span classes
  * Breakpoint stacking
  */
+/**
+ * Colour functions
+ */
+/*
+$color-palette: (
+  white: (
+    base: #ffffff
+  ),
+
+  sky: (
+    lighter: #f9fafb,
+    light: #f4f6f8,
+    base: #dfe3e8,
+    dark: #c4cdd5
+  )
+);
+*/
+/**
+ * Color
+ * Returns the color value for a given color name and group.
+ * HT Shopify Polaris team
+ *
+ * @param {String} $hue - The color's hue.
+ * @param {String} $value - The darkness/lightness of the color. Defaults to base.
+ * @param {Color} $for-background - The background color on which this color will
+ * appear. Applies a multiply filter to ensure appropriate contrast.
+ * @return {Color} The color value.
+ *
+ * Usage (based on the Sass map above):
+ * ko-color(white)
+ * ko-color(sky, dark)
+ * ko-color(sky, lighter)
+ *
+ */
+/**
+ * Darkens the foreground color by the background color. This is the same as the
+ * “multiply” filter in graphics apps.
+ *
+ * @param {Color} $foreground - The color to darken.
+ * @param {Color} $background - The background to base darkening on.
+ * @return {Color} The modified color.
+ */
+/**
+ * Tint
+ * Add percentage of white to a color
+ * Usage:
+ * background-color: ko-color-tint(blue, 20%);
+ */
+/**
+ * Shade
+ * Add percentage of black to a color
+ * Usage:
+ * background-color: ko-color-shade(blue, 20%);
+ */
 /**
  * Usage:
  *
@@ -47,6 +101,24 @@
  * ko-type(mid) - uses the $type Sass map
  * ko-type($foo) - uses a Sass variable
  */
+/**
+ * Get font-family
+ *
+ * ko-font()
+ *
+ * Usage:
+ * ko-font(system) - uses 'system' font stack
+ * ko-font(sans) - uses the 'sans' font stack
+ */
+/**
+ * Get z-index value
+ *
+ * ko-zIndex()
+ *
+ * Usage:
+ * ko-zIndex(low) - uses 'low' z-index value
+ * ko-zIndex(mid) - uses 'mid' z-index value
+ */
 /**
  * Usage:
  *
@@ -64,14 +136,27 @@
    width: ko-map-deep-get($grid-configuration, 'layouts', 'medium');
  }
  */
+/**
+ * Modular scale
+ * =================================
+ * Usage: ko-modular-scale($font-size-base, 3, $type-scale)
+ * or with the shorthand version: ko-ms(3)
+ */
+/**
+ * Shorthand modular scale
+ * Uses the $font-size-base and $type-scale framework variables so that you
+ * only need to provide the scale increment
+ *
+ * e.g. ko-ms(5)
+ */
 /**
  * Multiply
  * =================
  * Multiply any value
  *
  * Usage:
- * multiply(15, 2)
- * multiply($baseline, 1.5)
+ * ko-multiply(15, 2)
+ * ko-multiply($baseline, 1.5)
  */
 /**
  * Sass Mixins
@@ -224,8 +309,9 @@
 
 .g-col {
   display: block;
+  box-sizing: border-box;
   -webkit-box-flex: 1;
-      -ms-flex: 1 0 0;
+      -ms-flex: 1 0 0px;
           flex: 1 0 0;
   min-width: 0; }
 
@@ -241,6 +327,38 @@
     padding-left: 10px;
     padding-right: 10px; }
 
+@media (min-width: 25em) {
+  .g--gutter--narrow {
+    margin-left: -10px;
+    margin-right: -10px; }
+    .g--gutter--narrow > .g-col {
+      padding-left: 10px;
+      padding-right: 10px; } }
+
+@media (min-width: 46.875em) {
+  .g--gutter--mid {
+    margin-left: -10px;
+    margin-right: -10px; }
+    .g--gutter--mid > .g-col {
+      padding-left: 10px;
+      padding-right: 10px; } }
+
+@media (min-width: 62.5em) {
+  .g--gutter--wide {
+    margin-left: -10px;
+    margin-right: -10px; }
+    .g--gutter--wide > .g-col {
+      padding-left: 10px;
+      padding-right: 10px; } }
+
+@media (min-width: 78.125em) {
+  .g--gutter--huge {
+    margin-left: -10px;
+    margin-right: -10px; }
+    .g--gutter--huge > .g-col {
+      padding-left: 10px;
+      padding-right: 10px; } }
+
 .g--gutter--scaled > .g-col {
   margin-left: 2%;
   margin-right: 0; }
@@ -1567,8 +1685,10 @@
 
 @media (max-width: 24.99em) {
   .g--stack--narrow {
-    -ms-flex-flow: column nowrap;
-        flex-flow: column nowrap; }
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-flow: column nowrap;
+            flex-flow: column nowrap; }
     .g--stack--narrow > .g-col {
       -ms-flex-preferred-size: auto !important;
           flex-basis: auto !important;
@@ -1579,8 +1699,10 @@
 
 @media (max-width: 46.865em) {
   .g--stack--mid {
-    -ms-flex-flow: column nowrap;
-        flex-flow: column nowrap; }
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-flow: column nowrap;
+            flex-flow: column nowrap; }
     .g--stack--mid > .g-col {
       -ms-flex-preferred-size: auto !important;
           flex-basis: auto !important;
@@ -1591,8 +1713,10 @@
 
 @media (max-width: 62.49em) {
   .g--stack--wide {
-    -ms-flex-flow: column nowrap;
-        flex-flow: column nowrap; }
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-flow: column nowrap;
+            flex-flow: column nowrap; }
     .g--stack--wide > .g-col {
       -ms-flex-preferred-size: auto !important;
           flex-basis: auto !important;
@@ -1603,8 +1727,10 @@
 
 @media (max-width: 78.115em) {
   .g--stack--huge {
-    -ms-flex-flow: column nowrap;
-        flex-flow: column nowrap; }
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-flow: column nowrap;
+            flex-flow: column nowrap; }
     .g--stack--huge > .g-col {
       -ms-flex-preferred-size: auto !important;
           flex-basis: auto !important;

package.json

@@ -2,7 +2,7 @@
   "name": "kickoff-grid.css",
   "title": "Kickoff’s CSS Grid Module",
   "description": "Simple powerful flexbox grid with float fallbacks",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "homepage": "http://trykickoff.com",
   "repo": "https://github.com/trykickoff/kickoff-grid.css",
   "main": "index.css",

readme.md

@@ -59,6 +59,7 @@ $grid-gutter-width          : 20    !default; // [in pixels]
 
 //Settings here override & affect the grid classes output
 $responsive-grid-sizes      : true  !default; // Disable this if you don't want grid sizes for each breakpoint
+$responsive-gutters         : true  !default; // Disable this if you don't want gutters for each breakpoint
 $use-legacy-grid            : true  !default; // Disable this if you don’t want to output .no-flexbox classes for older browsers to use
 ```
 

scss/_grid-variables.scss

@@ -25,4 +25,5 @@ $grid-gutter-width        : 20    !default; // [in pixels]
 
 //Settings here override & affect the grid classes output
 $responsive-grid-sizes    : true  !default; // Disable this if you don't want grid sizes for each breakpoint
+$responsive-gutters       : true  !default; // Disable this if you don't want gutters for each breakpoint
 $use-legacy-grid          : true  !default; // Disable this if you don’t want to output .no-flexbox classes for older browsers to use

scss/index.scss

@@ -51,7 +51,7 @@
  * Usage: gutterCalc() or gutterCalc(false)
  */
 
-// Two types of gutter
+// Three types of gutter
 // -------------------
 // .g--gutter
 // Uses padding and fixed gutter px values.
@@ -70,6 +70,26 @@ $g-gutter-half: ($grid-gutter-width / 2) + px;
 	}
 }
 
+// .g--gutter--<breakpoints>
+// Generates gutter settings for each defined breakpoint for better gutter control in responsive designs
+// Only generated if $responsive-gutters == true
+
+@if $responsive-gutters {
+	@each $name, $value in $breakpoints {
+		.g--gutter--#{$name} {
+			@include media(">=#{$name}") {
+				margin-left: -$g-gutter-half;
+				margin-right: -$g-gutter-half;
+
+				& > .g-col {
+					padding-left: $g-gutter-half;
+					padding-right: $g-gutter-half;
+				}
+			}
+		}
+	}
+}
+
 // .g--gutter--scaled
 // Uses margin and percentage values.  Scales the margin as the viewport gets smaller (for RWD)
 // Pro = Good for when your container is always the $layout-max-width.  Means can apply borders to grid elements without more markup