Libraries are higher level classes defined in a namespace.
For example, you could create a library named
theme in the file
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
and here is how you would use it in HTML code:
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.
By convention, user defined classes are stored in files having the file extension
.turbo, for example
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:
And here is how you would apply these classes to an actual button:
You can define utilities via raw CSS using the following syntax:
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.
Libraries may depend on other libraries.