Using Foundation media queries outside Foundation

I like relying on the job of people smarter than I am and deeply appreciate the work ZURB made with Foundation.
In the current project I will not be able to use the full power of the framework but will piggy back on their choice of screen break points nonetheless.
I’ve put together an scss file to be able to use Foundation break points in the current project

/**
 * file '_foundation_media_queries.scss'
 */

// Media queries from Foundation framework by ZURB
// http://foundation.zurb.com/
// and on GitHub at https://github.com/zurb/foundation

// functions
// originally in https://github.com/zurb/foundation/blob/master/scss/foundation/_functions.scss
@function lower-bound($range){
  @if length($range) <= 0 {
    @return 0;
  }
  @return nth($range,1);
}

@function upper-bound($range) {
  @if length($range) < 2 {
    @return 999999999999;
  }
  @return nth($range, 2);
}

// Here we define the lower and upper bounds for each media size
$small-range: (0em, 40em); /* 0, 640px */
$medium-range: (40.063em, 64em); /* 641px, 1024px */
$large-range: (64.063em, 90em); /* 1025px, 1440px */
$xlarge-range: (90.063em, 120em); /* 1441px, 1920px */
$xxlarge-range: (120.063em); /* 1921px */

// Media Queries
$screen: "only screen" !default;

$landscape: "#{$screen} and (orientation: landscape)" !default;
$portrait: "#{$screen} and (orientation: portrait)" !default;

$small-up: $screen !default;
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})" !default;

$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})" !default;
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})" !default;

$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})" !default;
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})" !default;

$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})" !default;
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})" !default;

$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})" !default;
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})" !default;

and using them, in SASS of course, makes many things easier. The file is self-contained and with no external dependencies and can really speed up responsive and mobile-first CSS development.

/**
 * file 'menu.scss'
 */

// import Foundation media queries
@import 'foundation_media_queries';

// use the media queries in the code
nav ul.menu {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    li.menu-item{
        height: 2em;
        flex-grow: 1;
        text-align: center;

        // 4 per row large+
        min-width: 25%;

        // 1 per row on small
        @media #{$small-only} {
            min-width: 100%;
        }

        // 2 per row on medium
        @media #{$medium-only} {
            min-width: 50%;
        }

        ul.sub-menu{
            li.menu-item{
                position: absolute;
                left: -999999px;
            }
        }
    }
}

4 thoughts on “Using Foundation media queries outside Foundation

  1. Thanks! I was just investigating foundation today, and wanted exactly what you presented here.

  2. Zurb currently says they have only one breakpoint now:

    http://foundation.zurb.com/docs/v/3.2.5/media-queries.php

    Did they change they way their media queries work since you wrote this? I’m trying to figure out how to best do responsive now that there are at least 6 different screen sizes for mobile phones alone. Someone told me to just break it once at 768px like Zurb, but I don’t really get it. I thought your page would help, but it seems to be different from what Zurb is showing on the page I linked above.

  3. Thanks for this! I was trying to find the function for lower-bound and upper-bound! Informative post, thanks 🙂

I appreciate your input