Devices

Slate provides a set of common device sizes from @xs to @xxl.

@xxl Infinity

@xl 1800px

@l 1200px

@m 992px

@s 768px

@xs 576px

Visibility

Use only@device or not@device to target one device size. The elements below will demonstrate device targeting with each class.

only@xs

not@xs

only@s

not@s

only@m

not@m

only@l

not@l

only@xl

not@xl

only@xxl

not@xxl

To target a device or greater use {block|flex}@device to toggle the display property at the desired device level. Using block@m will set the display to block at the medium breakpoint and greater.

block@xs or flex@xs

block@s or flex@s

block@m or flex@m

block@l or flex@l

block@xl or flex@xl

block@xxl or flex@xxl

Modify Devices

CSS Variables are provided for each device if you would like to use them within your other css properties.

:root {
--device-xs: 576px;
--device-s: 768px;
--device-m: 992px;
--device-l: 1200px;
--device-xl: 1800px;
--device-xxl: auto;
}

CSS Variables cannot modify media queries. To change the device sizes you must create a slate.config.js file and redefine the devices.

module.exports = {
'device-xs': '576px',
'device-s': '768px',
'device-m': '992px',
'device-l': '1200px',
'device-xl': '1800px',
'device-xxl': 'auto',
'device-xs-container': '540px',
'device-s-container': '720px',
'device-m-container': '960px',
'device-l-container': '1140px',
'device-xl-container': '1640px',
'device-xxl-container': 'auto'
}