@volue/design-media-queries

Media query primitives/tokens to be used across Volue's products

Installation

npm install @volue/design-media-queries --save
# or
yarn add @volue/design-media-queries

Usage

JavaScript

In JavaScript, design token names are formatted in lower camelCase.

const tokens = require('@volue/design-media-queries');
console.log(tokens.mqLargeAndUp); // screen and ( min-width: 48.75em )

In JSON, design token names are formatted in SNAKE_CASE.

const tokens = require('@volue/design-media-queries/dist/index.json');
console.log(tokens['MQ_LARGE_AND_UP']); // screen and ( min-width: 48.75em )

Sass

Sass variables and map keys are formatted in kebab-case.

// Using variables
@import '~@volue/design-media-queries/dist/index';

@media #{$mq-large-and-up} {
  body {
    padding: 1rem;
  }
}