User defined utilities


There is a special syntax for creating user-defined utilities.

For example, here is how you would define the utility class foo:

t1 .foo { // list applied utilities in the body color-blue font-16 }

Inside the body of the definition, you can use Turbo utility classes just like when applying styles to HTML elements. You can use other user-defined utilities as well.

Turbo files

User defined utilities are typically stored in separate files. These files shall have the file extension .turbo, for example theme.turbo.

Combining selectors with user-defined utilities

You can combine selectors with user-defined utility classes. (This is extremely powerful.)

For example, you may define separate classes for medium and large buttons, then proceed to show the large button on mobile screens (to support fat-fingers) and the medium button on desktop screens where the mouse can easily target smaller areas.

Here is how you would define these classes:

t1 .btn-m { font-16 line-24 color-white bg-c-blue px-16 } .btn-l { font-24 line-36 color-white bg-c-blue px-24 }

And here is how you would apply these classes to an actual button:

<button class="t1 btn-l w12:btn-m">Button</button>

Custom CSS

You can define utilities via raw CSS using the following syntax:

t1 @css .customGrid { display: -webkit-grid; -webkit-grid-columns: 5px 10px; -webkit-grid-rows: 20px 5px; }

This will define the utility class customGrid that you can also use when defining higher level utilities.