Responsive

Let be honest, the Tailwind CSS prefix for responsive classes declinaison is very well thought-out, thanks to Adam. When using Sailor CSS, the breakpoint name prefix is always before the class. You can configure the breakpoint prefix separator if you want.

Config

Breakpoints

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


$s-breakpoints: (
  xs: 0, // required
  sm: 576px, // mobile HD
  md: 768px, // tablet portrait
  lg: 1024px, // tablet landscape
  xl: 1200px, // desktop HD
  xxl: 1400px, // desktop wide
  xxxl: 1600px, // desktop extra wide
);
    

Classes name prefix separator

The prefix separator for all the responsive 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


$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.


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