Atomic Layout
  • Introduction
  • Motivation
  • Resources
  • FAQ
    • Comparison with styled-system
  • Getting started
    • Installation
    • First composition
    • Responsive composition
    • Nested composition
  • Fundamentals
    • Breakpoints
    • Prop aliases
    • Responsive props
  • API
    • Layout
      • configure()
    • Components
      • Box
      • Composition
      • Only
      • Visible
    • Hooks
      • useMediaQuery
      • useResponsiveQuery
      • useViewportChange
      • useBreakpointChange
      • useResponsiveValue
      • useResponsiveProps
    • Utilities
      • query
      • makeResponsive
  • Recipes
    • Semantics
    • Namespaces
    • Iterative areas
    • Responsive layout
    • Explicit media query
Powered by GitBook
On this page
  1. Recipes

Explicit media query

PreviousResponsive layout

Last updated 5 years ago

Although Atomic Layout provides the 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 section.

Responsive props
Breakpoints