Responsive props
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
Any Prop alias can be used as a responsive prop name.
Breakpoint name
(Optional) A breakpoint name from one of the configured breakpoints.
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 andup
.
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".
Last updated