Breakpoints

You can easily configure Sailor CSS for managing your media queries.

Configuration

All the breakpoints in the map $s-breakpoints in your config.scss file will be automatically available for all responsive utility classes name.

config.scss

// You can modify the values as you wish
$s-breakpoints: (
   xs: 0,
   sm: 576px,
   md: 768px,
   lg: 1024px,
   xl: 1200px,
   xxl: 1400px,
   xxxl: 1600px,
),

How to use

You only add the breakpoint name as the prefix of your class in your markup. Always start use it with the mobile-first approach.

In the following example, on sm, the padding bottom will be 'quarter'. On md and up, it will be 'full'.

pb-quarter md:pb-full

In the following example, the grid layout will be 1 colum on sm, 2 columns on md and 4 columns on xxl

grid-col-1 md:grid-col-2 xxl:grid-col-4

Prefix separator

You have the possibility to change the separator of the prefix used in front of the layout and utility classes. Default is ":".

The result classes will be md:grid-col-2. If you change it for "--", the result classes will be md--grid-col-2

config.scss

$s-responsive-prefix-separator: ":",

PurgeCSS extractor

If you use the ":" class name prefix with PurgeCSS, you will need this custom extractor for the breakpoints prefix.

Extractor : [A-Za-z0-9-_:/]+/g

If you use this with Overdog for Craft CMS, it's part of the built-in Webpack config.