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
  • What is a "responsive prop"?
  • Declaration
  • Prop name
  • Breakpoint name
  • Behavior
  • Defaults
  • Examples
  • Mobile-first
  • Responsive props in areas
  • Excluding a single prop
  1. Fundamentals

Responsive props

PreviousProp aliasesNextLayout

Last updated 5 years ago

What is a "responsive prop"?

"Responsive prop" is a concept specific to Atomic Layout library. It allows to suffix a prop name with a breakpoint in order to apply the value of that prop on that breakpoint. You can control a breakpoint and responsive behavior to get the most of responsive props.

Responsive props is an essential feature as it dramatically shortens the declaration of various spacing-related CSS properties, allowing you to declare their responsive changes in a few lines of code.

Declaration

To declare a responsive prop follow this pattern:

Prop name

Note that not all props are supported as responsive. In order to preserve an idiological approach of the library you won't be able to use arbitrary props like textAlign or backgroundColor as responsive, by dedfault.

Breakpoint name

Behavior

(Optional) Behavior describes how a responsive prop is applied.

  • up (Default) — Applies the given value from the specified breakpoint and up;

  • down — Applies the given value from the specified breakpoint and down;

  • only — Applies the given value only for the specified breakpoint.

Atomic Layout is mobile-first. This means that by default all responsive props are applied starting from the given breakpoint and up. You can change this by providing a custom behavior value to a responsive prop.

Defaults

  • Default breakpoint behavior is up,

  • Default measurement unit for numeric prop values is px,

  • When not suffixed, any prop value is applied for xs breakpoint and up.

Examples

Mobile-first

import React from 'react'
import { Box } from 'atomic-layout'

export const Header = ({ children }) => (
  <Box
    paddingVertical={10}
    paddingVerticalMd={20}
    paddingVerticalLg={30}
  >
    {children}
  </Box>
)

Responsive props in areas

import React from 'react'
import { Composition } from 'atomic-layout'

export const Post = ({ title, content }) => (
  <Composition
    areas={`
      header
      content
    `}
    gap={10}
    gapLg={20}
  >
    {(Areas) => (
      <>
        <Areas.Header paddingSmOnly={10}>
          <h3>{title}</h3>
        </Areas.Header>
        <Areas.Content>
          <p>{content}</p>
        </Areas.Content>
      </>
    )}
  </Composition>
)

Areas generated by the Composition component support Responsive props as well.

Excluding a single prop

import React from 'react'
import { Composition } from 'atomic-layout'

export const Post = () => (
  <Composition areas="left right">
    {(Areas) => (
      <Areas.Left
        padding={10}
        paddingMdOnly="initial"
      >
        Right area
      </Areas.Left>
      <Areas.Right>Left area</Areas.Right>
    )}
  </Composition>
)

In the example above the padding={10} declaration applies padding: 10px on all screens, starting from "xs" and up. However, on the "md" screen the padding declaration is rewritten by paddingMdOnly and its value is set to "initial".

Any can be used as a responsive prop name.

If you require the responsive support for arbitrary props see the and hooks.

(Optional) A breakpoint name from one of the configured .

Prop alias
useResponsiveProps
useResponsiveComponent
breakpoints
propName + ?breakpointName + ?behavior