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.
<div class="u-flex u-flex-column u-flex-row-md">
<!-- ... -->
❌ Do not target mobile devices with small selectors.
✅ Use un-suffixed variant for mobile and suffixed classes for larger screens.
<div class="u-none u-block-md u-flex-lg">...</div>
Modify Specific Viewport
To apply a class for a specific screen size, we can easily set this behavior using multiple declarations of the classes we need for each viewport.
As an example, let's say we want to position a
sticky div to be
relative only for
md. We can use achieve this with the class declarations shown above.
<div class="u-sticky u-relative-sm u-sticky-md">
<!-- ... -->
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.