https://github.com/watfiree/mq

Util for media queries.
https://github.com/watfiree/mq

css javascript mobile-development mobile-first nextjs react responsive responsive-design styled-components typescript

Last synced: about 1 month ago
JSON representation

Util for media queries.

• Host: GitHub
• URL: https://github.com/watfiree/mq
• Owner: watFiree
• Created: 2022-07-31T13:04:58.000Z (over 2 years ago)
• Default Branch: dev
• Last Pushed: 2023-04-01T17:15:13.000Z (over 1 year ago)
• Last Synced: 2024-10-14T11:13:21.911Z (about 1 month ago)
• Topics: css, javascript, mobile-development, mobile-first, nextjs, react, responsive, responsive-design, styled-components, typescript
• Language: TypeScript
• Homepage:
• Size: 301 KB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# mq

Create easily media queries when styling in any CSS-in-JS library.

## Installation

Install `mq` with npm or yarn

```bash

  npm install @watfiree/mq

  yarn add @watfiree/mq

```

## Usage/Examples

### With default config

```typescript

import styled from "styled-components";

import { mq } from "@watfiree/mq";

const ModalWrapper = styled.div`

  background: black;

  color: white;

  ${mq.from("xs")} {

    background: grey;

    color: darkgrey;

  }

  ${mq.between("sm", "xl")} {

    background: white;

    color: black;

  }

`;

```

### With your custom config

```typescript

import styled from "styled-components";

import { createMqEntity } from "@watfiree/mq";

type myNewBreakponts = "wd" | "ws"; // can be also enum

const mq = createMqEntity({ wd: "2000px", ws: "1200px" });

const ModalWrapper = styled.div`

  background: black;

  color: white;

  ${mq.from("wd")} {

    background: grey;

    color: darkgrey;

  }

  ${mq.between("ws", "wd")} {

    background: white;

    color: black;

  }

`;

```