A brand new way to write highly accessible, responsive CSS. Fluid design and typography units built in, custom-size breakpoints and custom-aliased queries, no scripts, no builds, 100% vanilla CSS. Deliver your designs.
Docs+Demos at: https://propjockey.breakpoint-system.com
NPM: https://www.npmjs.com/package/@propjockey/breakpoint-system
GitHub: https://github.com/propjockey/breakpoint-system
Install:
$ npm install @propjockey/breakpoint-system
Then import the /node_modules/@propjockey/breakpoint-system/breakpoint-system.css file into your project.
OR
Use your favorite NPM CDN and include it on your page for small projects. Like so:
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@propjockey/breakpoint-system@1.0.0/breakpoint-system.css">The limiting factor for compatibility is the CSS round() function and CSS nesting selector.
| Browser / Platform | Minimum Version | Date Supported | Global Share |
|---|---|---|---|
| Chrome / Chrome for Android | 125 | May 2024 | ~64% |
| Safari / iOS Safari | 16.5 | May 2023 | ~16% |
| Firefox | 118 | Sept 2023 | ~2.5% |
| Edge | 125 | May 2024 | ~5.5% |
| Samsung Internet | 22 | Sept 2024 | ~2% |
| Opera | 111 | June 2024 | ~0.5% |
| Total Unflagged Support | ~91% |
@propjockey/breakpoint-system is the first vanilla CSS library of its kind, with much to offer.
https://propjockey.breakpoint-system.com
Our 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.
Ten years ago author Zell Liew wrote about several problems with responsive design. Every point has long since been fixed by browsers except, arguably, the most important one:
px breakpoints don't respect users who require larger base font sizes and "blows out" the expected boundaries of your design.
Browsers didn't "fix" this because it's a CSS authoring problem - yet px is so common, it's almost the only unit you'll ever see in a media query.
@propjockey/breakpoint-system fixes this for everyone, automatically.
Breakpoints 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. 👽🤌💚
Effectively, 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.
This is our default behavior, but it's optional.
Deliver 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 again.
Our API uses simple calc() switches, CSS Container Style Queries, or if(style()) conditionals - your choice!
@propjockey/breakpoint-system is built with the future in heart, (like some of our other products and ideas)!
Deliver your designs.
v1.0.0 - April 17th, 2026:
- Initial release
Please do reach out if you need help with any of this, have feature requests, or want to share what you've created!
| PropJockey | CodePen | DEV Blog | GitHub |
|---|---|---|---|
 |
 |
 |
 |
| Mastodon | X | Bluesky | |
|---|---|---|---|
 |
 |
 |
 |
My heart is open to receive abundance in all forms,
flowing to me in many expected and unexpected ways.
| PayPal | Ko-fi | Venmo |
|---|---|---|
 |
 |
 |
| BTC | XRP | ETH |
|---|---|---|
 |
 |
 |
| bc1qe...usgn9 | rw2ci...nWKQg : 459777128 |
0x674...beF54 |
