Responsive design
Ravenbright CSS library offers responsive design features in its utility classes.
tip
read about Ravenbright CSS breakpoints in the following page
Explore breakpointsYou 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 -->
</article>
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<article
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
</small>
<a
href=""
class="btn btn-sm w-fit white bg-green-600 gap-3"
role="button"
aria-label="Try the demo">
<svg></svg>
Try the demo
</a>
</article>