Breakpoints

The $responsive-breakpoints map drives container max-widths, flex-grid responsive modifiers, and the three breakpoint mixins. All values are min-width; mobile is intentionally null (no media query).

Default map

Name	Min width	Typical device
`mobile`	`null`	Phones — default, no media query.
`tablet`	`768px`	Tablets in portrait, large phones in landscape.
`desktop`	`1024px`	Tablets in landscape, small laptops.
`widescreen`	`1280px`	Laptops, standard desktop displays.
`fullhd`	`1536px`	1080p+ desktops, large external displays.

Mixins

Mixin	Emits	Notes
`from($name)`	`@media screen and (min-width: $size)`	Matches at `$size` and above.
`until($name)`	`@media screen and (max-width: $size - 1px)`	Strictly below the named breakpoint.

Usage

@use '@adnap/krysalicss/helper/breakpoints';

.my-component {
  font-size: 1rem;

  @include breakpoints.from(tablet) {
    font-size: 1.125rem;
  }

  @include breakpoints.until(desktop) {
    padding: 0.5rem;
  }

  // "Only on tablets": compose from + until in a single rule.
  @include breakpoints.from(tablet) {
    @include breakpoints.until(desktop) {
      border: 1px solid red;
    }
  }
}

Custom breakpoints

Override the map at the framework entry. Keep mobile: null as the first entry: the flex grid uses it as the default-display breakpoint.

@use '@adnap/krysalicss' with (
  $responsive-breakpoints: (
    mobile:     null,
    tablet:     640px,
    desktop:    960px,
    widescreen: 1200px,
    fullhd:     1440px,
  ),
);

Container queries

containerFrom and containerUntil mirror their media-query siblings but resolve against the nearest containment context. They share the $responsive-breakpoints map, so a tablet container query and a tablet media query cross the same width threshold (768px by default): only the reference frame differs.

Mixin	Emits	Notes
`containerFrom($name)`	`@container (min-width: $size)`	Caller declares `container-type` on the host.
`containerUntil($name)`	`@container (max-width: $size - 1px)`	Strictly below the named breakpoint.

Opting a component in

Modules with a $container-name variable expose a one-line opt-in: pass a non-null name when configuring the framework, and the component emits container-type: inline-size; container-name: <value>; on its host. Currently shipped on card and alert.

@use '@adnap/krysalicss/helper/breakpoints';
@use '@adnap/krysalicss/module/card' with (
  $container-name: card,
);

// .card now exposes container-type: inline-size; container-name: card;
//: scope your card-aware rules with `containerFrom` / `containerUntil`:
.card .preview {
  display: grid;
  grid-template-columns: 1fr;

  @include breakpoints.containerFrom(tablet) {
    grid-template-columns: 1fr 1fr;
  }
}

Selection matrix

Reference frame	Mixin	Applies when
Viewport	`from` / `until`	Layout depends on viewport width.
Container	`containerFrom` / `containerUntil`	Layout depends on the host element's own width, or the component is rendered in slots whose available width differs from the viewport (sidebar, modal, embedded).