Skip to content

dbox/caesura

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 

Repository files navigation

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!

Releases

No releases published

Packages

No packages published

Languages