Using in an existing codebase

 

Turbo was designed to let you use it within an existing codebase. No huge up-front migration is required. As Turbo has zero side-effects, you can add it to your code-base right now and start using it.

Seriously, I encourage you to do this right away:

  • Go find the all-in-one compiler, open it in a browser window so that you can copy the JavaScript code,

  • Head to your website, open developer tools in your browser (F12 on Windows, Cmd+Option+J on Mac) head to the Console tab, paste the compiler JavaScript code and press enter.

     

Nothing will happen. And that's the cool thing about it. It has added the base styles to your website and it didn't affect your current codebase. Once you have confirmed this, you can move on to the next step:

  • Find a Turbo UI example snippet that you like, copy it, then

  • paste it into your own site.

It should just work. The Turbo CSS compiler you have injected above will pick up the changes, automatically compile all the necessary classes in the browser and inject the generated CSS into the head section of the page.

It is not bulletproof as your own site may define CSS classes that prevent Turbo CSS from working properly but it has been tested to work well with the most popular CSS frameworks. If this happens, you can most likely extend the t1 and t1-all classes with a custom reset to undo the effects of your CSS framework. Alternatively, the specificity of Turbo CSS classes will need to be increased. If you do run into such an issue, please get in touch so that we can understand it and fix it.