Arbitrary Styling

Sometimes you may need to go beyond the defaults and apply arbitrary styles and one-off utilities.

Arbitrary values

For one-off utility values that don't belong in your project configuration, Mojo allows you to implement them dynamically.

For every utility, you can use parentheses to generate an arbitrary value on the fly. for example if you want a font-size of 40px:



<div class="--text-(40px)**">
    ...
</div>

Which will give you this CSS:



.text-\(40px\) {
    font-size: 40px
}
→
In cases where values include spaces, use underscores as separators.
For instance: "bg-p-(35px_10px)".
→
CSS variables are also supported, for example: "text-(var(--name))".

Arbitrary CSS

For those times when you need absolute control over your designs, Mojo allows you to directly use raw CSS properties and selectors within your HTML.

Properties

Use CSS properties directly within your HTML, just as you would with any other utility.



<div class="p-relative --scroll-margin:0px** ...">
    ...
</div>

In addition, these properties can be used in variants such as hover, md, and ...



<div class="..." -- hover="padding:12px_6px ..." ** >
    ...
</div>
→
In cases where property values include spaces, use underscores as separators.
For instance: "border:1px_solid_red".
→
CSS variables are also supported, for example: "border:var(--name)".
→
No semicolon required after each css property. Separate them with spaces.

Selectors

When HTML limitations restrict complex CSS selectors, Mojo's arbitrary selectors step in, enabling you to harness the power of raw CSS within your markup while leveraging Mojo's utilities.

Simply use the _="" attribute and specify the desired selectors within parentheses:



<ul -- _="(.active) bg-c-red text-c-white" ** >
    <li> ... </li>
    <li class="active"> ... </li>
    <li> ... </li>
</ul>
→
Arbitrary selectors only affect the element they're applied to and its child elements. They cannot target elements outside of the parent element's scope.

Using this as selector will taregt the element itself:



<ul -- _="(this) bg-c-red" ** >
   This element has a red background
</ul>

Using & at the start, you can target the element's pseudo elements and ...



<ul -- _="(&:hover) bg-c-blue" ** >
   This element has a blue background when hovered
</ul>

You can also target multiple selectors:



<ul -- _="(li) ... (li:hover) ... (li:hover > a) ..." ** >
    <li> ... </li>
    <li> ... </li>
    <li> ... </li>
</ul>

Media queries are also supported using < directive at the start:



<ul -- _="(<@media(orientation:landscape)) bg-c-blue" ** >
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
</ul>

With the same logic, child elements can be styled based on distant parents even outside the direct parent's scope using curly braces {}:



<section class="hero">
  <ul -- _="(<.hero:hover {li.active}) text-c-white" ** >
    <li> ... </li>
    <li class="active"> ... </li>
    <li> ... </li>
  </ul>
</section>