Skip to content
Support Yumma CSS by starring us on GitHub!

Modifiers

Override base utilities based on user activity using utility modifiers.

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-indigo class on hover, you can use the h:bg-indigo class.

Try moving the mouse over the button to see how the background color changes.
<button class="b-0 bg-indigo fw-600 h:bg-d-indigo-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-indigo to bg-d-indigo-2 when the user hovers the mouse over the element.