Add a 4th CSS media query breakpoint.

I know this would require a lot of work to implement, but the large breakpoint covers a far too wide range. It is not sufficient to choose a fraction of twelve that fits both the large and extra large, especially when the content is split vertically, for example with a sidebar or with sub columns within another column. Please refer to these two examples. The first one shows a column system just above the medium to large breakpoint. image The side column, has the class l4 and the map has l8, which covers both the large and extra large screens. The checkbox labels has been modified to have ellipsis when they overflow. It would be nice to have an extra large breakpoint to allow for more dynamic responsive pages.

This image shows the same page in a window with a width of 1080p.

If I change the breakpoint fractions to l5 and l7, the sidebar gets way too big on small large screens:

large

extra-large

On the medium breakpoint, I break the checkboxes into a single column, but without another breakpoint, I can’t really do that for the smaller of the large screens.

I don’t know if my scenario is just weird, or there really is something to this. Please let me hear your thoughts on this.

[xiki808]

Hey I have managed to add two more breakpoints, extra small and extra large. Place the following in your main.scss …

$extra-small-screen-up: 481px !default;
$small-screen-up: 769px !default;
$medium-screen-up: 1025px !default;
$large-screen-up: 1441px !default;
$extra-large-screen-up: 2561px !default;
$extra-small-screen: 480px !default;
$small-screen: 768px !default;
$medium-screen: 1024px !default;
$large-screen: 1440px !default;
$extra-large-screen: 2560px !default;

$small-and-up: "only screen and (min-width : #{$extra-small-screen-up})" !default;
$medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default;
$large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default;
$extra-large-and-up: "only screen and (min-width : #{$large-screen-up})" !default;
$extra-small-and-down: "only screen and (max-width : #{$extra-small-screen})" !default;
$small-and-down: "only screen and (max-width : #{$small-screen})" !default;
$medium-and-down: "only screen and (max-width : #{$medium-screen})" !default;
$large-and-down: "only screen and (max-width : #{$large-screen})" !default;
$small-only: "only screen and (min-width : #{$extra-small-screen-up}) and (max-width : #{$small-screen})" !default;
$medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default;
$large-only: "only screen and (min-width : #{$medium-screen-up}) and (max-width : #{$large-screen})" !default;
$extra-large-only: "only screen and (min-width : #{$large-screen-up}) and (max-width : #{$extra-large-screen})" !default;

$num-cols: 12 !default;

.hide-on-extra-small-only, .hide-on-extra-small-and-down {
  @media #{$extra-small-and-down} {
    display: none !important;
  }
}
.hide-on-small-only, .hide-on-small-and-down {
  @media #{$small-and-down} {
    display: none !important;
  }
}
.hide-on-med-and-down {
  @media #{$medium-and-down} {
    display: none !important;
  }
}
.hide-on-med-and-up {
  @media #{$medium-and-up} {
    display: none !important;
  }
}
.hide-on-med-only {
  @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
    display: none !important;
  }
}
.hide-on-large-and-down {
  @media #{$large-and-down} {
    display: none !important;
  }
}
.hide-on-large-and-up {
  @media #{$large-and-up} {
    display: none !important;
  }
}
.hide-on-large-only {
  @media only screen and (min-width: $medium-screen) and (max-width: $large-screen) {
    display: none !important;
  }
}
.hide-on-extra-large-only {
  @media #{$extra-large-and-up} {
    display: none !important;
  }
}
.show-on-extra-large {
  @media #{$extra-large-and-up} {
    display: initial !important;
  }
}
.show-on-large {
  @media only screen and (min-width: $medium-screen) and (max-width: $large-screen) {
    display: initial !important;
  }
}
.show-on-medium {
  @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
    display: initial !important;
  }
}
.show-on-small {
  @media #{$small-and-down} {
    display: initial !important;
  }
}
.show-on-medium-and-up {
  @media #{$medium-and-up} {
    display: initial !important;
  }
}
.show-on-medium-and-down {
  @media #{$medium-and-down} {
    display: initial !important;
  }
}
.show-on-large-and-up {
  @media #{$large-and-up} {
    display: initial !important;
  }
}
.show-on-large-and-down {
  @media #{$large-and-down} {
    display: initial !important;
  }
}

.row {

  .col {

    $i: 1;
    @while $i <= $num-cols {
      $perc: unquote((100 / ($num-cols / $i)) + "%");
      &.xs#{$i} {
        width: $perc !important;
        margin-left: 0 !important;
      }
      $i: $i + 1;
    }
    $i: 1;
    @while $i <= $num-cols {
      $perc: unquote((100 / ($num-cols / $i)) + "%");
      &.offset-xs#{$i} {
        margin-left: $perc !important;
      }
      $i: $i + 1;
    }

    @media #{$small-and-up} {

      $i: 1;
      @while $i <= $num-cols {
        $perc: unquote((100 / ($num-cols / $i)) + "%");
        &.s#{$i} {
          width: $perc !important;
          margin-left: 0 !important;
        }
        $i: $i + 1;
      }
      $i: 1;
      @while $i <= $num-cols {
        $perc: unquote((100 / ($num-cols / $i)) + "%");
        &.offset-s#{$i} {
          margin-left: $perc !important;
        }
        $i: $i + 1;
      }

    }

    @media #{$medium-and-up} {

      $i: 1;
      @while $i <= $num-cols {
        $perc: unquote((100 / ($num-cols / $i)) + "%");
        &.m#{$i} {
          width: $perc !important;
          margin-left: 0 !important;
        }
        $i: $i + 1;
      }
      $i: 1;
      @while $i <= $num-cols {
        $perc: unquote((100 / ($num-cols / $i)) + "%");
        &.offset-m#{$i} {
          margin-left: $perc !important;
        }
        $i: $i + 1;
      }

    }

    @media #{$large-and-up} {

      $i: 1;
      @while $i <= $num-cols {
        $perc: unquote((100 / ($num-cols / $i)) + "%");
        &.l#{$i} {
          width: $perc !important;
          margin-left: 0 !important;
        }
        $i: $i + 1;
      }
      $i: 1;
      @while $i <= $num-cols {
        $perc: unquote((100 / ($num-cols / $i)) + "%");
        &.offset-l#{$i} {
          margin-left: $perc !important;
        }
        $i: $i + 1;
      }

    }

    @media #{$extra-large-and-up} {

      $i: 1;
      @while $i <= $num-cols {
        $perc: unquote((100 / ($num-cols / $i)) + "%");
        &.xl#{$i} {
          width: $perc !important;
          margin-left: 0 !important;
        }
        $i: $i + 1;
      }
      $i: 1;
      @while $i <= $num-cols {
        $perc: unquote((100 / ($num-cols / $i)) + "%");
        &.offset-xl#{$i} {
          margin-left: $perc !important;
        }
        $i: $i + 1;
      }

    }
  }
}

[acburst]

Added in 104da64