npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@engineerapart/emotion-media-query

v1.0.4

Published

Beautiful media queries for emotion

Downloads

29

Readme

👩‍🎤💍 emotion-media-query

npm npm David

Beautiful media queries better than CSS @media for emotion with ability to specify custom breakpoints.

Don't forget to STAR 🎊 We are working so hard to add more features/customizations to emotion-media-query!

Features:

  • Custom breakpoints
  • Custom size units (px, em, rem)
  • Awesome syntax for min-width and max-width for each breakpoint
  • Familiar syntax as it uses Tagged Template Literals just like styled-components
  • Ability to convert px to rem or em

This is a fork of styled-media-query by Mohammad Rajabifard. All credit goes to him.

Start

🌱 Installation

You can install it like every other library with awesome yarn:

yarn add emotion-media-query

or with npm

npm install emotion-media-query

Note: If you didn't install emotion-components yet, install it as well yarn add emotion-components

If you use UglifyJS and it fails or you need compiled module, update to latest version please!

🍃 Usage

First let me mention how our default breakpoint look like:

{
  huge: '1440px',
  large: '1170px',
  medium: '768px',
  small: '450px',
}

The media has 3 main methods to generate media queries:

Basic Example

Probably this example will explain most of this library. You can use one of these methods to write different kinds of media queries like this:

import styled from 'emotion-react'; // You need this as well
import media from 'emotion-media-query';

const Box = styled.div`
  background: black;

  ${media.lessThan('medium')`
    /* screen width is less than 768px (medium) */
    background: red;
  `}

  ${media.between('medium', 'large')`
    /* screen width is between 768px (medium) and 1170px (large) */
    background: green;
  `}

  ${media.greaterThan('large')`
    /* screen width is greater than 1170px (large) */
    background: blue;
  `}
`;

The code above is the same as below in pure CSS:

/* ↓↓↓↓↓↓↓↓↓ */

div {
  background: black;

  @media (max-width: 768px) {
    /* screen width is less than 768px (medium) */
    background: red;
  }

  @media (min-width: 768px) and (max-width: 1170px) {
    /* screen width is between 768px (medium) and 1170px (large) */
    background: green;
  }

  @media (min-width: 1170px) {
    /* screen width is greater than 1170px (large) */
    background: blue;
  }
}

Note: You can use custom size instead of breakpoint names, too.

lessThan

You can use this type of media query to add styles for screen sizes less than given breakpoint or size.

Example with breakpoint:

media.lessThan('medium')`
  /* styles ... */
`

Example with custom size:

media.lessThan('768px')`
  /* styles ... */
`

Note: You can use rem and em too. (Even you can convert breakpoints to use em or rem with pxToRem and pxToEm functions)

greaterThan

You can use it to add styles for screen sizes greater than given breakpoint or size.

Example with breakpoint:

media.greaterThan('small')`
  /* styles ... */
`

Example with custom size:

media.greaterThan('450px')`
  /* styles ... */
`

between

We use between to add styles for screen sizes between the two given breakpoints or sizes.

Example with breakpoints:

media.between('small', 'medium')`
  /* styles ... */
`

Example with custom sizes:

media.between('450px', '768px')`
  /* styles ... */
`

Use with custom breakpoints:

Our breakpoints may not fit your app, so we export another function called generateMedia to generate a media object with your own custom breakpoints:

import styled from 'emotion-react'; // You need this as well
import { generateMedia } from 'emotion-media-query';

const customMedia = generateMedia({
  desktop: '78em',
  tablet: '60em',
  mobile: '46em',
});

// for example call it `Box`
const Box = styled.div`
  font-size: 20px;

  ${customMedia.lessThan('tablet')`
    /* for screen sizes less than 60em */
    font-size: 15px;
  `}
`;

In the case you needed the default breakpoints object, you can import it as follow:

import { defaultBreakpoints } from 'emotion-media-query';

🐽 Concepts

There's a little to learn before you can read the API section.

Breakpoints Object

It's an object containing each break point name as keys and the screen width as values. emotion-media-query exports the defaultBreakpoints object.

Media Generator Object

A media generator object is what is returned from generateMedia function or the default exported object from emotion-media-query. Read API section for each method.

🌼 API

We have a very minimal API, probably you are familiar with 90% of it so far.

Default media

A media generator object with default breakpoints object:

Example:

import media from 'emotion-media-query';

generateMedia

Generates custom media generator object with custom breakpoints:

generateMedia([breakpoints]);

Example:

import { generateMedia } from 'emotion-media-query';

const media = generateMedia({
  xs: '250px',
  sm: '450px',
  md: '768px',
  lg: '1200px',
});

pxToRem

Converts breakpoints object's units from px to rem based on the ratio of px to 1rem.

parameters:

  • breakpoints: Object - a breakpoints object
  • ratio: number default: 16 - how many px is equal to 1rem? (It's your root font-size)

Example:

import { pxToRem } from 'emotion-media-query';

const breakpointsInRem = pxToRem({
  small: '250px',
  medium: '768px',
  large: '1200px',
}, 10);

/* ↓↓ returns ↓↓
{
  small: '25rem',
  medium: '76.8rem',
  large: '120rem',
}
*/

pxToEm

Similar to pxToRem. Converts breakpoints object's units from px to em based on the ratio of px to 1em.

parameters:

  • breakpoints: Object - a breakpoints object
  • ratio: number default: 16 - how many px is equal to 1em? (Probably it's your root font-size)

Example: Similar to pxToRem.

⚙️ Troubleshoot

If you use UglifyJS and it fails or you need compiled module you need to update your module to v2 right now to fix the issue:

npm install emotion-media-query@latest

🐿 Contributions

I'd love to contribute in open source projects, and love to see people contribute. So any kind of contributions (bug reports, suggestions, PRs, issues, etc) are super welcome.

🍿 TODO

  • [ ] Write tests with Jest
  • [ ] Ability to specify custom media attributes
  • [ ] Add support for glamorous
  • [ ] ... You say?

License

Licensed under the MIT License, Copyright © 2017 Mohammad Rajabifard.

See LICENSE for more information.