Skip to main content

Responsive Design

Core Concepts

Using responsive utility variants to build adaptive user interfaces.

There are 4 default breakpoints, inspired by common Oxygen Builder resolutions.

Breakpoint prefixMaximum widthCSS
xl1200px@media (max-width: 1200px) { ... }
lg991px@media (max-width: 991px) { ... }
md767px@media (max-width: 767px) { ... }
sm479px@media (max-width: 479px) { ... }

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 ob-{breakpoint}-grid-cols-2.

Code

<!-- 
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">
...
</div>