Skip to main content

Responsive design

Ravenbright CSS library offers responsive design features in its utility classes.


read about Ravenbright CSS breakpoints in the following page

Explore breakpoints

You can start using the responsive utility classes with the following syntax:

<!-- Default syntax -->
{breakpoint}-{utility class name}
<!-- Example -->
<article class="xs-w-100 lg-w-75 xs-m-b-8 md-m-b-0">
<!-- Insert content here -->

Below is the comprehensive example with CTA section. Explore 🎮 the responsive feature with your browser's inspect tool.

Try Ravenbright in your browser

Play around with Ravenbright CSS on CodepenTry the demo
class="bg-yellow-50 dark-bg-black xs-w-100 md-w-50 lg-w-75 radius-md all-center p-y-8 p-x-7 gap-2 w-100%">
<h3 class="h6 font-bold m-b-2">Try Ravenbright in your browser</h3>
<small class="m-b-2">
Play around with Ravenbright CSS features on Codepen
class="btn btn-sm w-fit white bg-green-600 gap-3"
aria-label="Try the demo">
Try the demo