4 breakpoints (mobile, tablet, laptop, desktop) - nathansmith/unsemantic GitHub Wiki

Variables for 4 breakpoints, including wider desktop monitors:

$media-mobile-max: 767px !default;
$media-tablet-min: 768px !default;
$media-tablet-max: 1024px !default;
$media-laptop-min: 1025px !default;
$media-laptop-max: 1200px !default;
$media-desktop-min: 1201px !default;

@import "unsemantic-vars";
@import "unsemantic-ie-snap";

@include unsemantic-grid-placeholders;
@include unsemantic-grid-base-tablet;

@media (max-width: $media-mobile-max) {
  @include unsemantic-grid-placeholders(mobile);
  @include unsemantic-grid-scoped(mobile);
}

@media (min-width: $media-tablet-min) and (max-width: $media-tablet-max) {
  @include unsemantic-grid-placeholders(tablet);
  @include unsemantic-grid-scoped(tablet);
}

@media (min-width: $media-laptop-min)  and (max-width: $media-laptop-max) {
  @include unsemantic-grid-placeholders(laptop);
  @include unsemantic-grid-scoped(laptop);
}

@media (min-width: $media-desktop-min) {
  @include unsemantic-grid-placeholders(desktop);
  @include unsemantic-grid-scoped(desktop);
}