Breakpoints
What is a "breakpoint"?
Breakpoint is a condition upon which layout acquires a new state. Such condition is often based on a device's characteristics like screen size, resolution, orientation, and others.
Atomic Layout operates with the same breakpoints you would use in plain CSS media queries.
Properties
The following properties can be used to describe a breakpoint:
Default breakpoint name
Whenever a component's prop is not suffixed by a breakpoint name, a default breakpoint name is used.
The default breakpoint name is xs
, making mobile-first the default responsive behavior.
Default breakpoints
Atomic Layout uses Bootstrap 4 Grid breakpoints and mobile-first behavior by default.
Configuration
Last updated