@caiodev/styled-media

Create breakpoints within `styled components` as easily and quickly as possible 💅

Usage no npm install needed!

<script type="module">
  import caiodevStyledMedia from 'https://cdn.skypack.dev/@caiodev/styled-media';
</script>

README

styled-media 💅

Drone (cloud) npm (scoped) npm bundle size (scoped) Codacy grade npm

Create breakpoints within styled-components as easily and quickly as possible 💅

Installation

yarn

yarn add @caiodev/styled-media

npm

npm i @caiodev/styled-media

Usage

The default breakpoints are the following:

const breakpoints = {
  phone: '420px',
  tablet: '768px',
  desktop: '1200px'
}

Example - with default breakpoint

import styled, { css } from 'styled-components'
import media from '@caiodev/styled-media'

const Header = styled.header`
  width: 100%;
  height: 64px;

  ${media.lessThan(
    'tablet',
    css`
      height: 48px;
    `
  )}
`

const Footer = styled.footer`
  width: 100%;
  height: 64px;

  ${media.greaterThan(
    'desktop',
    css`
      height: 80px;
    `
  )}
`

Example - with custom breakpoints

import styled, { css } from 'styled-components'
import media from '@caiodev/styled-media'

const Header = styled.header`
  width: 100%;
  height: 64px;

  ${media.lessThan(
    600,
    css`
      height: 48px;
    `
  )}
`

const Footer = styled.footer`
  width: 100%;
  height: 64px;

  ${media.greaterThan(
    600,
    css`
      height: 80px;
    `
  )}
`