Breakpoint Tokens

The (v1) Design Tokens are deprecated and will no longer receive updates or support. This documentation will remain available for reference purposes only.
Please refer to our newest Design Tokens documentation for the latest standards and guidelines.
Design Tokens: Getting Started

Tokens

Usage

Design Tokens can not be used directly in a Media Query.

Don’t do this 

@media (min-width: var(--sense-breakpoint-md)) {
    .container {
        max-width: 1024px;
    }
}

Do this instead

You could define your Media Queries using the values above as a reference. 

@media (min-width: 1024px) {
    .container {
        ...
    }
}

Use a CSS pre-processor like SASS to generate Media Queries using our Breakpoints. 

@media (min-width: $sense-breakpoint-md) {
    .container {
        ...
    }
}


/* compiled output: */
@media (min-width: 1024px) {
     .container {
        ...
    }
}

Search