Unified Javascript and SCSS breakpoint manager.
npm install @curiousmedia/breakpoint
The Dart Sass implementation is highly recommend and used for all examples unless specified otherwise.
@use '@curiousmedia/breakpoint/src/breakpoint' with (
$breakpoints: (
md: "@media (hover: hover)"
)
);
@include breakpoint.any('md') {
.button {
&:hover {
color: red;
}
}
}
@import '@curiousmedia/breakpoint/src/breakpoint';
$breakpoints: (
md: "@media (hover: hover)"
);
@include breakpointAny('md') {
.button {
&:hover {
color: red;
}
}
}
Breakpoint presets need to be configured by setting the "breakpoints" SCSS variable.
$breakpoints: (
landscape: "@media (orientation: landscape)",
touch: "@media screen and (pointer: coarse)",
cursor: "@media screen and (pointer: fine)",
hover: "@media screen and (hover: hover)",
still: "@media screen and (prefers-reduced-motion)",
sm: "@media (max-width: 640px)",
md: "@media (min-width: 641px) and (max-width: 1024px)",
lg: "@media (min-width: 1025px)",
grid: "@supports (display: grid)",
page: "@page"
);
Presents can be referenced for quick, unified breakpoints across an entire project. Unfortunately, CSS and Javascript breakpoints must be defined separately.
Create "md" breakpoint.
@include breakpoint.any(md) {
div {
font-size: 2em;
}
}
Create breakpoint where sm
or lg
conditions are met.
@include breakpoint.any(sm, lg) {
div {
font-size: 2em;
}
}
Create breakpoint where landscape
and sm
conditions are met. If all queries use the same rule (e.g. @media
), then they will be merged into a single breakpoint. However, if multiple queries do not use the same rule, they will be nested.
@include breakpoint.all(landscape, sm) {
div {
font-size: 2em;
}
}
Custom breakpoints can be used along side presets.
@include breakpoint.all(sm, '@media (min-width: 400px)') {
div {
font-size: 2em;
}
}
Create nested breakpoints.
div {
@include breakpoint.any(hover) {
@include breakpoint.any(landscape, sm) {
font-size: 2em;
}
@include breakpoint.all(md, grid) {
font-size: 3em;
}
}
}
Create single-property breakpoint.
div {
@include breakpoint.prop('font-size', (lg: 1em, md: 2em));
}
Breakpoint presets are configured when class is instantiated.
let bp = new Breakpoint({
'landscape': '@media (orientation: landscape)',
'touch': '@media screen and (pointer: coarse)',
'cursor': '@media screen and (pointer: fine)',
'hover': '@media screen and (hover: hover)',
'still': '@media screen and (prefers-reduced-motion)',
'sm': '@media (max-width: 640px)',
'md': '@media (min-width: 641px) and (max-width: 1024px)',
'lg': '@media (min-width: 1025px)',
'grid': '@supports (display: grid)',
'page': "@page"
});
Query "md" breakpoint.
bp.any('md'); //returns true or false
Query to evaluate if "sm" or "lg" conditions are met.
bp.any('sm', 'lg'); //returns true or false
Query to evaluate if "landscape" and "sm" conditions are met.
bp.all('landscape', 'md'); //returns true or false
Custom breakpoints can be used along side presets.
bp.all('sm', '@media (min-width: 400px)'); //returns true or false
This library is designed to handle common media queries. Complex queries with many conditions and not
operators have not been tested.
The @page
, @media
, and @supports
rules are supported. Due to the nature of SCSS syntax, additional rules will have to be manually added.
The @page
rule will always return true
in the Javascript implementation; Javascript isn't computed on printed pages.