Table of Contents

• Intro
  • Prerequisites
  • Installation
• Usage
• Roadmap
• Contributing
• License
• Acknowledgements

Intro

This project is a media query utility for styled-components. It will allow you to use some incredibly useful shorthand's when using media queries. You can customise your own breakpoints (or use the default set)

An example of what using this library looks like:

  import { createMedia } from 'stylish-media' 

  const media = createMedia()

  const RedOnMediumDevices = styled.div`
      width: 100px;
      height: 100px;
      background-color: green;
      ${media.only.md`
        background-color: red;
      `}
    `

In this example a media object is created using all the default settings (px units and default breakpoints) and then a div is rendered which is only red on the 'md' breakpoint which by default is between 768 and 991 px.

Prerequisites

For this project to be useful to you you should already be building with React and styled-components

Installation

1. using npm

npm install --save stylish-media

2. using yarn

yarn add stylish-media

Usage

TODO write some basic examples

Roadmap

• Add support for using em and rem units

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.