Mojo introduces attribute variants.
Attribute variants are used to apply styles to elements based on their state, screen size or theme color.
For instance, if you want to style the element on hover state, you can apply the variant to the element as an attribute and provide the utilities as a string of space-separated class names, for example:
<div class="..." -- hover="bg-c-blue..."** >
This element has a blue background when hovered
</div>
Mojo is different from other frameworks.
Instead of having to repeat the variant name and write classes like hover:text-blue-500 hover:bg-red-500, you can use the hover="..." attribute once and write the utilities as a string of class names separated by spaces, making your code more concise and easier to read.
This approach allows you to reduce the amount of code and make it more readable, understandable and maintainable.
State variants are used to control the styles of elements in different states, such as when an element is hovered over, focused on, or active.
Pseudo-class variants allow you to apply styles based on user interaction or state changes.
| Variant | CSS Rule |
|---|---|
| hover | ${utl}:hover |
| focus | ${utl}:focus |
| active | ${utl}:active |
| first | ${utl}:first-child |
| last | ${utl}:last-child |
| even | ${utl}:nth-child(even) |
| odd | ${utl}:nth-child(odd) |
| focus-within | ${utl}:focus-within |
| visited | ${utl}:visited |
| not-first | ${utl}:not(:first-child) |
| not-last | ${utl}:not(:first-child) |
| disabled | ${utl}:disabled |
| checked | ${utl}:checked |
| not-checked | ${utl}:not(:checked) |
| valid | ${utl}:valid |
| invalid | ${utl}:invalid |
| optional | ${utl}:optional |
| read-only | ${utl}:read-only |
| focus-visible | ${utl}:focus-visible |
| indeterminate | ${utl}:indeterminate |
| required | ${utl}:required |
| empty | ${utl}:empty |
Pseudo element variants refer to the styles that can be applied to the various parts of an element.
| Variant | CSS Rule |
|---|---|
| before | ${utl}:before |
| after | ${utl}:after |
| selection | ${utl}::selection |
| first-letter | ${utl}::first-letter |
| first-line | ${utl}::first-line |
Parent variants in Mojo allow you to style child elements based on the state of their parent element.
For example, the parent-hover variant will apply styles to the child elements when the parent is hovered over.
<div -- parent ** class="...">
<div class="..." -- parent-hover="bg-c-blue"** >
Child
</div>
</div>
| Variant | CSS Rule |
|---|---|
| parent-hover | [parent]:hover ${utl} |
| parent-focus | [parent]:focus ${utl} |
| parent-active | [parent]:active ${utl} |
| parent-visited | [parent]:visited ${utl} |
Sibling variants in Mojo allow you to style an element based on the state of their sibling element.
For example, the sibling-hover variant will apply styles to the element when the sibling is hovered over.
<div -- sibling ** class="...">
Hover me
</div>
<div class="d-none ..." -- sibling-hover="d-block"** >
Hey!
</div>
| Variant | CSS Rule |
|---|---|
| sibling-hover | [sibling]:hover ~ ${utl} |
| sibling-focus | [sibling]:focus ~ ${utl} |
| sibling-checked | [sibling]:checked ~ ${utl} |
Like state variants, Mojo also offers responsive variants which allow developers to style elements based on the screen size.
The syntax for responsive variants in Mojo is similar to state variants and uses the breakpoint abbreviation as a prefix.
For instance, if you want to apply styles to devices with medium-sized screens and higher, you can use the md="..." variant.
<div class="grid" -- md="col-3"** >
3 columns in medium-sized screens and above
</div>
To learn more about responsive variants and see a more comprehensive guide, check out the Responsive Design documentation.
Mojo offers theme variants, allowing developers to style elements differently based on their desired theme.
By using variants like dark="", elements can be quickly adapted to fit the look and feel of dark mode.
<div class="text-c-black" -- dark="text-c-white"** >
This element has a white text color in dark mode.
</div>
Mojo offers limitless possibilities when it comes to themes, as it allows you to create and utilize as many color themes as desired. For a more in-depth understanding, check out the Color Themes documentation.
Using rtl and ltr variants you can seamlessly adapt your designs to both right-to-left and left-to-right layouts.
جادویی بودن یک انتخاب است!
Being magical is a choice!
<div class="d-flex a-items-center">
<div class="w-4 h-4 rounded-full bg-c-primary"></div>
<p -- ltr="ml-2" ** -- rtl="mr-2 font-tahoma" **> ... </p>
</div>
To ensure proper adaptation of multi-directional layouts, explicitly set the dir attribute in your markup to either dir="ltr" or dir="rtl".