From 202e9cfe15fa3edf8507aaeaf22ec31b69cd8bb5 Mon Sep 17 00:00:00 2001
From: Daniel Schuba <daniel.schuba@getit.de>
Date: Wed, 2 Mar 2016 15:40:44 +0100
Subject: [PATCH 1/3] possible solution for #8257 taking first breakpoint and
 check if smallest and define it as zero-breakpoint

---
 scss/grid/_flex-grid.scss  |  2 +-
 scss/util/_breakpoint.scss | 13 +++++++------
 scss/util/_mixins.scss     |  2 +-
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/scss/grid/_flex-grid.scss b/scss/grid/_flex-grid.scss
index 788313311e..2f67fe02c1 100644
--- a/scss/grid/_flex-grid.scss
+++ b/scss/grid/_flex-grid.scss
@@ -213,7 +213,7 @@
       }
     }
 
-    @if $-zf-size != small {
+    @if $-zf-size != $zero-breakpoint-name {
       // Sizing (expand)
       @include breakpoint($-zf-size) {
         .#{$-zf-size}-expand {
diff --git a/scss/util/_breakpoint.scss b/scss/util/_breakpoint.scss
index cfa08d4367..6c4a5ca008 100644
--- a/scss/util/_breakpoint.scss
+++ b/scss/util/_breakpoint.scss
@@ -18,11 +18,12 @@ $breakpoints: (
   xxlarge: 1440px,
 ) !default;
 
-@if not map-has-key($breakpoints, small) or not map-has-key($breakpoints, medium) {
-  @error 'Your list of breakpoints (defined in $breakpoints) must include one named "small" and one named "medium".';
-}
-@else if map-get($breakpoints, small) != 0 {
-  @error 'Your "small" breakpoint (defined in $breakpoints) must be set to "0".';
+$zero-breakpoint-name: small !default;
+
+@if nth(map-values($breakpoints),1) != 0 {
+  @error 'Your smallest breakpoint (defined in $breakpoints) must be set to "0".';
+} @else {
+  $zero-breakpoint-name: nth(map-keys($breakpoints),1);
 }
 
 /// All of the names in this list will be output as classes in your CSS, like `.small-12`, `.medium-6`, and so on. Each value in this list must also be in the `$breakpoints` map.
@@ -32,7 +33,7 @@ $breakpoint-classes: (small medium large) !default;
 /// Generates a media query string matching the input value. Refer to the documentation for the `breakpoint()` mixin to see what the possible inputs are.
 ///
 /// @param {Keyword|Number} $val [small] - Breakpoint name, or px, rem, or em value to process.
-@function breakpoint($val: small) {
+@function breakpoint($val: $zero-breakpoint-name) {
   // Size or keyword
   $bp: nth($val, 1);
   // Value for max-width media queries
diff --git a/scss/util/_mixins.scss b/scss/util/_mixins.scss
index a984aa7551..e11e514245 100644
--- a/scss/util/_mixins.scss
+++ b/scss/util/_mixins.scss
@@ -220,7 +220,7 @@
   $map: $breakpoint-classes;
 
   @if not $small {
-    $map: map-remove($map, small);
+    $map: map-remove($map, $zero-breakpoint-name);
   }
 
   @each $size in $map {

From 018c5677d8242570a3c3dd0a4a30666929a4f767 Mon Sep 17 00:00:00 2001
From: Daniel Schuba <daniel.schuba@getit.de>
Date: Thu, 3 Mar 2016 16:42:20 +0100
Subject: [PATCH 2/3] Renamed variable and hopefully changed all usages of
 small breakpoint

---
 scss/components/_dropdown-menu.scss | 2 +-
 scss/components/_media-object.scss  | 2 +-
 scss/components/_menu.scss          | 2 +-
 scss/components/_off-canvas.scss    | 2 +-
 scss/components/_reveal.scss        | 2 +-
 scss/components/_top-bar.scss       | 2 +-
 scss/components/_visibility.scss    | 2 +-
 scss/grid/_flex-grid.scss           | 2 +-
 scss/grid/_row.scss                 | 2 +-
 scss/typography/_alignment.scss     | 2 +-
 scss/util/_breakpoint.scss          | 6 +++---
 scss/util/_mixins.scss              | 2 +-
 12 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/scss/components/_dropdown-menu.scss b/scss/components/_dropdown-menu.scss
index 8fcb55229f..a73fb27f9c 100644
--- a/scss/components/_dropdown-menu.scss
+++ b/scss/components/_dropdown-menu.scss
@@ -124,7 +124,7 @@ $dropdownmenu-border-width: nth($dropdownmenu-border, 1);
     }
 
     @each $size in $breakpoint-classes {
-      @if $size != small {
+      @if $size != $-zf-zero-breakpoint {
         @include breakpoint($size) {
           &.#{$size}-horizontal {
             @include dropdown-menu-direction(horizontal);
diff --git a/scss/components/_media-object.scss b/scss/components/_media-object.scss
index 8e623af501..e3c2267c21 100644
--- a/scss/components/_media-object.scss
+++ b/scss/components/_media-object.scss
@@ -81,7 +81,7 @@ $mediaobject-image-width-stacked: 100% !default;
     }
 
     &.stack-for-small .media-object-section {
-      @include breakpoint(small only) {
+      @include breakpoint($-zf-zero-breakpoint only) {
         @include media-object-stack;
       }
     }
diff --git a/scss/components/_menu.scss b/scss/components/_menu.scss
index 3905041f9f..0cecaef794 100644
--- a/scss/components/_menu.scss
+++ b/scss/components/_menu.scss
@@ -234,7 +234,7 @@ $menu-icon-spacing: 0.25rem !default;
     }
 
     @each $size in $breakpoint-classes {
-      @if $size != small {
+      @if $size != $-zf-zero-breakpoint {
         @include breakpoint($size) {
           &.#{$size}-horizontal {
             @include menu-direction(horizontal);
diff --git a/scss/components/_off-canvas.scss b/scss/components/_off-canvas.scss
index 769d2612ac..e7175e9782 100644
--- a/scss/components/_off-canvas.scss
+++ b/scss/components/_off-canvas.scss
@@ -162,7 +162,7 @@ $maincontent-shadow: 0 0 10px rgba($black, 0.5) !default;
 
   // Reveal off-canvas menu on larger screens
   @each $name, $value in $breakpoint-classes {
-    @if $name != small {
+    @if $name != $-zf-zero-breakpoint {
       @include breakpoint($name) {
         .position-left.reveal-for-#{$name} {
           @include off-canvas-reveal(left);
diff --git a/scss/components/_reveal.scss b/scss/components/_reveal.scss
index bc8d375c36..1994dbdbf4 100644
--- a/scss/components/_reveal.scss
+++ b/scss/components/_reveal.scss
@@ -153,7 +153,7 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
       @include reveal-modal-fullscreen;
     }
 
-    @include breakpoint(small only) {
+    @include breakpoint($-zf-zero-breakpoint only) {
       @include reveal-modal-fullscreen;
     }
 
diff --git a/scss/components/_top-bar.scss b/scss/components/_top-bar.scss
index 10fb45f4e4..6cc60ba412 100644
--- a/scss/components/_top-bar.scss
+++ b/scss/components/_top-bar.scss
@@ -128,7 +128,7 @@ $topbar-unstack-breakpoint: medium !default;
 
     // Generate classes for stacking on each screen size (defined in $breakpoint-classes)
     @each $size in $breakpoint-classes {
-      @if $size != small {
+      @if $size != $-zf-zero-breakpoint {
         &.stacked-for-#{$size} {
           @include breakpoint($size down) {
             @include top-bar-stacked;
diff --git a/scss/components/_visibility.scss b/scss/components/_visibility.scss
index f9a6c12663..9f50179272 100644
--- a/scss/components/_visibility.scss
+++ b/scss/components/_visibility.scss
@@ -68,7 +68,7 @@
 
   // Responsive visibility classes
   @each $size in $breakpoint-classes {
-    @if $size != small {
+    @if $size != $-zf-zero-breakpoint {
       .hide-for-#{$size} {
         @include hide-for($size);
       }
diff --git a/scss/grid/_flex-grid.scss b/scss/grid/_flex-grid.scss
index 2f67fe02c1..fc55564dac 100644
--- a/scss/grid/_flex-grid.scss
+++ b/scss/grid/_flex-grid.scss
@@ -213,7 +213,7 @@
       }
     }
 
-    @if $-zf-size != $zero-breakpoint-name {
+    @if $-zf-size != $-zf-zero-breakpoint {
       // Sizing (expand)
       @include breakpoint($-zf-size) {
         .#{$-zf-size}-expand {
diff --git a/scss/grid/_row.scss b/scss/grid/_row.scss
index dacdfafb83..daa71e03c5 100644
--- a/scss/grid/_row.scss
+++ b/scss/grid/_row.scss
@@ -80,7 +80,7 @@
 /// @param {Map|null} $gutter [null] - Gutter value to use when inverting the margins. Set to `null` to refer to the responsive gutter settings.
 @mixin grid-row-nest($gutter: $grid-column-gutter) {
   @if type-of($gutter) == 'number' {
-    $gutter: (small: $gutter);
+    $gutter: ($-zf-zero-breakpoint: $gutter);
   }
 
   @each $breakpoint, $value in $gutter {
diff --git a/scss/typography/_alignment.scss b/scss/typography/_alignment.scss
index cfd3e99c7f..77ffd61741 100644
--- a/scss/typography/_alignment.scss
+++ b/scss/typography/_alignment.scss
@@ -6,7 +6,7 @@
   @each $size in $breakpoint-classes {
     @include breakpoint($size) {
       @each $align in (left, right, center, justify) {
-        @if $size != 'small' {
+        @if $size != $-zf-zero-breakpoint {
           .#{$size}-text-#{$align} {
             text-align: $align;
           }
diff --git a/scss/util/_breakpoint.scss b/scss/util/_breakpoint.scss
index 6c4a5ca008..d739591099 100644
--- a/scss/util/_breakpoint.scss
+++ b/scss/util/_breakpoint.scss
@@ -18,12 +18,12 @@ $breakpoints: (
   xxlarge: 1440px,
 ) !default;
 
-$zero-breakpoint-name: small !default;
+$-zf-zero-breakpoint: small !default;
 
 @if nth(map-values($breakpoints),1) != 0 {
   @error 'Your smallest breakpoint (defined in $breakpoints) must be set to "0".';
 } @else {
-  $zero-breakpoint-name: nth(map-keys($breakpoints),1);
+  $-zf-zero-breakpoint: nth(map-keys($breakpoints),1);
 }
 
 /// All of the names in this list will be output as classes in your CSS, like `.small-12`, `.medium-6`, and so on. Each value in this list must also be in the `$breakpoints` map.
@@ -33,7 +33,7 @@ $breakpoint-classes: (small medium large) !default;
 /// Generates a media query string matching the input value. Refer to the documentation for the `breakpoint()` mixin to see what the possible inputs are.
 ///
 /// @param {Keyword|Number} $val [small] - Breakpoint name, or px, rem, or em value to process.
-@function breakpoint($val: $zero-breakpoint-name) {
+@function breakpoint($val: $-zf-zero-breakpoint) {
   // Size or keyword
   $bp: nth($val, 1);
   // Value for max-width media queries
diff --git a/scss/util/_mixins.scss b/scss/util/_mixins.scss
index e11e514245..fb0768ed2b 100644
--- a/scss/util/_mixins.scss
+++ b/scss/util/_mixins.scss
@@ -220,7 +220,7 @@
   $map: $breakpoint-classes;
 
   @if not $small {
-    $map: map-remove($map, $zero-breakpoint-name);
+    $map: map-remove($map, $-zf-zero-breakpoint);
   }
 
   @each $size in $map {

From fb7ff3bb68339293f16e52a75b87da6e0f4c1fb3 Mon Sep 17 00:00:00 2001
From: Daniel Schuba <daniel.schuba@getit.de>
Date: Mon, 7 Mar 2016 18:02:21 +0100
Subject: [PATCH 3/3] used zero-breakpoint name for stacking

---
 scss/components/_media-object.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scss/components/_media-object.scss b/scss/components/_media-object.scss
index e3c2267c21..eef829d362 100644
--- a/scss/components/_media-object.scss
+++ b/scss/components/_media-object.scss
@@ -75,12 +75,12 @@ $mediaobject-image-width-stacked: 100% !default;
     }
 
     @if $global-flexbox {
-      &.stack-for-small {
+      &.stack-for-#{$-zf-zero-breakpoint} {
         flex-wrap: wrap;
       }
     }
 
-    &.stack-for-small .media-object-section {
+    &.stack-for-#{$-zf-zero-breakpoint} .media-object-section {
       @include breakpoint($-zf-zero-breakpoint only) {
         @include media-object-stack;
       }