Skip to content

ahmadawais/Styled-Responsive-Media-Queries

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

39 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation


Styled-Responsive-Media-Queries styled-rmq

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

DOWNLOADS Node.js CLI Learn VSCode Sponsor Follow @MrAhmadAwais on Twitter


📟

Install

npm install --save @emotion/core @emotion/styled styled-rmq

# OR
npm install --save styled-components styled-rmq

⚙️

Usage

import styled from '@emotion/styled'; // OR import styled from 'styled-components';
import rmq from 'styled-rmq';

const YourComponent = styled.div`
    background: tomato;

    ${rmq('xl')} { background: tomato; }  /* xl: 2560px : 4K */
    ${rmq('ll')} { background: hotpink; } /* ll: 1440px : Laptop Large */
    ${rmq('ls')} { background: orange; }  /* ls: 1024px : Laptop */
    ${rmq('t')}  { background: skyblue; } /* t:  768px  : Tablet */
    ${rmq('ml')} { background: purple; }  /* ml: 425px  : Mobile Large */
    ${rmq('mm')} { background: silver; }  /* mm: 375px  : Mobile Medium */
    ${rmq('ms')} { background: green; }   /* ms: 320px  : Mobile Small */
    /**
     *  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; } /* custom: 585px */
`;

export const Component = (
  <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

❯ Read the changelog here →


KEY: 📦 NEW, 👌 IMPROVE, 🐛 FIX, 📖 DOC, 🚀 RELEASE, and 🤖 TEST

I use Emoji-log, you should try it and simplify your git commits.


📃

License & Conduct

Sponsor

Me (Ahmad Awais) and my incredible wife (Maedah Batool) are two engineers who fell in love with open source and then with each other. You can read more about me here. If you or your company use any of my projects or like what I’m doing then consider backing me. I'm in this for the long run. An open-source developer advocate.

Ahmad on Twitter

NodeCLI.com — Learn to build Node.js CLI Automation

This repository is part of the NodeCLI.com course.

After building hundreds of developer automation tools used by millions of developers, I am sharing exactly how you can do it yourself with minimum effective effort. Learn to build Node.js & JavaScript based CLI (Command Line Interface) apps. Automate the grunt work, do more in less time, impress your manager, and help the community. → I'm sharing it all in this online video course. Node CLI Automation without wasting a 1,000 hours

Node CLI Course

Node CLI

Awais on Twitter