# Responsive Breakpoints

We have 3 different ways to deal with responsive breakpoints in our components.

1. CSS variables (`@custom-media`) that are relative to the browser size.
2. [`useBreakpoints` hook](/hooks/useBreakpoints) that is the JS counterpart of
   the CSS variables.
3. [`useResizeObserver` hook](/hooks/useResizeObserver) that is used to make
   components responsive depending on the size of its container rather than the
   browser.

## CSS variables

We have 5 CSS breakpoints that you can choose from when styling your components.

| Breakpoint                     | Width       |
| :----------------------------- | :---------- |
| `--small-screens-and-below`    | `< 490px`   |
| `--small-screens-and-up`       | `>= 490px`  |
| `--medium-screens-and-up`      | `>= 768px`  |
| `--large-screens-and-up`       | `>= 1080px` |
| `--extra-large-screens-and-up` | `>= 1440px` |

### Usage

Components should be styled mobile-first, meaning that they should be styled for
small screens and then scaled up. This means that the
`--small-screens-and-below` breakpoint should be rarely considered.

Media queries can also be nested inside selectors. This will help with clarity
when reading your CSS.

```css
.foo {
  /** small screens first **/
  padding: var(--space-base);

  @media (--medium-screens-and-up) {
    padding: var(--space-large);
  }

  @media (--large-screens-and-up) {
    padding: var(--space-extravagant);
  }
}
```

#### Caveat

We use [custom-media](https://www.w3.org/TR/mediaqueries-5/#custom-mq) that
creates a CSS variable-like pattern for media queries. It isn't widely supported
yet so you'd have to install
[postcss-custom-media](https://www.npmjs.com/package/postcss-custom-media) on
your compiler to transform them back to normal media queries.

### Deprecated breakpoints

| Breakpoint         | Width       |
| :----------------- | :---------- |
| `--handhelds`      | `< 640px`   |
| `--medium-screens` | `>= 640px`  |
| `--wide-screens`   | `>= 1024px` |

## 2. useBreakpoints hook

This closely mimics the CSS breakpoints but you can use within a JS code. Read
more about useBreakpoints [here](/hooks/useBreakpoints).

## 3. useResizeObserver hook

To make components responsive depending on the size of its container rather than
the browser, you should use the
[useResizeObserver hook](/hooks/useResizeObserver) so that the component can be
responsive based on its container.