Viewports

Viewport tokens define breakpoints tied to the device screen sizes at which components behavior or rendering may change.

Arcade is following mobile-first approach. This means that we treat the smallest viewport size as a default one. Other viewports are used to override the mobile styles.

There is no native support for custom media queries in CSS so we expose them by using PostCSS custom media plugin.

In case you still want to make an exception for mobile viewport, we still expose the small screen media query.