{"id":15285907,"url":"https://github.com/dbox/caesura","last_synced_at":"2025-10-26T14:34:55.190Z","repository":{"id":57192657,"uuid":"80030847","full_name":"dbox/caesura","owner":"dbox","description":":straight_ruler: A reasonable breakpoint scale using @custom-media","archived":false,"fork":false,"pushed_at":"2017-02-01T17:28:57.000Z","size":21,"stargazers_count":14,"open_issues_count":1,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-07-17T11:20:23.752Z","etag":null,"topics":["css","cssnext","custom-media","mediaqueries","mediaquery","postcss"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dbox.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-25T16:07:46.000Z","updated_at":"2019-10-05T03:13:58.000Z","dependencies_parsed_at":"2022-09-01T06:00:37.346Z","dependency_job_id":null,"html_url":"https://github.com/dbox/caesura","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dbox/caesura","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dbox%2Fcaesura","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dbox%2Fcaesura/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dbox%2Fcaesura/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dbox%2Fcaesura/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dbox","download_url":"https://codeload.github.com/dbox/caesura/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dbox%2Fcaesura/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266990885,"owners_count":24017730,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-25T02:00:09.625Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","cssnext","custom-media","mediaqueries","mediaquery","postcss"],"created_at":"2024-09-30T15:08:22.157Z","updated_at":"2025-10-26T14:34:50.142Z","avatar_url":"https://github.com/dbox.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Caesura \u003cimg src=\"https://rawgit.com/jonathantneal/media-expressions-spec/gh-pages/css-logo.svg\" alt=\"CSS Logo\" width=\"90\" height=\"90\" align=\"right\"\u003e\n\n[![npm version](https://badge.fury.io/js/caesura.svg)](https://badge.fury.io/js/caesura)\n\nCaesura is a reasonable breakpoint scale using [@custom-media](https://github.com/postcss/postcss-custom-media).\n\u003e **Note:** This project is in early development, and versioning is a little different. [Read this](http://markup.im/#q4_cRZ1Q) for more details.\n\n```css\n.foo {\n  border: 1px solid green;\n\n  @media (--xl) {\n    border: 3px solid red;\n  }\n}\n```\n\n### Installation\n\nInstall with npm:\n`npm install caesura`\n\nMake sure you have [postcss-import](https://github.com/postcss/postcss-import) and [@custom-media](https://github.com/postcss/postcss-custom-media) (or cssnext) installed, then import caesura at the top of your css:\n\n```\n@import 'caesura';\n\n\u003c!-- Your css code here --\u003e\n```\nThat's it!\n\n### The scale\n\n```\nBreakpoint:     320px       448px         768px         1024px       1280px             1800px\n            ──────┬───────────┬─────────────┬─────────────┬─────────────┬──────────────────┬─────\n      Name:    '--xs'       '--s'         '--m'         '--l'        '--xl'              '--hd'\n```\n\n```css\n@custom-media --xs (width \u003c 320px);\n@custom-media --s (width \u003c 448px);\n@custom-media --m (width \u003c 768px);\n@custom-media --l (width \u003c 1024px);\n@custom-media --xl (width \u003c 1280px);\n@custom-media --hd (width \u003c 1800px);\n\n@custom-media --above-xs (width \u003e= 320px);\n@custom-media --above-s (width \u003e= 448px);\n@custom-media --above-m (width \u003e= 768px);\n@custom-media --above-l (width \u003e= 1024px);\n@custom-media --above-xl (width \u003e= 1280px);\n@custom-media --above-hd (width \u003e= 1800px);\n\n@custom-media --retina (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi);\n@custom-media --landscape (orientation: landscape);\n@custom-media --portrait (orientation: portrait);\n```\n\nI'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](https://github.com/jescalan/gps#breakpoints), but sometimes it's just nice to have your trusty standby stops.\n\nFeel free to point out any issues, or open a PR!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdbox%2Fcaesura","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdbox%2Fcaesura","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdbox%2Fcaesura/lists"}