/caesura

:straight_ruler: A reasonable breakpoint scale using @custom-media

Primary LanguageCSS

Caesura CSS Logo

npm version

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;
  }
}

Installation

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!

The scale

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!