Breakpoint #

Unified Javascript and SCSS breakpoint manager.

Installation ##

npm install @curiousmedia/breakpoint

$3

The Dart Sass implementation is highly recommend and used for all examples unless specified otherwise.
``scss
@use '@curiousmedia/breakpoint/src/breakpoint' with (
$breakpoints: (
md: "@media (hover: hover)"
)
);

@include breakpoint.any('md') {
.button {
&:hover {
color: red;
}
}
}
`

$3


`scss
@import '@curiousmedia/breakpoint/src/breakpoint';

$breakpoints: (
md: "@media (hover: hover)"
);

@include breakpointAny('md') {
.button {
&:hover {
color: red;
}
}
}
`

Usage ##

$3

Breakpoint presets need to be configured by setting the "breakpoints" SCSS variable.
`scss
$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.

#### Single breakpoint ####
Create "md" breakpoint.
`scss
@include breakpoint.any(md) {
div {
font-size: 2em;
}
}
`

#### Multiple breakpoints using any ####
Create breakpoint where sm or lg conditions are met.
`scss
@include breakpoint.any(sm, lg) {
div {
font-size: 2em;
}
}
`

#### Multiple breakpoints using all ####
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.
`scss
@include breakpoint.all(landscape, sm) {
div {
font-size: 2em;
}
}
`

#### Custom Breakpoints ####
Custom breakpoints can be used along side presets.
`scss
@include breakpoint.all(sm, '@media (min-width: 400px)') {
div {
font-size: 2em;
}
}
`

#### Nested ####
Create nested breakpoints.

`scss
div {
@include breakpoint.any(hover) {
@include breakpoint.any(landscape, sm) {
font-size: 2em;
}

@include breakpoint.all(md, grid) {
font-size: 3em;
}
}
}
`

#### Short hand ####
Create single-property breakpoint.

`SCSS
div {
@include breakpoint.prop('font-size', (lg: 1em, md: 2em));
}
`

$3

Breakpoint presets are configured when class is instantiated.

#### Configuration ####
`javascript
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"
});
`

#### Single breakpoint ###
Query "md" breakpoint.
`javascript
bp.any('md'); //returns true or false
`

#### Multiple breakpoints using any ####
Query to evaluate if "sm" or "lg" conditions are met.
`javascript
bp.any('sm', 'lg'); //returns true or false
`

#### Multiple breakpoints using all ####
Query to evaluate if "landscape" and "sm" conditions are met.
`javascript
bp.all('landscape', 'md'); //returns true or false
`

#### Custom Breakpoints ####
Custom breakpoints can be used along side presets.
`js
bp.all('sm', '@media (min-width: 400px)'); //returns true or false
`

Notes ##

$3


This library is designed to handle common media queries. Complex queries with many conditions and not operators have not been tested.

$3

The @page, @media, and @supports rules are supported. Due to the nature of SCSS syntax, additional rules will have to be manually added.

$3

The @page rule will always return true` in the Javascript implementation; Javascript isn't computed on printed pages.