Media Template Trick

Hi all. An issue might not be the best place for this, but I wanted to share a little trick I discovered with the styled-components community. It’s really too simple to be a feature or utility function in the library itself, but I am finding it extremely useful and wanted to give back.

const sizes = {
  giant: 1170,
  desktop: 992,
  tablet: 768,
  phablet: 572,
  phone: 376
}

export const media = Object.keys(sizes).reduce((accumulator, label) => {
  accumulator[label] = (...args) => css`
    @media (max-width: ${sizes[label]}px) {
      ${css(...args)}
    }
  `
  return accumulator
}, {})

This creates a media template for each of the sizes, so you can do this in your components:

const Container = styled.div`
  color: #333;
  ${media.desktop`padding: 0 18px;`}
  ${media.tablet`padding: 0 18px;`}
  ${media.phablet`padding: 0 10px;`}
  ${media.phone`padding: 0 3px;`}
`

Thanks for all the work you are doing. styled-components is the most elegant styling solution I’ve seen so far.

[erikras]

@valscion Thanks for that link. With CSS it’s literally possible to learn some new quirk every single day of your life. 😂

[valscion]

Would you be OK with changing the breakpoint example values from px unit to em? It would work properly cross-browser and support users changing their browsers font-size accordingly.

Source: https://zellwk.com/blog/media-query-units/