Utility Modifiers

Use utility modifiers like media query modifiers to override a specific base utility based on the user’s viewport, or pseudo class modifiers like hover to apply the cursor hover to a specific element.

Media query modifiers

Responsive breakpoints let you create flexible interfaces. These breakpoints give you precise control over how your layout looks on different devices.

Breakpoints

Here’s how breakpoints are defined:

_breakpoints.scss

$yma-breakpoints: (
  "sm": 640px,
  "md": 768px,
  "lg": 1024px,
  "xl": 1280px,
  "xxl": 1536px,
);

Use responsive breakpoints such as sm:*, md:*, lg:*, xl:* and xxl:* to apply specific rules to different screen sizes. For example:

<div class="cnt mx-auto p-4">
  <div class="d-g g-4 gtc-1 lg:gtc-4 md:gtc-3 sm:gtc-2">
    <div>...</div>
  </div>

  <div class="d-g g-4 gtc-1 lg:gtc-4 md:gtc-3 sm:gtc-2">
    <div>...</div>
  </div>

  <div class="d-g g-4 gtc-1 lg:gtc-4 md:gtc-3 sm:gtc-2">
    <div>...</div>
  </div>

  <div class="d-g g-4 gtc-1 lg:gtc-4 md:gtc-3 sm:gtc-2">
    <div>...</div>
  </div>
</div>

---

Pseudo modifiers

Hover variants

You can use the h: modifiers in order to target the :hover function across the entirety of the Yumma CSS utility classes.

For instance, if you want to apply the bg-cyan class on hover, you can use the h:bg-cyan class.

Move the mouse over the button to see how the background color changes.

<button class="bg-cyan fw-600 h:bg-d-cyan-2 px-5 py-1 rad-8 tc-white c-p">Subscribe</button>

In this example, we have a button component using the :hover utility class, which in this context is being used to change the bg-cyan to bg-d-cyan-2 when the user hovers the mouse over the element.