You can also use Turbo CSS outside the Boomla Platform.
Add the following script to your site (24kB minifized gzipped):
The following will happen:
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-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.
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).
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.