core-concepts

Responsive Design

Using responsive utility classes to build adaptive user interfaces.

Overview

@purposeUI utility classes can be applied conditionally at different breakpoints, making it effortless to build responsive interfaces—right from your HTML.

Defaults

Breakpoint	Screen Width	Media Query
sm	640px	@media (min-width: 640px) { ... }
md	768px	@media (min-width: 768px) { ... }
lg	1024px	@media (min-width: 1024px) { ... }
xl	1280px	@media (min-width: 1280px) { ... }

HTML Usage

To apply a utility class at a specific breakpoint, simply prefix the class with the breakpoint name followed by a colon (:):

<!-- Display 'block' by default, then flex starting at the 'md' breakpoint -->

<div class="block md:flex">...</div>

CSS Usage

Using the provided media queries in custom SCSS files:

// Display 'block' by default, then flex starting at the 'md' breakpoint

@use "../mixins" as *;

div {
  display: block;

  @include mq(md) {
    display: flex;
  }
}