locomotivecms_wagon 2.4.0.rc2 → 2.4.0

data/generators/foundation/public/stylesheets/foundation6/typography/_alignment.scss

@@ -3,18 +3,19 @@
 // Licensed under MIT Open Source
 
 @mixin foundation-text-alignment {
-  @each $align in (left, right, center, justify) {
-    .text-#{$align} {
-      text-align: $align;
-    }
-
-    @each $size in $breakpoint-classes {
-      @include breakpoint($size) {
-        @if $size != 'small' {
+  @each $size in $breakpoint-classes {
+    @include breakpoint($size) {
+      @each $align in (left, right, center, justify) {
+        @if $size != $-zf-zero-breakpoint {
           .#{$size}-text-#{$align} {
             text-align: $align;
           }
         }
+        @else {
+          .text-#{$align} {
+            text-align: $align;
+          }
+        }
       }
     }
   }

data/generators/foundation/public/stylesheets/foundation6/typography/_base.scss

@@ -12,7 +12,7 @@
 //   - Paragraphs <p>
 //   - Bold/italics <b> <strong> <i> <em>
 //   - Small text <small>
-//   - Headings <h1>—<h6>
+//   - Headings <h1>-<h6>
 //   - Anchors <a>
 //   - Dividers <hr>
 //   - Lists <ul> <ol> <dl>
@@ -36,28 +36,7 @@ $header-font-style: normal !default;
 
 /// Font stack used for elements that use monospaced type, such as code samples
 /// @type String | List
-$font-family-monospace: Consolas, "Liberation Mono", Courier, monospace !default;
-
-/// Sizes of headings at various screen sizes. Each key is a breakpoint, and each value is a map of heading sizes.
-/// @type Map
-$header-sizes: (
-  small: (
-    'h1': 24,
-    'h2': 20,
-    'h3': 19,
-    'h4': 18,
-    'h5': 17,
-    'h6': 16,
-  ),
-  medium: (
-    'h1': 48,
-    'h2': 40,
-    'h3': 31,
-    'h4': 25,
-    'h5': 20,
-    'h6': 16,
-  ),
-) !default;
+$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace !default;
 
 /// Color of headers.
 /// @type Color
@@ -71,6 +50,47 @@ $header-lineheight: 1.4 !default;
 /// @type Number
 $header-margin-bottom: 0.5rem !default;
 
+/// Styles for headings at various screen sizes. Each key is a breakpoint, and each value is a map of heading styles.
+/// @type Map
+$header-styles: (
+  small: (
+    'h1': ('font-size': 24),
+    'h2': ('font-size': 20),
+    'h3': ('font-size': 19),
+    'h4': ('font-size': 18),
+    'h5': ('font-size': 17),
+    'h6': ('font-size': 16),
+  ),
+  medium: (
+    'h1': ('font-size': 48),
+    'h2': ('font-size': 40),
+    'h3': ('font-size': 31),
+    'h4': ('font-size': 25),
+    'h5': ('font-size': 20),
+    'h6': ('font-size': 16),
+  ),
+) !default;
+
+// $header-styles map is built from $header-sizes in order to ensure downward compatibility
+// when $header-sizes is depreciated, $header-styles needs to get !default values like settings.scss
+@function build_from_header-sizes($header-sizes) {
+  @warn 'Note, that $header-sizes has been replaced with $header-styles. $header-sizes still works, but it is going to be depreciated.';
+  $header-styles: ();
+  @each $size, $headers in $header-sizes {
+    $header-map: ();
+    @each $header, $font-size in $headers {
+      $header-map: map-merge($header-map, ($header: ('font-size': $font-size)));  
+    }
+    $header-styles: map-merge($header-styles, ($size: $header-map));
+  }
+  @return $header-styles;
+}
+
+// If it exists $headers-sizes is used to build $header-styles. See the documentation.
+@if variable-exists(header-sizes) {
+  $header-styles: build_from_header-sizes($header-sizes);
+}
+
 /// Text rendering method of headers.
 /// @type String
 $header-text-rendering: optimizeLegibility !default;
@@ -127,7 +147,7 @@ $anchor-color: $primary-color !default;
 /// @type Color
 $anchor-color-hover: scale-color($anchor-color, $lightness: -14%) !default;
 
-/// Default text deocration for links.
+/// Default text decoration for links.
 /// @type String
 $anchor-text-decoration: none !default;
 
@@ -203,6 +223,10 @@ $cite-font-size: rem-calc(13) !default;
 /// @type Color
 $cite-color: $dark-gray !default;
 
+/// Pseudo content for `<cite>` elements.
+/// @type String
+$cite-pseudo-content: '\2014 \0020' !default;
+
 /// Font family for `<kbd>` elements.
 /// @type String | List
 $keystroke-font: $font-family-monospace !default;
@@ -254,9 +278,10 @@ $abbr-underline: 1px dotted $black !default;
 
   // Paragraphs
   p {
+    margin-bottom: $paragraph-margin-bottom;
+
     font-size: inherit;
     line-height: $paragraph-lineheight;
-    margin-bottom: $paragraph-margin-bottom;
     text-rendering: $paragraph-text-rendering;
   }
 
@@ -281,41 +306,73 @@ $abbr-underline: 1px dotted $black !default;
   }
 
   // Headings
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
+  h1, .h1,
+  h2, .h2,
+  h3, .h3,
+  h4, .h4,
+  h5, .h5,
+  h6, .h6 {
     font-family: $header-font-family;
-    font-weight: $header-font-weight;
     font-style: $header-font-style;
+    font-weight: $header-font-weight;
     color: $header-color;
     text-rendering: $header-text-rendering;
-    margin-top: 0;
-    margin-bottom: $header-margin-bottom;
-    line-height: $header-lineheight;
 
     small {
-      color: $header-small-font-color;
       line-height: 0;
+      color: $header-small-font-color;
     }
   }
 
-  // Heading sizes
-  @each $size, $headers in $header-sizes {
+  // Heading styles
+  @each $size, $headers in $header-styles {
     @include breakpoint($size) {
-      @each $header, $font-size in $headers {
-        #{$header} { font-size: rem-calc($font-size); }
+      @each $header, $header-defs in $headers {
+        $font-size-temp: 1rem;
+        #{$header}, .#{$header} {
+
+          @if map-has-key($header-defs, font-size) {
+            $font-size-temp: rem-calc(map-get($header-defs, font-size));
+            font-size: $font-size-temp;
+          } @else if map-has-key($header-defs, fs) {
+            $font-size-temp: rem-calc(map-get($header-defs, fs));
+            font-size: $font-size-temp;
+          } @else if $size == $-zf-zero-breakpoint {
+            font-size: $font-size-temp;
+          }
+          @if map-has-key($header-defs, line-height) {
+            line-height: unitless-calc(map-get($header-defs, line-height), $font-size-temp);
+          } @else if map-has-key($header-defs, lh) {
+            line-height: unitless-calc(map-get($header-defs, lh), $font-size-temp);
+          } @else if $size == $-zf-zero-breakpoint {
+            line-height: unitless-calc($header-lineheight, $font-size-temp);
+          }
+
+          @if map-has-key($header-defs, margin-top) {
+            margin-top: rem-calc(map-get($header-defs, margin-top));
+          } @else if map-has-key($header-defs, mt) {
+            margin-top: rem-calc(map-get($header-defs, mt));
+          } @else if $size == $-zf-zero-breakpoint {
+            margin-top: 0;
+          }
+          @if map-has-key($header-defs, margin-bottom) {
+            margin-bottom: rem-calc(map-get($header-defs, margin-bottom));
+          } @else if map-has-key($header-defs, mb) {
+            margin-bottom: rem-calc(map-get($header-defs, mb));
+          } @else if $size == $-zf-zero-breakpoint {
+            margin-bottom: rem-calc($header-margin-bottom);
+          }
+        }
       }
     }
   }
 
   // Links
   a {
+    line-height: inherit;
     color: $anchor-color;
     text-decoration: $anchor-text-decoration;
-    line-height: inherit;
+
     cursor: pointer;
 
     &:hover,
@@ -333,21 +390,25 @@ $abbr-underline: 1px dotted $black !default;
 
   // Horizontal rule
   hr {
+    clear: both;
+
     max-width: $hr-width;
     height: 0;
+    margin: $hr-margin;
+
     border-top: 0;
+    border-right: 0;
     border-bottom: $hr-border;
-    margin: $hr-margin;
-    clear: both;
+    border-left: 0;
   }
 
   // Lists
   ul,
   ol,
   dl {
-    line-height: $list-lineheight;
     margin-bottom: $list-margin-bottom;
     list-style-position: $list-style-position;
+    line-height: $list-lineheight;
   }
 
   // List items
@@ -357,8 +418,8 @@ $abbr-underline: 1px dotted $black !default;
 
   // Unordered lists
   ul {
-    list-style-type: $list-style-type;
     margin-#{$global-left}: $list-side-margin;
+    list-style-type: $list-style-type;
   }
 
   // Ordered lists
@@ -371,7 +432,6 @@ $abbr-underline: 1px dotted $black !default;
     & & {
       margin-#{$global-left}: $list-nested-side-margin;
       margin-bottom: 0;
-      list-style-type: inherit;
     }
   }
 
@@ -404,33 +464,46 @@ $abbr-underline: 1px dotted $black !default;
     color: $cite-color;
 
     &:before {
-      content: '\2014 \0020';
+      content: $cite-pseudo-content;
     }
   }
 
   // Abbreviations
-  abbr {
-    color: $body-font-color;
-    cursor: help;
+  abbr, abbr[title] {
     border-bottom: $abbr-underline;
+    cursor: help;
+    text-decoration: none;
   }
 
+  // Figures
+  figure {
+    margin: 0;
+  }
+  
   // Code
   code {
+    padding: $code-padding;
+
+    border: $code-border;
+    background-color: $code-background;
+
     font-family: $code-font-family;
     font-weight: $code-font-weight;
     color: $code-color;
-    background-color: $code-background;
-    border: $code-border;
-    padding: $code-padding;
   }
 
   // Keystrokes
   kbd {
-    padding: $keystroke-padding;
     margin: 0;
+    padding: $keystroke-padding;
+
     background-color: $keystroke-background;
-    color: $keystroke-color;
+
     font-family: $keystroke-font;
+    color: $keystroke-color;
+
+    @if has-value($keystroke-radius) {
+      border-radius: $keystroke-radius;
+    }
   }
 }

data/generators/foundation/public/stylesheets/foundation6/typography/_helpers.scss

@@ -48,6 +48,7 @@ $stat-font-size: 2.5rem !default;
   .subheader {
     margin-top: $subheader-margin-top;
     margin-bottom: $subheader-margin-bottom;
+
     font-weight: $subheader-font-weight;
     line-height: $subheader-lineheight;
     color: $subheader-color;
@@ -69,9 +70,11 @@ $stat-font-size: 2.5rem !default;
     }
   }
 
-  // Use to remove the bullets from an unordered list
-  .no-bullet {
-    margin-#{$global-left}: 0;
-    list-style: none;
+  ul, ol {
+    // Use to remove numbers from ordered list & bullets from unordered list
+    &.no-bullet {
+      margin-#{$global-left}: 0;
+      list-style: none;
+    }
   }
 }

data/generators/foundation/public/stylesheets/foundation6/typography/_print.scss

@@ -2,20 +2,26 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-////
-/// @group typography
-////
+/// If `true`, all elements will have transparent backgrounds when printed, to save on ink.
+/// @type Boolean
+/// @group global
+$print-transparent-backgrounds: true !default;
+$print-hrefs: true !default;
 
-// scss-lint:disable all
+// sass-lint:disable-all
 
 @mixin foundation-print-styles {
   .show-for-print { display: none !important; }
 
   @media print {
     * {
-      background: transparent !important;
-      color: black !important; // Black prints faster: h5bp.com/s
+      @if $print-transparent-backgrounds {
+        background: transparent !important;
+      }
+
       box-shadow: none !important;
+
+      color: black !important; // Black prints faster: h5bp.com/s
       text-shadow: none !important;
     }
 
@@ -32,7 +38,9 @@
     // Display the URL of a link after the text
     a,
     a:visited { text-decoration: underline;}
-    a[href]:after { content: " (" attr(href) ")"; }
+    @if $print-hrefs {
+      a[href]:after { content: ' (' attr(href) ')'; }
+    }
 
     // Don't display the URL for images or JavaScript/internal links
     .ir a:after,
@@ -40,12 +48,12 @@
     a[href^='#']:after { content: ''; }
 
     // Display what an abbreviation stands for after the text
-    abbr[title]:after { content: " (" attr(title) ")"; }
+    abbr[title]:after { content: ' (' attr(title) ')'; }
 
     // Prevent page breaks in the middle of a blockquote or preformatted text block
     pre,
     blockquote {
-      border: 1px solid #999;
+      border: 1px solid $dark-gray;
       page-break-inside: avoid;
     }
 
@@ -69,5 +77,10 @@
     // Avoid page breaks after a heading
     h2,
     h3 { page-break-after: avoid; }
+
+    // Helper to re-allow page breaks in the middle of certain elements (e.g. pre, blockquote, tr)
+    .print-break-inside {
+      page-break-inside: auto;
+    }
   }
 }

data/generators/foundation/public/stylesheets/foundation6/typography/_typography.scss

@@ -6,8 +6,6 @@
 /// @group typography
 ////
 
-// scss-lint:disable DeclarationOrder
-
 // Base typography styles (tags only)
 @import 'base';
 

data/generators/foundation/public/stylesheets/foundation6/util/_breakpoint.scss

@@ -6,8 +6,6 @@
 /// @group breakpoints
 ////
 
-// scss-lint:disable ZeroUnit
-
 /// A list of named breakpoints. You can use these with the `breakpoint()` mixin to quickly create media queries.
 /// @type Map
 $breakpoints: (
@@ -18,13 +16,29 @@ $breakpoints: (
   xxlarge: 1440px,
 ) !default;
 
+/// The largest named breakpoint in which to include print as a media type
+/// @type Keyword
+$print-breakpoint: large !default;
+
+$-zf-zero-breakpoint: small !default;
+
+$-zf-breakpoints-keys: map-to-list($breakpoints, 'keys');
+
+@if nth(map-values($breakpoints), 1) != 0 {
+  @error 'Your smallest breakpoint (defined in $breakpoints) must be set to "0".';
+}
+@else {
+  $-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.
 /// @type List
 $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 - Breakpoint name, or px, rem, or em value to process.
-@function breakpoint($val: small) {
+///
+/// @param {Keyword|Number} $val [small] - Breakpoint name, or px, rem, or em value to process.
+@function breakpoint($val: $-zf-zero-breakpoint) {
   // Size or keyword
   $bp: nth($val, 1);
   // Value for max-width media queries
@@ -48,14 +62,7 @@ $breakpoint-classes: (small medium large) !default;
   @if type-of($bp) == 'string' {
     @if map-has-key($breakpoints, $bp) {
       @if $dir == 'only' or $dir == 'down' {
-        $next-bp: -zf-map-next($breakpoints, $bp);
-
-        @if $next-bp == null {
-          $bp-max: null;
-        }
-        @else {
-          $bp-max: $next-bp;
-        }
+        $bp-max: -zf-map-next($breakpoints, $bp);
       }
 
       $bp: map-get($breakpoints, $bp);
@@ -63,6 +70,7 @@ $breakpoint-classes: (small medium large) !default;
     }
     @else {
       $bp: 0;
+      @warn 'breakpoint(): "#{$val}" is not defined in your $breakpoints setting.';
     }
   }
 
@@ -72,39 +80,49 @@ $breakpoint-classes: (small medium large) !default;
     $bp-max: -zf-bp-to-em($bp-max) - (1/16);
   }
 
-  // Skip media query creation if the input is "0 up" or "0 down"
-  @if $bp > 0 or $dir == 'only' {
-    // "Only" ranges use the format "(min-width: n) and (max-width: n)"
+  // Conditions to skip media query creation
+  // - It's a named breakpoint that resolved to "0 down" or "0 up"
+  // - It's a numeric breakpoint that resolved to "0 " + anything
+  @if $bp > 0em or $dir == 'only' or $dir == 'down' {
+    // `only` ranges use the format `(min-width: n) and (max-width: n)`
     @if $dir == 'only' {
+      // Only named media queries can have an "only" range
       @if $named == true {
-        $str: $str + '(min-width: #{$bp})';
+        // Only use "min-width" if the floor is greater than 0
+        @if $bp > 0em {
+          $str: $str + '(min-width: #{$bp})';
 
+          // Only add "and" to the media query if there's a ceiling
+          @if $bp-max != null {
+            $str: $str + ' and ';
+          }
+        }
+
+        // Only use "max-width" if there's a ceiling
         @if $bp-max != null {
-          $str: $str + ' and (max-width: #{$bp-max})';
+          $str: $str + '(max-width: #{$bp-max})';
         }
       }
       @else {
-        @warn 'Only named media queries can have an "only" range.';
+        @warn 'breakpoint(): Only named media queries can have an `only` range.';
       }
     }
 
-    // "Down" ranges use the format "(max-width: n)"
+    // `down` ranges use the format `(max-width: n)`
     @else if $dir == 'down' {
-      $max: 0;
+      $max: if($named, $bp-max, $bp);
 
-      // For named breakpoints, subtract the breakpoint value by one "pixel", or 1/16em.
-      @if $named {
-        $max: $bp-max;
-      }
-      @else {
-        $max: $bp;
+      // Skip media query creation if input value is exactly "0 down",
+      // unless the function was called as "small down", in which case it's just "small only"
+      @if $named or $bp > 0em {
+        @if $max != null {
+          $str: $str + '(max-width: #{$max})';
+        }
       }
-
-      $str: $str + '(max-width: #{$max})';
     }
 
-    // "Up" ranges use the format "(min-width: n)"
-    @else if strip-unit($bp) > 0 {
+    // `up` ranges use the format `(min-width: n)`
+    @else if $bp > 0em {
       $str: $str + '(min-width: #{$bp})';
     }
   }
@@ -114,14 +132,25 @@ $breakpoint-classes: (small medium large) !default;
 
 /// Wraps a media query around the content you put inside the mixin. This mixin accepts a number of values:
 ///  - If a string is passed, the mixin will look for it in the `$breakpoints` map, and use a media query there.
-///  - If a pixel value is passed, it will be converted to an em value using `$rem-base`.
+///  - If a pixel value is passed, it will be converted to an em value using `$global-font-size` as the base.
 ///  - If a rem value is passed, the unit will be changed to em.
 ///  - If an em value is passed, the value will be used as-is.
-/// @content
+///
 /// @param {Keyword|Number} $value - Breakpoint name, or px, rem, or em value to process.
+///
 /// @output If the breakpoint is "0px and larger", outputs the content as-is. Otherwise, outputs the content wrapped in a media query.
 @mixin breakpoint($value) {
   $str: breakpoint($value);
+  $bp: index($-zf-breakpoints-keys, $value);
+  $pbp: index($-zf-breakpoints-keys, $print-breakpoint);
+
+  $old-zf-size: null;
+
+  // Make breakpoint size available as a variable
+  @if global-variable-exists(-zf-size) {
+    $old-zf-size: $-zf-size;
+  }
+  $-zf-size: nth($value, 1) !global; // get the first value to account for `only` and `down` keywords
 
   // If $str is still an empty string, no media query is needed
   @if $str == '' {
@@ -130,15 +159,32 @@ $breakpoint-classes: (small medium large) !default;
 
   // Otherwise, wrap the content in a media query
   @else {
-    @media screen and #{$str} {
-      @content;
+    // For named breakpoints less than or equal to $print-breakpoint, add print to the media types
+    @if $bp != null and $bp <= $pbp {
+      @media print, screen and #{$str} {
+        @content;
+       }
     }
+    @else {
+      @media screen and #{$str} {
+        @content;
+      }
+    }
+  }
+
+  @if $old-zf-size != null {
+    // Restore the old breakpoint size
+    $-zf-size: $old-zf-size !global;
+  } @else {
+    $-zf-size: null !global;
   }
 }
 
 /// Convers the breakpoints map to a URL-encoded string, like this: `key1=value1&key2=value2`. The value is then dropped into the CSS for a special `<meta>` tag, which is read by the Foundation JavaScript. This is how we transfer values from Sass to JavaScript, so they can be defined in one place.
 /// @access private
+///
 /// @param {Map} $map - Map to convert.
+///
 /// @returns {String} A string containing the map's contents.
 @function -zf-bp-serialize($map) {
   $str: '';
@@ -152,31 +198,151 @@ $breakpoint-classes: (small medium large) !default;
 
 /// Find the next key in a map.
 /// @access private
+///
 /// @param {Map} $map - Map to traverse.
 /// @param {Mixed} $key - Key to use as a starting point.
+///
 /// @returns {Mixed} The value for the key after `$key`, if `$key` was found. If `$key` was not found, or `$key` was the last value in the map, returns `null`.
 @function -zf-map-next($map, $key) {
-  // Store the values of the map as a list, so we can access them with nth
-  $values: map-values($map);
 
-  // Ghetto for loop
-  $i: 1;
+  // Store the keys of the map as a list
+  $values: map-keys($map);
+
+  $i: 0;
+
+  // If the Key Exists, Get the index of the key within the map and add 1 to it for the next breakpoint in the map
+  @if (map-has-key($map, $key)) {
+    $i: index($values, $key) + 1;
+  }
+
+  // If the key doesn't exist, or it's the last key in the map, return null
+  @if ($i > length($map) or $i == 0) {
+    @return null;
+  }
+  // Otherwise, return the value
+  @else {
+    @return map-get($map, nth($values, $i));
+  }
+
+}
+
+/// Return a list of our named breakpoints less than $key. Useful for dealing with
+/// responsive gutters for the grid.
+/// @access private
+///
+/// @param {String} $key - Key to use as last breakpoint.
+///
+/// @returns {Array} The list of breakpoints up to and. If $key is auto, returns breakpoints above the zero
+@function -zf-breakpoints-less-than($key) {
+  $list: ();
+  $found_key: false;
+
+  @each $name in $-zf-breakpoints-keys {
+    @if ($name == $key) {
+      $found_key: true;
+    }
+    @if not $found_key {
+      $list: append($list, $name);
+    }
+  }
+  @return $list;
+}
+
+/// Return a list of our named breakpoints less than $key. Useful for dealing with
+/// responsive gutters for the grid.
+/// @access private
+///
+/// @param {String} $breakpoing - a named or non-named breakpoing.
+///
+/// @returns {Array} The list of breakpoints up to and. If $key is auto, returns breakpoints above the zero
+@function -zf-closest-named-breakpoint($breakpoint) {
+  $last: $-zf-zero-breakpoint;
   $found: false;
-  @each $val in map-keys($map) {
-    @if $found == false {
-      @if ($key == $val) {
+
+  $value: unitless-calc($breakpoint, 1px);
+  @each $key, $val in $breakpoints {
+    @if not $found {
+      @if unitless-calc($val) > $value {
         $found: true;
+      } @else {
+        $last: $key;
       }
-      $i: $i + 1;
     }
   }
 
-  // If the key doesn't exist, or it's the last key in the map, return null
-  @if $i > length($map) {
-    @return null;
+  @return $last;
+}
+
+/// Get a value for a breakpoint from a responsive config map or single value.
+/// - If the config is a single value, return it regardless of `$value`.
+/// - If the config is a map and has the key `$value`, the exact breakpoint value is returned.
+/// - If the config is a map and does *not* have the breakpoint, the value matching the next lowest breakpoint in the config map is returned.
+/// @access private
+///
+/// @param {Number|Map} $map - Responsive config map or single value.
+/// @param {Keyword} $value - Breakpoint name to use.
+///
+/// @return {Mixed} The corresponding breakpoint value.
+@function -zf-get-bp-val($map, $value) {
+  // If the given map is a single value, return it
+  @if type-of($map) == 'number' {
+    @return $map;
   }
-  // Otherwise, return the value
+
+
+  // Check if the breakpoint name exists globally
+  @if not map-has-key($breakpoints, $value) {
+    @if type-of($value) == 'number' {
+      $value: -zf-closest-named-breakpoint($value);
+    } @else {
+      @return null;
+    }
+  }
+  // Check if the breakpoint name exists in the local config map
+  @else if map-has-key($map, $value) {
+    // If it does, just return the value
+    @return map-get($map, $value);
+  }
+  // Otherwise, find the next lowest breakpoint and return that value
   @else {
-    @return nth($values, $i);
+    $anchor: null;
+    $found: false;
+
+    @each $key, $val in $breakpoints {
+      @if not $found {
+        @if map-has-key($map, $key) {
+          $anchor: $key;
+        }
+        @if $key == $value {
+          $found: true;
+        }
+      }
+    }
+
+    @return map-get($map, $anchor);
   }
 }
+
+@if map-has-key($breakpoints, small) {
+  $small-up: screen;
+  $small-only: unquote('screen and #{breakpoint(small only)}');
+}
+
+@if map-has-key($breakpoints, medium) {
+  $medium-up: unquote('screen and #{breakpoint(medium)}');
+  $medium-only: unquote('screen and #{breakpoint(medium only)}');
+}
+
+@if map-has-key($breakpoints, large) {
+  $large-up: unquote('screen and #{breakpoint(large)}');
+  $large-only: unquote('screen and #{breakpoint(large only)}');
+}
+
+@if map-has-key($breakpoints, xlarge) {
+  $xlarge-up: unquote('screen and #{breakpoint(xlarge)}');
+  $xlarge-only: unquote('screen and #{breakpoint(xlarge only)}');
+}
+
+@if map-has-key($breakpoints, xxlarge) {
+  $xxlarge-up: unquote('screen and #{breakpoint(xxlarge)}');
+}