Skip to content

Instantly share code, notes, and snippets.

@dbox
Last active January 24, 2017 04:22
Show Gist options
  • Save dbox/f8bcb317d9d0d155c9ca33ef4a044a2d to your computer and use it in GitHub Desktop.
Save dbox/f8bcb317d9d0d155c9ca33ef4a044a2d to your computer and use it in GitHub Desktop.
breakpoints.css (cssnext)
/* breakpoints */
:root { /* px size at 16px base font size */
@custom-media --xs (width < 20em); /* 320px */
@custom-media --s (width < 28em); /* 448px */
@custom-media --m (width < 48em); /* 768px */
@custom-media --l (width < 64em); /* 1024px */
@custom-media --xl (width < 80em); /* 1280px */
@custom-media --hd (width < 112.5em); /* 1800px */
@custom-media --above-xs (width >= 20em);
@custom-media --above-s (width >= 28em);
@custom-media --above-m (width >= 48em);
@custom-media --above-l (width >= 64em);
@custom-media --above-xl (width >= 80em);
@custom-media --above-hd (width >= 112.5em);
@custom-media --retina (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi);
@custom-media --landscape (orientation: landscape);
@custom-media --portrait (orientation: portrait);
}
/* call it */
.foo {
border: 1px solid green;
@media (--above-s) {
border: 3px solid red
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment