Menu icon Foundation
Would there be a way to incorporate a reverse responsiveness medium-down for sass scss

I keep coming up with this issue so I was wondering what could be down to alleviate the issue. so the whole mobile first concept says if I describe the smallest thing first unless I describe something larger then the smaller setting will carry forward up to larger screens.

Well, what about the reverse... What if I want to start at medium and then have that setting on down be the one that carry's forward. I keep finding myself saying small-only medium-only because I am not going to do small-up and then what large only? I guess that is one way to do it.

What does anyone else think about this concept of going from larger down? and also what would be code examples of doing.

scssSassFoundationcss

I keep coming up with this issue so I was wondering what could be down to alleviate the issue. so the whole mobile first concept says if I describe the smallest thing first unless I describe something larger then the smaller setting will carry forward up to larger screens.

Well, what about the reverse... What if I want to start at medium and then have that setting on down be the one that carry's forward. I keep finding myself saying small-only medium-only because I am not going to do small-up and then what large only? I guess that is one way to do it.

What does anyone else think about this concept of going from larger down? and also what would be code examples of doing.

Rafi Benkual over 4 years ago

You can create custom media query ranges if you'd like. The defaults are all mobile first so

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

You can go in the setting file and change the breakpoints to something like:

$large-down: "#{$screen} and (min-width:#{lower-bound($large-range)})";

Christian Matthias over 4 years ago

I want the breakpoints the same I just want the ability to have only down range utilized when needed.

so for example medium-r-10 would be for medium and below unless small is defined would be a grid of 10.

Am I making sense? I don't know if I am asking it the correct way.

Christian Matthias over 4 years ago

Hey thanks man... I added this to my style-guide

// custom media queries for down
$medium-down: "#{$screen} and (max-width:#{upper-bound($medium-range)})" !default;

works great.