When applying classes viewport supported classes, note that the framework assumes you are designing for a mobile device first. This means that applying u-none on some given div will apply for all screen sizes.
Design For Mobile First
If you then set u-flex-row-md on the div, it will then apply the row flexbox layout starting at the md breakpoint and higher.
Note that not all classes support application by viewport. You can see if a given group of classes support this by checking if the documentation contains a 'Responsive' section detailing how to use the classes with different viewports.
You can now modify the breakpoints used within the framework just by modifying the configuration when importing Cirrus.
Adding/Overriding More Breakpoints
To add a breakpoint pair, add a new with entry in the extend configuration and add the corresponding breakpoint pair. Note that this can also be used for overriding existing breakpoints.
@use "cirrus-ui/src/cirrus-ext" as * with ($config:(extend:(breakpoints:(// 1. Add the width of the new breakpointwidths:('2xl':2506px,),// 2. Add the breakpoint pairbreakpoint-pairs:('2xl':'lg',)))),);
Removing Default Breakpoints
To remove the default breakpoints, just set the settings to null. Note that this may break some existing builds, so be sure to resolve them and add in the corresponding breakpoints as needed.
@use "cirrus-ui/src/cirrus-ext" as * with ($config:(breakpoints:(widths:null,breakpoint-pairs:null,)),);