Explicit media query

Although Atomic Layout provides the Responsive props feature for shorter responsive declarations of various CSS properties, sometimes declaring an explicit media query is necessary.
To preserve Atomic Layout breakpoints as a source of truth it's recommended to reference breakpoints' dimensions from the Layout namespace exported by the library.
import Layout from 'atomic-layout'
​
export const CustomComponent = styled.div`
  color: #000;
  
  @media (min-width: ${Layout.breakpoints.md.minWidth}) {
    color: #ffbbcc;
  }
`
See all the breakpoint properties you can use in the Breakpoints section.
​

Recipes - Previous

Responsive layout

Last modified 2yr ago