Responsive design

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

tip

read about Ravenbright CSS breakpoints in the following page

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 -->
</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>