@caiodev/styled-media
v2.0.2
Published
Create breakpoints within `styled components` as easily and quickly as possible π
Downloads
44
Maintainers
Readme
styled-media π
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;
`
)}
`