Using responsive utility variants to build adaptive user interfaces.
There are 4 default breakpoints, inspired by common Oxygen Builder resolutions.
|Breakpoint prefix||Maximum width||CSS|
Each utility class in Oxyblock Core can be conditionally applied at different breakpoints, which makes it a piece of cake to build complex responsive interfaces without leaving your HTML.
To add a utility, but only have it take effect at a certain breakpoint, all you need to do is prefix the utility with the breakpoint name, for example
For Desktop, ob-grid-cols-4
For Tablet, ob-md-grid-cols-2
For Mobile, ob-sm-grid-cols-1
<div class="ob-grid ob-grid-cols-4 ob-md-grid-cols-2 ob-sm-grid-cols-1">