Custom Syntax

Media Queries

Customizing media queries and breakpoints for your design system.

🚧This page is still under construction and some content may not be complete.

export default {
    mediaQueries: {
        mobile: 600,
        tablet: 1024,
        desktop: 1440,
        watch: '(max-device-width:42mm) and (min-device-width:38mm)'
    }
}

Apply your custom media queries:

<div class="font:24@mobile font:36@table font:48@desktop text:center@watch"></div>

Check out the responsive design to learn about responsive syntax.

Basic usage

🚧

Customization

🚧

Default

Breakpoint	Width	Devices
`4xs`	`360px`	iPhone 6, 7, 8, X, 11, 12 / Galaxy S8 / HTC One…
`3xs`	`480px`	Blackberry Passport / Amazon Kindle Fire HD 7…
`2xs`	`600px`	LG G Pad 8.3 / Amazon Kindle Fire …
`xs`	`768px`	Microsoft Surface / iPad Pro 9.7 / iPad Mini …
`sm`	`834px`	iPad Air 10.5 / iPad Pro 11 …
`md`	`1024px`	iPad Pro 12.9 / Microsoft Surface Pro 3 …
`lg`	`1280px`	Google Chromebook Pixel / Samsung Chromebook …
`xl`	`1440px`	Macbook Air 2020 M1 / MacBook Pro 15 …
`2xl`	`1600px`	Dell Inspiron 14 series …
`3xl`	`1920px`	Dell UltraSharp U2412M / Dell S2340M / Apple iMac 21.5-inch …
`4xl`	`2560px`	Dell UltraSharp U2711 / Apple iMac 27-inch …

View the full source code

Media Queries

Overview [sr-only]

Basic usage

Customization

Default