@astriata/breakpoints

Breakpoint tokens and mixins for Astriata projects. Single source of truth for all responsive breakpoints.

Install

pnpm add @astriata/breakpoints

Usage

@use "@astriata/breakpoints" as *;

Breakpoints

| Token | Value | |-------|-------| | $bp-sm | 0px | | $bp-md | 768px | | $bp-lg | 1024px | | $bp-xl | 1400px |

Mixins

// Mobile and below
@include bp-sm-down { ... }

// Tablet and up
@include bp-md-up { ... }

// Tablet and below
@include bp-md-down { ... }

// Desktop and up
@include bp-lg-up { ... }

// Desktop and below
@include bp-lg-down { ... }

// Extra large and up
@include bp-xl-up { ... }

// Custom range
@include bp-between("md", "lg") { ... }

// Generic
@include bp($bp-md, "up") { ... }

Example

@use "@astriata/breakpoints" as *;

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

  @include bp-lg-up {
    font-size: 1.25rem;
  }
}