Breakpoints
Four fixed breakpoints — sm 600px, md 900px, lg 1200px, xl 1800px — in the $breakpoints map. The keys name the grid / visibility classes (.md-6, .order-sm-3, .hide-lg); the values feed the media-query mixins.
The map is fixed — not a consumer override surface. For other widths, the mixins also take a raw px value (@include above(950px)), and container queries cover component-level responsiveness. Per-breakpoint container / gutter / root-type tuning is now custom properties — --jf-container-max, --jf-container-gutter, --jf-grid-gutter, --jf-root-font-size — set at :root or a scope:
@include above(md) {
:root { --jf-root-font-size: 1.0625rem; }
}
The JS breakPoints object (src/js/breakpoints.js) mirrors the same values for scripts.
Media-query mixins
Each takes a breakpoint name or a raw px value; both compile to an em-based @media query. Prefer above() (mobile-first) over below().
| Mixin | Applies |
|---|---|
| above($min) | At and above $min. |
| below($max) | Below $max. |
| between($min, $max) | Between the two, inclusive of $min. |
.hero {
padding-block: get-space(lg);
@include above(md) { padding-block: get-space(xl); }
@include between(600px, lg) { text-align: center; }
}