You can also use Turbo CSS outside the Boomla Platform.
Add the following script to your site (24kB minifized gzipped):
The following will happen:
the Turbo CSS JavaScript compiler will be added to the page,
it will automatically compile all Turbo classes from elements that have the t1 class and populate a <style> tag with the resulting CSS,
watch the DOM for changes (via MutationObserver) and recompile if required,
add the Turbo CSS base styles to the document head, only affecting elements with the t1 and t1-start classes, plus the entire subtrees of elements with the t1-all class (you don't need this if you add the t1 class to all elements).
configure the meta viewport tag.
Usage:
Add the t1-start class to any subtree-roots that Turbo CSS shall control - most often the html element (this will reset inheriting properties, like the font-size).
Add the t1 class to every element which you want Turbo CSS to design,
alternatively, you can add the t1-all class to any subtree-roots that Turbo CSS has exclusive control over, in which case you don't need to use the t1 class on elements that you don't want to apply any utilities to.
Add Turbo CSS classes either on the server or in the browser.
If you want to use non-Turbo classes on the same element, add a space separated semicolon ( ; ) after the Turbo expression, as in <div class="t1 p-8 ; non-turbo">.
To support libraries, define the window.turboLoadLibrary(name: string): string function that returns the library sources by their names.