Caesura is a reasonable breakpoint scale using @custom-media.
Note: This project is in early development, and versioning is a little different. Read this for more details.
.foo {
border: 1px solid green;
@media (--xl) {
border: 3px solid red;
}
}
Install with npm:
npm install caesura
Make sure you have postcss-import and @custom-media (or cssnext) installed, then import caesura at the top of your css:
@import 'caesura';
<!-- Your css code here -->
That's it!
Breakpoint: 320px 448px 768px 1024px 1280px 1800px
──────┬───────────┬─────────────┬─────────────┬─────────────┬──────────────────┬─────
Name: '--xs' '--s' '--m' '--l' '--xl' '--hd'
@custom-media --xs (width < 320px);
@custom-media --s (width < 448px);
@custom-media --m (width < 768px);
@custom-media --l (width < 1024px);
@custom-media --xl (width < 1280px);
@custom-media --hd (width < 1800px);
@custom-media --above-xs (width >= 320px);
@custom-media --above-s (width >= 448px);
@custom-media --above-m (width >= 768px);
@custom-media --above-l (width >= 1024px);
@custom-media --above-xl (width >= 1280px);
@custom-media --above-hd (width >= 1800px);
@custom-media --retina (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi);
@custom-media --landscape (orientation: landscape);
@custom-media --portrait (orientation: portrait);
I've yet to find a great use-case for needing below
or at
rules for media queries. I'm happy to add/revise if there are other examples people need. Furthermore, content should dictate breaking points, but sometimes it's just nice to have your trusty standby stops.
Feel free to point out any issues, or open a PR!