@propjockey/breakpoint-system

v1.1.1

Published

22 days ago

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

0High
0Medium
0Low

janeori

css breakpoint media queries named breakpoints breakpoint units

breakpoint-system from PropJockey

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.

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/[email protected]/breakpoint-system.css">

🛸🌏💚 Browser Support (~91% global reach as of April, 2026)

The limiting factor for compatibility is the CSS round() function and CSS nesting selector.

| Browser / Platform | Minimum Version | Date Supported | Global Share | | :--- | :--- | :--- | :--- | | Safari / iOS Safari | 16.5 | May 2023 | ~17.5% | | Firefox | 128 | July 2024 | ~1.75% | | Chrome / Chrome for Android | 138 | Jun 2025 | ~63.5% | | Edge | 125 | May 2024 | ~5.5% | | Opera | 111 | June 2024 | ~0.5% | | Total Unflagged Support | | | ~89% |

✨👽🎉 The Magic

@propjockey/breakpoint-system is the first vanilla CSS library of its kind, with much to offer.

https://propjockey.breakpoint-system.com

🛠️ 100% Customizable Querying

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.

🔎 Automatic Accessibility Scaling

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.

🌊 Fluid Design and Typography Built-In!

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.

🛡️ Bulletproof and Future-Ready

Our API uses simple calc() switches, space toggles, 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.

CHANGELOG:

v1.1.1 - April 23rd, 2026:

Added over 2700 query tests to the website (stress test too) https://propjockey.breakpoint-system.com/tests.html
Fixed browser support for FF 128 and Safari 16.5 - 18.7 thanks to a generous month of BrowserStack from @terzic
Corrected Chrome support, CSS abs() is its limiting factor (- 0.81% reach from initial mistake)
Updated the library's root @supports statements to perfectly align with actual support

v1.1.0 - April 22nd, 2026: