EmCasa UI
Edit page
Components
HelpersbreakpointHome
Image Upload
Places Autocomplete

breakpoint

Generate media query css interpolations.

  • breakpoint.up - Targets screens sizes larger than the selected breakpoint.
  • breakpoint.down - Targets screens sizes equal to or smaller than the selected breakpoint.
  • breakpoint.only - Targets only selected screen size

Default breakpoints (min-width):

phonetabletdesktop
0px480px780px
import styled from 'styled-components'
import {themeGet} from 'styled-system'
import {breakpoint} from '@emcasa/ui/lib/styles'
import Text from '@emcasa/ui-dom/components/Text'
const ExampleText = styled(Text)`
  @media only screen and ${breakpoint.only('phone')} { font-style: italic; }
  @media only screen and ${breakpoint.down('tablet')} { color: ${themeGet('colors.pink')}; }
  @media only screen and ${breakpoint.up('desktop')} { color: ${themeGet('colors.blue')}; }
`

Hello world