# 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.

{% hint style="success" %}
Atomic Layout operates with the same breakpoints you would use in plain CSS media queries.
{% endhint %}

## Properties

The following properties can be used to describe a breakpoint:

| **Property name** | **Value type**                                                  | **Description**                                                  |
| ----------------- | --------------------------------------------------------------- | ---------------------------------------------------------------- |
| `minWidth`        | `Numeric`                                                       | Minimum device width.                                            |
| `maxWidth`        | `Numeric`                                                       | Maximum device width.                                            |
| `minHeight`       | `Numeric`                                                       | Minimum device height.                                           |
| `maxHeight`       | `Numeric`                                                       | Maximum device height.                                           |
| `minResolution`   | `String`                                                        | Minimum screen resolution of the device.                         |
| `maxResolution`   | `String`                                                        | Maximum screen resolution of the device.                         |
| `aspectRatio`     | `String`                                                        | Device screen aspect ratio.                                      |
| `minAspectRatio`  | `String`                                                        | Minimum aspect ratio of the device.                              |
| `maxAspectRatio`  | `String`                                                        | Maximum aspect ratio of the device.                              |
| `scan`            | `interlace` \| `progressive`                                    | Scanning process of the device.                                  |
| `orientation`     | `portrait` \| `landscape`                                       | Device viewport orientation.                                     |
| `displayMode`     | enum: `fullscreen` \| `standalone` \| `minimal-ui` \| `browser` | Display mode of the application specified in the `manifest.json` |

## 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](https://getbootstrap.com/docs/4.0/layout/grid/#grid-options) and mobile-first behavior by default.

| **Breakpoint name** | **xs (default)** | **sm** | **md** | **lg** |  **xl** |
| :-----------------: | :--------------: | :----: | :----: | :----: | :-----: |
|   **Screen width**  |      <576px      | ≥576px | ≥768px | ≥992px | ≥1200px |

## Configuration

* [Default breakpoint name](https://redd.gitbook.io/atomic-layout/api/layout/configure#defaultbreakpointname)
* [Custom breakpoints](https://redd.gitbook.io/atomic-layout/api/layout/configure#breakpoints)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://redd.gitbook.io/atomic-layout/fundamentals/breakpoints.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.