{"id":49567654,"url":"https://github.com/propjockey/breakpoint-system","last_synced_at":"2026-05-03T12:08:49.650Z","repository":{"id":353249058,"uuid":"1213990477","full_name":"propjockey/breakpoint-system","owner":"propjockey","description":"Highly accessible, responsive CSS designed in pixels and implemented 1:1 with the new Breakpoint Unit for a flawless fluid experience. Custom aliases, breakpoints, and queries with heavily researched defaults. No scripts, no builds, 100% vanilla CSS. Old tech, new ideas - 89% global user reach. Deliver your designs.","archived":false,"fork":false,"pushed_at":"2026-04-23T03:44:59.000Z","size":22,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-23T05:28:55.592Z","etag":null,"topics":["breakpoints","css","mediaqueries","responsive-design","responsive-layout","responsive-web-design"],"latest_commit_sha":null,"homepage":"https://propjockey.breakpoint-system.com/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/propjockey.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-18T01:43:54.000Z","updated_at":"2026-04-23T03:45:02.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/propjockey/breakpoint-system","commit_stats":null,"previous_names":["propjockey/breakpoint-system"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/propjockey/breakpoint-system","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/propjockey%2Fbreakpoint-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/propjockey%2Fbreakpoint-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/propjockey%2Fbreakpoint-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/propjockey%2Fbreakpoint-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/propjockey","download_url":"https://codeload.github.com/propjockey/breakpoint-system/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/propjockey%2Fbreakpoint-system/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32568093,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-03T06:36:36.687Z","status":"ssl_error","status_checked_at":"2026-05-03T06:36:09.306Z","response_time":103,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["breakpoints","css","mediaqueries","responsive-design","responsive-layout","responsive-web-design"],"created_at":"2026-05-03T12:08:48.908Z","updated_at":"2026-05-03T12:08:49.644Z","avatar_url":"https://github.com/propjockey.png","language":"CSS","funding_links":["https://www.paypal.com/donate/?cmd=_s-xclick\u0026hosted_button_id=9Z925L3SJJ8BS\u0026source=qr\u0026ssrt=1772865628068","https://ko-fi.com/janeori"],"categories":[],"sub_categories":[],"readme":"[![Jane Ori - PropJockey.io](https://img.shields.io/badge/Jane%20Ori%20%F0%9F%91%BD-%F0%9F%A4%8D%20PropJockey.io-7300E6.svg?labelColor=FB04C2\u0026style=plastic)](http://jane.propjockey.io/)\n\n# breakpoint-system from \u003cimg src=\"https://github.com/user-attachments/assets/87119fb5-c39d-429a-9bfd-424f0e100720\" alt=\"\" width=\"30px\"\u003e PropJockey\nHighly accessible, responsive CSS designed in pixels and implemented 1:1 with the new Breakpoint Unit for a flawless fluid experience. Custom aliases, breakpoints, and queries with heavily researched defaults. No scripts, no builds, 100% vanilla CSS. Old tech, new ideas - 89% global user reach. Deliver your designs.\n\nDocs+Demos at: https://propjockey.breakpoint-system.com\n\nNPM: https://www.npmjs.com/package/@propjockey/breakpoint-system\n\nGitHub: https://github.com/propjockey/breakpoint-system\n\nInstall:\n`$ npm install @propjockey/breakpoint-system`\nThen import the `/node_modules/@propjockey/breakpoint-system/breakpoint-system.css` file into your project.\n\nOR\n\nUse your favorite NPM CDN and include it on your page for small projects. Like so:\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://unpkg.com/@propjockey/breakpoint-system@1.1.1/breakpoint-system.css\"\u003e\n```\n\n## 🛸🌏💚 Browser Support (~89% global reach as of April, 2026)\n\nThe limiting factor for compatibility is the [CSS round() function](https://caniuse.com/mdn-css_types_round) and [CSS nesting selector](https://caniuse.com/mdn-css_selectors_nesting).\n\n| Browser / Platform | Minimum Version | Date Supported | Global Share |\n| :--- | :--- | :--- | :--- |\n| **Safari / iOS Safari** | 16.5 | May 2023 | ~17.5% |\n| **Firefox** | 128 | July 2024 | ~1.75% |\n| **Chrome / Chrome for Android** | 138 | Jun 2025 | ~63.5% |\n| **Edge** | 138 | Jun 2025 | ~5.5% |\n| **Opera** | 122 | Sep 2025 | ~0.5% |\n| **Total Unflagged Support** | | | **~89%** |\n\n---\n\n## ✨👽🎉 The Magic\n\n`@propjockey/breakpoint-system` is the first vanilla CSS library of its kind, with much to offer.\n\nhttps://propjockey.breakpoint-system.com\n\n### 🛠️ 100% Customizable Querying\n\nOur defaults are excellent, your needs are specific. You are not locked into our breakpoint sizes nor names. You can, optionally, define custom identifiers, aliases, and corresponding breakpoint locations.\n\n### 🔎 Automatic Accessibility Scaling\n\nTen years ago author Zell Liew wrote about [several problems with responsive design](https://zellwk.com/blog/media-query-units/). Every point has long since been fixed by browsers except, arguably, the most important one:\n\n`px` breakpoints don't respect users who require larger base font sizes and \"blows out\" the expected boundaries of your design.\n\nBrowsers didn't \"fix\" this because it's a CSS authoring problem - yet `px` is so common, it's [almost](https://propjockey.github.io/css-media-vars/) the only unit you'll ever see in a media query.\n\n`@propjockey/breakpoint-system` fixes this for *everyone*, automatically.\n\nBreakpoints are specified as numeric pixel values for *ease of DX* and automatically integrated into the engine relative to the root `em` determined by the user's system settings for *ease of UX*. 👽🤌💚\n\nEffectively, your mobile-friendly design now shows up instead of your tablet-friendly design to accomodate their larger font size preference, proportionately to the difference. It doesn't blow out your design, it just appears as if they zoomed into your mobile design in their tablet viewport without overflowing their screen.\n\n*This is our default behavior, but it's optional.*\n\n---\n\n### 🌊 Fluid Design and Typography Built-In!\n\nDeliver your designs. Perfect app-ready design and text scaling using our breakpoint units, `var(--bpu-16px)`, without ever trampling nor abusing your `rem` unit, [writing `clamp()`, or reiterating breakpoint boundaries](https://www.npmjs.com/package/fluid-text-plugin) again.\n\n---\n\n### 🛡️ Bulletproof and Future-Ready\n\nOur API uses simple calc() switches, space toggles, CSS Container Style Queries, or `if(style())` conditionals - your choice!\n\n`@propjockey/breakpoint-system` is built with the future in heart, (like [some of our](https://augmented-ui.com/) [other products](https://propjockey.github.io/css-bin-bits/) [and ideas](https://dev.to/janeori/100-css-fetch-and-exfiltrate-512-bits-of-server-generated-data-embedded-in-an-animated-svg-5aad))!\n\n---\n\nDeliver your designs.\n\n\n## CHANGELOG:\n\nv1.1.1 - April 23rd, 2026:\n* Added over 2700 query tests to the website (stress test too) https://propjockey.breakpoint-system.com/tests.html\n* Fixed browser support for FF 128 and Safari 16.5 - 18.7 thanks to a generous month of BrowserStack from [@terzic](https://github.com/terzic)\n* Corrected Chrome support, CSS abs() is its limiting factor (- 0.81% reach from initial mistake)\n* Updated the library's root @supports statements to perfectly align with actual support\n\nv1.1.0 - April 22nd, 2026:\n* Made class names prefix--extensible by authors.\n* Added query \"in\" space toggle opt-in expansion.\n* Fixes for a currently-undocumented feature set.\n\nv1.0.0 - April 17th, 2026:\n* Initial release\n\n\n---\n\n## Open Contact 👽\n\nPlease do reach out if you need help with any of this, have feature requests, or want to share what you've created!\n\n| \u003csmall\u003ePropJockey\u003c/small\u003e | \u003csmall\u003eCodePen\u003c/small\u003e | \u003csmall\u003eDEV Blog\u003c/small\u003e | \u003csmall\u003eGitHub\u003c/small\u003e |\n| :---: | :---: | :---: | :---: |\n| [![PropJockey.io](https://raw.githubusercontent.com/propjockey/propjockey-brand/main/external-social/100px/color-responsive/propjockey-lines.svg)](https://propjockey.io) | [![CodePen](https://raw.githubusercontent.com/propjockey/propjockey-brand/main/external-social/100px/color-responsive/codepen.svg)](https://codepen.io/propjockey) | [![DEV Blog](https://raw.githubusercontent.com/propjockey/propjockey-brand/main/external-social/100px/color-responsive/dev.svg)](https://dev.to/janeori) | [![GitHub](https://raw.githubusercontent.com/propjockey/propjockey-brand/main/external-social/100px/color-responsive/github.svg)](https://github.com/propjockey) |\n\n| \u003csmall\u003eMastodon\u003c/small\u003e | \u003csmall\u003eLinkedIn\u003c/small\u003e | \u003csmall\u003eX\u003c/small\u003e | \u003csmall\u003eBluesky\u003c/small\u003e |\n| :---: | :---: | :---: | :---: |\n| [![Mastodon](https://raw.githubusercontent.com/propjockey/propjockey-brand/main/external-social/100px/color-responsive/mastodon.svg)](https://front-end.social/@JaneOri) | [![LinkedIn](https://raw.githubusercontent.com/propjockey/propjockey-brand/main/external-social/100px/color-responsive/linkedin.svg)](https://www.linkedin.com/in/janeori/) | [![X](https://raw.githubusercontent.com/propjockey/propjockey-brand/main/external-social/100px/color-responsive/x.svg)](https://x.com/jane0ri) | [![Bluesky](https://raw.githubusercontent.com/propjockey/propjockey-brand/main/external-social/100px/color-responsive/bluesky.svg)](https://bsky.app/profile/janeori.propjockey.io) |\n\n### My heart is open to receive abundance in all forms,\u003cbr\u003eflowing to me in many expected and unexpected ways.\n\n| PayPal | Ko-fi | Venmo |\n| :---: | :---: | :---: |\n| [![PayPal](https://raw.githubusercontent.com/propjockey/propjockey-brand/main/QR-Codes/svg/200px/paypal.svg)](https://www.paypal.com/donate/?cmd=_s-xclick\u0026hosted_button_id=9Z925L3SJJ8BS\u0026source=qr\u0026ssrt=1772865628068) | [![Ko-fi](https://raw.githubusercontent.com/propjockey/propjockey-brand/main/QR-Codes/svg/200px/ko-fi.svg)](https://ko-fi.com/janeori) | [![Venmo](https://raw.githubusercontent.com/propjockey/propjockey-brand/main/QR-Codes/svg/200px/venmo.svg)](https://account.venmo.com/u/JaneOri) |\n\n| BTC | XRP | ETH |\n| :---: | :---: | :---: |\n| [![BTC bc1qe2ss8hvmskcxpmk046msrjpmy9qults2yusgn9](https://raw.githubusercontent.com/propjockey/propjockey-brand/main/QR-Codes/svg/200px/btc.svg)](https://app.ens.domains/janeori.eth) | [![XRP rw2ciyaNshpHe7bCHo4bRWq6pqqynnWKQg : 459777128](https://raw.githubusercontent.com/propjockey/propjockey-brand/main/QR-Codes/svg/200px/xrp.svg)](https://bithomp.com/en/account/X7zmKiqEhMznSXgj9cirEnD5sWo3iZPqbNPChdEKV9sM9WF) | [![ETH 0x674D4191dEBf9793e743D21a4B8c4cf1cC3beF54](https://raw.githubusercontent.com/propjockey/propjockey-brand/main/QR-Codes/svg/200px/eth.svg)](https://app.ens.domains/janeori.eth) |\n| bc1qe...usgn9 | rw2ci...nWKQg\u003cbr\u003e: 459777128 | 0x674...beF54 |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpropjockey%2Fbreakpoint-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpropjockey%2Fbreakpoint-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpropjockey%2Fbreakpoint-system/lists"}