💅 Helps manage media queries with styled components
Clone or download
Latest commit 4f17ea3 Oct 9, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src rewrite tests to tap (#1) Sep 17, 2018
tap-snapshots tests refactoring Oct 5, 2018
test tests refactoring Oct 5, 2018
.babelrc bump babel Oct 5, 2018
.eslintignore tests refactoring Oct 5, 2018
.eslintrc.json prepublish Oct 9, 2018
.gitignore prepublish Oct 9, 2018
.npmignore prepublish Oct 9, 2018
.travis.yml bump babel Oct 5, 2018
LICENSE Initial commit Jul 23, 2018
README.md rewrite readme Oct 8, 2018
package-lock.json 1.0.1 Oct 9, 2018
package.json 1.0.1 Oct 9, 2018

README.md

💅 styled-media-helper

Build Status Coverage Status NPM Version

This module makes easy to write media queries using styled-components.

Inspired by Bootstrap media-breakpoint-... mixins.

Installation

$ npm install styled-media-helper

Usage

const styled = require('styled-components').default;
const Media = require('styled-media-helper');

const sizes = {
  sm: 320,
  md: 768,
  lg: 1240
};

const media = new Media(sizes);

module.exports = styled.div`
  width: 100px;
  height: 100px;
  background-color: blue;

  ${media.up('lg')`
    width: 150px;
  `}

  // Output:
  //   @media (min-width: 1240px) {
  //     width: 150px;
  //   }


  ${media.down('sm')`
    background-color: black;
  `}

  // Output:
  //   @media (max-width: 767.98px) {
  //     background-color: black;
  //   }


  ${media.between('sm', 'lg')`
    width: 200px;
  `}

  // Output:
  //   @media (min-width: 320px) and (max-width: 1239.98px) {
  //     width: 200px;
  //   }


  ${media.only('md')`
    background-color: green;
  `}

  // Output:
  //   @media (min-width: 768px) and (max-width: 1239.98px) {
  //     background-color: green;
  //   }


  ${media.only('md')`
    background-color: green;
  `}

  // Output:
  //   @media (min-width: 768px) and (max-width: 1239.98px) {
  //     background-color: green;
  //   }


  ${media.only('lg')`
    border-radius: 15px;
  `}

  // Output:
  //   @media (min-width: 1240px) {
  //     border-radius: 15px;
  //   }
`;

License

The MIT License (MIT)