Skip to content

Instantly share code, notes, and snippets.

@erin-dot-io
Last active August 29, 2015 14:06
Show Gist options
  • Save erin-dot-io/09ded42d566a721c5aa0 to your computer and use it in GitHub Desktop.
Save erin-dot-io/09ded42d566a721c5aa0 to your computer and use it in GitHub Desktop.
Neat Breakpoints
// These are my base breakpoints when working on projects that
// utilize Bourbon (http://bourbon.io/) & Neat (http://neat.bourbon.io/)
$desktop-wide : new-breakpoint(min-width 1370px);
$desktop : new-breakpoint(min-width 1001px);
$desktop-narrow : new-breakpoint(max-width 1000px);
$desktop-narrow-only : new-breakpoint(min-width 769px max-width 1000px);
$tablet : new-breakpoint(max-width 768px);
$tablet-only : new-breakpoint(min-width 640px max-width 768px);
$phone-wide : new-breakpoint(max-width 669px);
$phone-wide-only : new-breakpoint(min-width 480px max-width 639px);
$phone : new-breakpoint(max-width 479px);
$not-phone : new-breakpoint(min-width 480px);
$phone-short : new-breakpoint(max-height 375px);
$netbook-11 : new-breakpoint(max-height 600px);
$netbook-13 : new-breakpoint(max-height 790px);
$ratio-small : new-breakpoint(min-width 1670px max-height 639px);
// How to use (Bourbon and Neat required!):
@include media($tablet) {
// New styles for tablet and below
}
@erin-dot-io
Copy link
Author

See screensiz.es for screen size references

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment