Mq

The Fylgja MQ offers Design Tokens (CSS props) for consistent use of media queries.

Installation

npm install @fylgja/mq

Then include the component in to your code via;

@use "@fylgja/mq";
// Or via PostCSS and other options as native CSS
@import "@fylgja/mq"; // *

* The PostCSS version is using the newer spec with @custom-media, and also requires the PostCSS Custom Media plugin to work, until Custom Media queries are better supported

How to use

This component comes in 2 versions.

The SCSS version comes with just SCSS variables and creates no css when imported.

The CSS version comes packing CSS variables, and while this version does ship some CSS. This does offer you more flexibilities with other tools and languages.

SCSS version

You can use this component to quickly adjust the Fylgja component media queries used across all of the Fylgja CSS components, with 1 map variable trough the mq component;

@use "@fylgja/mq" with ($breakpoints: (..));

or you can use it in your own SCSS components;

@use "@fylgja/mq" as *;

@media ($md) {..}

CSS version

As for the CSS variables, this only allows you to use the variables in your CSS, and it can not adjust the Fylgja CSS components directly.

To use it, simply use at media with the Fylgja CSS media variable.

@media (--md) {..}

Config

The following variables are available.

With the CSS variables you can use the same name, only with -- as prefix, instead of $.

// Sizing mq's
$xs: "min-width: #{getMq(xs)}" !default;
$xs-max: "max-width: #{(getMq(xs) - 1px)}" !default;

$sm: "min-width: #{getMq(sm)}" !default;
$sm-max: "max-width: #{(getMq(sm) - 1px)}" !default;

$md: "min-width: #{getMq(md)}" !default;
$md-max: "max-width: #{(getMq(md) - 1px)}" !default;

$lg: "min-width: #{getMq(lg)}" !default;
$lg-max: "max-width: #{(getMq(lg) - 1px)}" !default;

$xl: "min-width: #{getMq(xl)}" !default;
$xl-max: "max-width: #{(getMq(xl) - 1px)}" !default;

$xxl: "min-width: #{getMq(xxl)}" !default;
$xxl-max: "max-width: #{(getMq(xxl) - 1px)}" !default;

// Device input
$hd-color: "dynamic-range: high";
$touch: "(hover: none) and (pointer: coarse)";
$stylus: "(hover: none) and (pointer: fine)";
$pointer: "(hover) and (pointer: coarse)";
$mouse: "(hover) and (pointer: fine)";

// prefers mq's
$scheme-dark: "prefers-color-scheme: dark";
$scheme-light: "prefers-color-scheme: light";

$motion-safe: "prefers-reduced-motion: no-preference";
$motion-reduce: "prefers-reduced-motion: reduce";

$opacity-safe: "prefers-reduced-transparency: no-preference";
$opacity-reduce: "prefers-reduced-transparency: reduce";

$data-safe: "prefers-reduced-data: no-preference";
$data-reduce: "prefers-reduced-data: reduce";

$contrast-more: "prefers-contrast: more";
$contrast-less: "prefers-contrast: less";

$portrait: "orientation: portrait";
$landscape: "orientation: landscape";

Note Some prefers media queries have bad support at them moment of writing, so always check what is usable.

Note getMq() is a sass function that gets a value from the $breakpoints map, with a fail save if the value is missing