Skip to content
Styled Components Responsive Media Queries — Standard size from Chrome DevTools
Branch: master
Clone or download
Latest commit acd579a Dec 5, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode 📦 NEW: Gif Demo + VSCode Dec 5, 2018
src 📦 NEW: Dynamic Mini Media Queries Nov 9, 2018
.clrc.hbs
.gitignore
.release-it.json
CHANGELOG.md
README.md 🐛 FIX: alt Dec 5, 2018
package-lock.json 📦 NEW: Auto Changelog Nov 8, 2018
package.json 🦄 Release 1.3.0 Nov 9, 2018

README.md


Styled-Responsive-Media-Queries styled-rmq

Styled Components Responsive Media Queries — Standard sizes from Chrome DevTools.

VSCode.pro

Getting Started

Step #0

Install styled-components in your project.

npm i -S styled-components

Step #1

Install styled-rmq in your project.

npm i -S styled-rmq

Step #2

Import both.

import styled from 'styled-components';
import rmq from 'styled-rmq';

const YourComponent = styled.div`
    background: tomato;

    /* XL: 4K 2560px */
    ${rmq('xl')} { background: hotpink; }

    /* ll: Laptop Large 1440px */
    ${rmq('ll')} { background: hotpink; }

    /* ls: Laptop 1024px */
    ${rmq('ls')} { background: hotpink; }

    /* t: Tablet 768px */
    ${rmq('t')}  { background: hotpink; }

    /* ml: Mobile Large 425px */
    ${rmq('ml')} { background: hotpink; }

    /* mm: Mobile Mediun 375px */
    ${rmq('mm')} { background: hotpink; }

    /* ms: Mobile Small 320px */
    ${rmq('ms')} { background: hotpink; }

    /**
     *  Custom Media Queries
     * — Think of elements instead of size
     * — Make them look good on all sizes.
     *
     * E.g. Small tablet size 585px.
    */
    ${rmq('585')} { background: hotpink; }
`;

export default (
  <YourComponent>Being Used Here!</YourComponent>
);

Some Context + Examples

All of the sizes used in the responsive media queries in styled-rmq come directly from the Chrome Dev Tools. I prefer px and don't use em for media queries. I'll collect a list of sites using this package below.

RMQ

Changelog →

All notable changes in this project's released versions are documented in the changelog file.

License

MIT ⓒ Ahmad Awais. Follow me on Twitter @MrAhmadAwais →

You can’t perform that action at this time.