Libraries are higher level classes defined in a namespace.

For example, you could create a library named theme in the file theme.turbo.
You could define the btn class in it, which you could access via the class name theme.btn from outside the library.

Here is how you could define the btn class:

t1 .btn { px-16 py-4 bg-c-blue color-white }

and here is how you would use it in HTML code:

<div class="t1 theme.btn">..</div>

When defining the class name btn, you can use Turbo utility classes just like when applying styles to HTML elements. You can also use other user-defined utilities, they are first-class citizens.

Turbo files

By convention, user defined classes are stored in files having the file extension .turbo, for example theme.turbo.

Combining selectors with user-defined classes

You can combine selectors with user-defined classes just like with any of the base utilities.

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 theme.btn-l w12:theme.btn-m"> Button </button>


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; }

Classes defined this way are also first-class citizens, meaning you can use them in other user defined classes and also combine them with selectors.


Library dependencies

Libraries may depend on other libraries.