Download Turbo CSS

You can also use Turbo CSS outside the Boomla Platform.

The simplest way to get started

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.