possible solution for foundation#8257

taking first breakpoint and check if smallest and define it as zero-breakpoint

Author: DaSchTour

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 {

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

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 {