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.
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.
If you require the responsive support for arbitrary props see the useResponsiveProps
and useResponsiveComponent
hooks.
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
Responsive props in areas
Areas generated by the Composition
component support Responsive props as well.
Excluding a single prop
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