src-mq

🤓 Lucid breakpoints for JavaScript.

Example

import { from, until } from 'src-mq'

const styles = {
    [from.small]: { ... },

    [until.large]: { ... },

    [from.small.until.large]: { ... },

    [from.small.until.large.for.screen]: { ... },
}

Tagged templates

To use src-mq in a tagged template, you will need to explicitly call it as a function.

For example, this is how you would use it with Emotion's css:

import { from, until } from 'src-mq'
import css from 'emotion'

const className = css`
    ${from.small()} { ... },

    ${until.large()} { ... },

    ${from.small.until.large()} { ... },

    ${from.small.until.large.for.screen()} { ... },
`

API

from<breakpoint>

Type: function

Returns a media query scoped to:

• a minimum width of breakpoint

/* {[from.small]: { ... }} */

@media all and (min-width: 30em) and (max-width: none) { ... }

from<breakpoint>.for[screen, print, speech]

Type: function

Returns a media query scoped to:

• a minimum width of breakpoint
• the specified media type

/* {[from.small.for.screen]: { ... }} */

@media screen and (min-width: 30em) and (max-width: none) { ... }

until<breakpoint>

Type: function

Returns a media query scoped to:

• a maximum width of breakpoint − 1px

/* {[until.large]: { ... }} */

@media all and (min-width: none) and (max-width: 61.1875em) { ... }

until<breakpoint>.for[screen, print, speech]

Type: function

Returns a media query scoped to:

• a maximum width of breakpoint − 1px
• the specified media type

/* {[until.large.for.screen]: { ... }} */

@media screen and (min-width: none) and (max-width: 61.1875em) { ... }

from<fromBreakpoint>.until<untilBreakpoint>

Type: function

Returns a media query scoped to:

• a minimum width of fromBreakpoint
• a maximum width of untilBreakpoint − 1px

/* {[from.small.until.large]: { ... }} */

@media all and (min-width: 30em) and (max-width: 61.1875em) { ... }

from<fromBreakpoint>.until<untilBreakpoint>.for[screen, print, speech]

Type: function

Returns a media query scoped to:

• a minimum width of fromBreakpoint
• a maximum width of untilBreakpoint − 1px
• the specified media type

/* {[from.small.until.large.for.screen]: { ... }} */

@media screen and (min-width: 30em) and (max-width: 61.1875em) { ... }

Defaults

src-mq provides a reasonable set of defaults:

Media type

all

Breakpoints

• xxSmall (320 pixels)
• xSmall (375 pixels)
• small (480 pixels)
• medium (740 pixels)
• large (980 pixels)
• xLarge (1140 pixels)
• xxLarge (1300 pixels)

Breakpoint pixel values are converted ems in the CSS, assuming 1em = 16px.

Overriding breakpoints

The default breakpoints can be replaced, extended or restored:

import { setBreakpoints, extendBreakpoints, resetBreakpoints } from 'src-mq'

// Breakpoints are the default set:
//
//  - xxSmall (320 pixels)
//  - xSmall (375 pixels)
//  - small (480 pixels)
//  - medium (740 pixels)
//  - large (980 pixels)
//  - xLarge (1140 pixels)
//  - xxLarge (1300 pixels)
//
// You can do [from.small.until.medium] etc.

setBreakpoints({ tiny: 1, massive: 10000000 })

// Breakpoints have been replaced:
//
//  - tiny (1 pixel)
//  - massive (10000000 pixels)
//
// Now you can do [from.tiny.until.massive],
// but not [from.small.until.medium] etc.

extendBreakpoints({ infinitesimal: 0.00000001 })

// Breakpoints have been extended:
//
//  - infinitesimal (0.00000001 pixels)
//  - tiny (1 pixel)
//  - massive (10000000 pixels)
//
// Now you can do [from.infinitesimal.until.massive] etc.

resetBreakpoints()

// Breakpoints have been restored to the default set:
//
//  - xxSmall (320 pixels)
//  - xSmall (375 pixels)
//  - small (480 pixels)
//  - medium (740 pixels)
//  - large (980 pixels)
//  - xLarge (1140 pixels)
//  - xxLarge (1300 pixels)
//
// Now you can do [from.small.until.medium],
// but not [from.tiny.until.massive] etc.

Complex queries

By design, src-mq is limited to media type and min/max-width feature expressions.

To generate more complex queries than this, you can concatenate its output with any other valid feature expressions, for example:

/* {[from.small.for.screen + " and (prefers-reduced-motion: reduce)"]: { ... }} */

@media screen and (min-width: 30em) and (max-width: none) and (prefers-reduced-motion: reduce) { ... }

Acknowledgements

src-mq is heavily inspired by sass-mq.

It's extracted from work originally done at the Guardian and that is now being rolled into their Source Design System.

Hence the name 💃.