> For the complete documentation index, see [llms.txt](https://apcom.gitbook.io/altrone-ui/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://apcom.gitbook.io/altrone-ui/entities/design/adaptive-design.md).

# Adaptive Design

All Altrone components works on all devices perfectly well. We have some breakpoints of device widths.

Depending on the current screen width of your device, Altrone displays components in a way that makes them easy to use. Sometimes components can change significantly (e.g. modal windows for desktops and for mobile devices are very different).

When you design your own components you should follow to the following practices:

* display modal windows and popup messages from the bottom on mobile devices;
* on touch devices, small components should be enlarged to increase the clickable area;
* try to reuse built-in Altrone components whenever possible;

Altrone provides useful hooks [useMediaMatch](/altrone-ui/utils/hooks/usemediamatch.md) and [useWindowSize](/altrone-ui/utils/hooks/usewindowsize.md) to implement adaptive components  

Some component provides special props to manage their behaviour on different devices. 

| Breakpoint       | Value    |
| ---------------- | -------- |
| **`xl-desktop`** | `1920px` |
| **`l-desktop`**  | `1600px` |
| **`m-desktop`**  | `1440px` |
| **`s-desktop`**  | `1366px` |
| **`xs-desktop`** | `1280px` |
| **`l-tablet`**   | `1024px` |
| **`m-tablet`**   | `834px`  |
| **`s-tablet`**   | `768px`  |
| **`l-phone`**    | `430px`  |
| **`m-phone`**    | `393px`  |
| **`s-phone`**    | `320px`  |

## History

* **`Altrone 1.0`**: initial release