You can easily configure Sailor CSS for managing your media queries.
All the breakpoints in the map
$s-breakpoints in your
config.scss file will be automatically available for all responsive utility classes name.
// 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'.
In the following example, the grid layout will be 1 colum on
sm, 2 columns on
md and 4 columns on
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
If you use the ":" class name prefix with PurgeCSS, you will need this custom extractor for the breakpoints prefix.
If you use this with Overdog for Craft CMS, it's part of the built-in Webpack config.