MediaQueries

Interface

Structure

import { BreakPoint } from '@morfeo/spec';

interface MediaQueries {
  [key: BreakPoint]?: string;
}

Usage

// Types are re-exported for ease of use by other packages
// like @morfeo/core, @morfeo/web or @morfeo/react
import { Breakpoint, MediaQueries } from '@morfeo/spec';

Examples

Using the CLI compose command:

mediaQueries.morfeo.ts

// Remove this line to add the slice to all of your themes
export const themeName = 'My Theme Name';
// Optional if you name the file mediaQueries.morfeo.ts
export const sliceName = 'mediaQueries';

export default {
  xs: '@media screen and (min-width: {{xs}})',
  sm: '@media screen and (min-width: {{xs}}) and (max-width: {{md}})',
  md: '@media screen and (min-width: {{md}}) and (max-width: {{lg}})',
  lg: '@media screen (min-width: {{lg}})',
};

Or manually:

mediaQueries.ts

import { MediaQueries } from '@morfeo/spec';

const mediaQueries: MediaQueries = {
  xs: '@media screen and (min-width: {{xs}})',
  sm: '@media screen and (min-width: {{xs}}) and (max-width: {{md}})',
  md: '@media screen and (min-width: {{md}}) and (max-width: {{lg}})',
  lg: '@media screen (min-width: {{lg}})',
};

theme.ts

import { mediaQueries } from './mediaQueries';

const myTheme = {
  mediaQueries,
  ...restOfTheTheme,
};

morfeo.setTheme('My Theme Name', myTheme);

Description

MediaQueries it's deeply related to the slice breakpoints, in particular thanks to this slice you can change how media queries are generated by Morfeo!

Let's give an example, given this Morfeo Style Object:

{
  "p": {
    "lg": "m",
    "sm": "s"
  }
}

Once resolved by Morfeo, this will produce a CSS similar to the following one:

@media (min-width: 1920px) {
  .class {
    padding: 24px;
  }
}

@media (min-width: 768px) {
  .class {
    padding: 16px;
  }
}

Let's say we want to change how Morfeo is resolving media queries for medium size screens (md Breakpoint in our example) by changing the mediafeatures of those media queries:

theme.ts

{
  "mediaQueries": {
    "md": "@media screen and (min-width: {{md}}) and (max-width: {{lg}})"
  }
}

The placeholders {{md}} and {{lg}} will be resolved by referring to the slice breakpoints.

By changing the theme in this way, if we resolve the previous style again, it will generate the following CSS:

@media (min-width: 1920px) {
  .class {
    padding: 24px;
  }
}

@media (min-width: 768px) and (max-width: 1920px) {
  .class {
    padding: 16px;
  }
}

Extend Slice with custom properties

If you're using typescript and you add custom colors to your theme configuration, you'll need to merge the default MediaQueries interface with your custom one. We suggest creating a declaration file (for example: morfeo.d.ts or types.d.ts) like the following one:

import { mediaQueries } from './path/to/your/custom/mediaQueries';

type MyMediaQueries = typeof mediaQueries;

declare module '@morfeo/spec' {
  export interface MediaQueries extends MyMediaQueries {}
}

Read more about how to extend the default Morfeo Theme here.