Using Foundation media queries outside Foundation

2-minute read

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;
            }
        }
    }
}