Targeted Breakpoints

Logical media queries targeting browsers that meet the declared conditions

Documentation: Breakpoints

Also See: Media Queries

Logically Named Breakpoints

Small Mobiles
Designed to target mobile devices with viewport sizes smaller than an iPhone.
$small-mobile: "(max-width: 319px)";
iPhone (up to 4S)
Designed to target mobile devices with viewport sizes up to the iPhone 4/4S.
$iphone: "(min-device-width: 320px) and (max-device-width: 480px)";

iPhone (up to 5)
Designed to target mobile devies with viewport sizes up to the iPhones 5.
$iphone5: "(min-device-width: 320px) and (max-device-width: 568px)";
Mobile
Designed to target mobile devices with viewport sizes similar to the larger Androids.
$mobile: "(max-width: 480px)";

Not Mobile
Designed to target devices with viewport sizes greater than those within the "mobile" category.
$not-mobile: "(min-width: 481px)";
Small Tablet
Designed to target devices with viewport sizes smaller than an iPad.
$small-tablet: "(max-width: 767px)";

Tablet
Designed to target devices with viewport sizes similar to or greater than an iPad.
$tablet: "(min-width: 768px)";
iPad (including iPad Mini)
Designed to target devices with viewport sizes similar to an iPad.
$ipad: "(min-width: 768px) and (max-width:1024px)";

iPad (Retina only)
Designed to target devices with viewport sizes similar to an iPad, and with retina display.
$retina-ipad: "(min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2)";
Not Desktop
Designed to target devices with viewport sizes up to, but not greater than an iPad.
$not-desktop: "(max-width: 1024px)";

Desktop
Designed to target devices with viewport sizes greater than an iPad.
$desktop: "(min-width: 1025px)";
Retina
Designed to target devices of any size with retina display.
$retina: "(-webkit-min-device-pixel-ratio: 1.5)";


Example Usage (SCSS)

.custom_thing {
  font-size: 1em;
  color: green;
  @media #{$mobile} {
    font-size: 2em;
    color: blue;
  }
}

Result (CSS)

.custom_thing {
  font-size: 1em;
  color: green;
}
@media (max-width: 480px) {
  .custom_thing {
    font-size: 2em;
    color: blue;
  }
}


Media Queries

Media queries using these named breakpoints are what make Groundwork responsive — along with some help from Javascript when it's needed for additional functionality.

Read More