Queries

Customizing feature queries and breakpoints for your design system.

Introduction

In native CSS, it's not possible to reuse queries through variables, and this is where configuring queries comes into play, tokenizing media queries, feature queries, container queries, and even responsive breakpoints, and apply them with flexible syntax within the markup.

<div class="hide@<sm text:center@sm aspect:2/1@landscape">…</div>

Tokenizing queries also serves for simplification.

You wouldn't want to write full media queries within the markup.

<div class="aspect:2/1@media(orientation:landscape)">…</div>

Employ concise yet semantically meaningful markup.

<div class="aspect:2/1@landscape">…</div>

Basic usage

Add a responsive breakpoint

Create a responsive breakpoint, such as @tablet and @desktop.

export default {
    queries: {
        tablet: 1024,   // @tablet
        desktop: 1280   // @desktop
    }
}

Applies larger font sizes as the viewport width increases.

<div class="font:24 font:32@tablet font:48@desktop">…</div>

.font\:24 {
    font-size: 1.5rem
}
 
@media (min-width:1024px) {
    .font\:32\@tablet {
        font-size: 2rem
    }
}
 
@media (min-width:1280px) {
    .font\:48\@desktop {
        font-size: 3rem
    }
}

The responsive breakpoints can be flexibly used with operators, see the Responsive Design documentation.

Add a media query

Create a media query token, such as @landscape, to represent landscape orientation.

export default {
    queries: {
        landscape: 'media (orientation:landscape)' // @landscape
    }
}

When displayed in landscape orientation, the image is presented in a 2:1 aspect ratio.

<img class="aspect:2/1@landscape" … />

@media (orientation:landscape) {
    .aspect\:2\/1\@landscape {
        aspect-ratio: 2/1
    }
}

The landscape is the default token.

Add a feature query

Create a feature query token, such as @support-backdrop, to apply styles based on backdrop-filter support.

export default {
    queries: {
        support: {
            backdrop: 'supports (backdrop-filter:blur(0px))' // @support-backdrop
        }
    }
}

Applies translucent background only when backdrop-filter is supported.

<div class="bg:white/.8@support-backdrop">…</div>

@supports (backdrop-filter:blur(0px)) {
    .bg\:white\/\.8\@support-backdrop {
        background-color: rgb(255 255 255/.8)
    }
}

Reference

Default

View the full source code

Future

• Container Queries #334