Rapha Media Query

Beautiful media queries for styled-components

Installation

Using npm:

npm i @rapharacing/media-query --save

Using Yarn:

yarn add @rapharacing/media-query

Breakpoints

Default breakpoints

{
  small: '30em', // 480px
  medium: '48em', // 768px
  large: '62em' // 992px,
  xl: '75em' // 1200px
}

Example

If the project supports ECMAScript Modules, you can use the import syntax

import mq from '@rapharacing/media-query';

const Example = styled.div`
  display: flex;
  flex-direction: column;

  ${mq.md`
        flex-direction: row;
    `};
`;

Will generate the following css

.example {
  display: flex;
  flex-direction: column;

  @media (min-width: 48em) {
    flex-direction: row;
  }
}

License

Media query is freely distributable under the terms of the MIT license.