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:

<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:

@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:

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

@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, or postcss-preset-env, in the build. Without it, use the literal values from the table above.