---
url: https://docs.youcan.shop/celeste-ui/foundations/breakpoints.md
---
# Breakpoints

The responsive breakpoints used by Celeste UI. Each one is a min-width, so styles apply from
that width upwards.

## UnoCSS

`presetCeleste` sets the `breakpoint` theme key, so the standard variants resolve to the
Celeste values:

```html
<div class="block md:flex lt-lg:hidden at-sm:grid">
```

`md:` applies from 768px up, `lt-lg:` below 1024px, `at-sm:` between 640px and 768px.

## SCSS

`tokens.scss` carries the values as SCSS variables, which work in a media condition and
anywhere else a length is expected:

```scss
@use '@youcan/celeste-tokens/tokens.scss' as *;

.card {
  max-width: $breakpoint-md;

  @media (width >= $breakpoint-md) {
    padding: 24px;
  }

  @media ($breakpoint-sm <= width < $breakpoint-lg) {
    border: none;
  }
}
```

## CSS

`tokens.css` defines the custom properties. They hold the values for sizing, but CSS does not
read custom properties inside a media condition:

```css
.card { max-width: var(--breakpoint-md); }
```

For media queries, import `media.css`. It declares one `@custom-media` per breakpoint, plus an
`lt-` form for the matching max-width:

```css
@import '@youcan/celeste-tokens/media.css';

@media (--celeste-md) {
  .card { padding: 24px; }
}

@media (--celeste-lt-sm) {
  .card { padding: 8px; }
}
```

`@custom-media` is not native CSS yet. It needs
[`postcss-custom-media`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media),
or `postcss-preset-env`, in the build. Without it, use the literal values from the table above.