Responsive Design

Breakpoints

By default, all base utility classes can be used with responsive variants, making it easier to create responsive designs.

You can use breakpoints variants such as sm:*, md:*, lg:*, xl:* and xxl:* to apply specific rules to different screen sizes. For example:

Try resizing your browser window to see how the card changes.

This is a small screen.

This is a medium screen.

This is a large screen.

This is an extra large screen.

This is double extra large screen.

<div class="bg-indigo-1 p-4 rad-1 ta-c tc-lead">
  <p class="bg-white d-b p-4 rad-1 sm:d-none">This is a small screen.</p>
  <p class="bg-white d-none md:d-none p-4 rad-1 sm:d-b">This is a medium screen.</p>
  <p class="bg-white d-none lg:d-none md:d-b p-4 rad-1">This is a large screen.</p>
  <p class="bg-white d-none lg:d-b p-4 rad-1 ta-c xl:d-none">This is an extra large screen.</p>
  <p class="bg-white d-none p-4 rad-1 ta-c xxl:d-b">This is double extra large screen.</p>
</div>

Mobile-first approach

Like other frameworks, like Tailwind, Yumma CSS uses a mobile-first approach. In other words, the default styles are applied to small screens, and you can use breakpoints to override them for larger screens.

Don’t use breakpoints to apply styles only to mobile devices.

<h1 class="sm:ta-c ...">Library</h1>

Instead, use them to apply styles to small screens, and then override them for larger screens.

<h1 class="ta-c sm:ta-l ...">Library</h1>

Here’s a reference for all the breakpoints available in Yumma CSS:

Designation	Minimum width
sm	40rem (640px)
md	48rem (768px)
lg	64rem (1024px)
xl	80rem (1280px)
xxl	96rem (1536px)