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 prefix	Maximum width	CSS
xl	1200px	@media (max-width: 1200px) { ... }
lg	991px	@media (max-width: 991px) { ... }
md	767px	@media (max-width: 767px) { ... }
sm	479px	@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>