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:
$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.
<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.