Media Queries

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-slate">
  <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, such as Tailwind, Yumma CSS takes a mobile-first approach. It applies the default styles to small screens and allows you to use breakpoints to override them for larger screens.

Don’t use breakpoints to apply styles to mobile devices. Use them to style small screens, then override for larger screens.

<h1 class="sm:ta-c ...">Good evening!</h1>
<h1 class="ta-c sm:ta-l ...">Good evening!</h1>

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

Prefix	Min width
sm	@media (width >= 40rem) // 640px
md	@media (width >= 48rem) // 768px
lg	@media (width >= 64rem) // 1024px
xl	@media (width >= 80rem) // 1280px
xxl	@media (width >= 96rem) // 1536px