CSS framework + component library
built on Turbo CSS
Turbo UI is a CSS framework + component library built on Turbo CSS. It is designed to support copy-pasting code into your websites.
Turbo UI uses unconventional class names, like u1.btn. This is the class name that would appear in your HTML code, like so:
<div class="t1 u1.btn">..</div>
The dot (.) in the middle is totally valid, the only caveat is that it needs to be escaped in CSS, which the Turbo CSS compiler automatically does for you. The actual CSS definition looks like this:
.t1.u1\.btn { ... }
The u1 in u1.btn is the library name. Your first impression may be that this is ugly, why the hell would anyone want to prefix every class name with a prefix?
First, Turbo CSS is a utility first language, meaning that most of your classes will be base utility classes, not library classes. For this reason, you will rarely need to use the library prefix, thus it is less of a concern.
Second, this really helps in maintaining a project. Sure, you have to write 3 additional characters occasionally (wooo!), but you will end up having a much better documented codebase. Traditionally, you might encounter the class name foo and have no idea where it might be defined. The library prefix serves as a namespace, it tells that the u1.btn class is defined in the u1 library.
Third, it is easier to go the other way, to find out if a class definition is used or not. Say you create an effects library and you want to find out if the bounce class defined in the effects library is used anywhere or not. You can just search your codebase for effects.bounce.
Fourth, it helps with evolving your codebase. We always keep learning about how to best approach any problem. Design is no different. Every widely used CSS framework that came before Turbo has several versions out there. This approach lets you easily redesign your CSS library without breaking existing code. Just create a new library (a new .turbo file and start adding code.
Save this file in your Turbo library folder as lib.turbo and you will be able to use the above code class as lib.code.
In fact, I've done just that. Take a look at the source if you want, the above code block uses the lib.code class with some additional margin utilities. The margins are best to define locally as they are affected by the context.
(Plus you will also see an additional namespace prefix which is added during rendering. That's optional.)
You can use Turbo CSS in defining Turbo library classes. You can also define classes via raw CSS if you want, so you have complete freedom. For example, I've found I'm often defining SVG background images via raw CSS rules - but not much else.
See the Turbo CSS library syntax for more details.
The u1, u2, ..., uN library names are reserved successive versions of Turbo UI. Do not extend these libraries with your own class names as we may introduce them for a different purpose in the future. If you invent new class names, create your own library for them.
Note that both the u1 library and all classes defined in the u1 library must always be available for the Turbo compiler. To make sure this is the case, the Turbo CSS compiler ships with the default u1 library built-in.
You can override the defaults on a class-by-class basis but if you fail to do so, the defaults will always be available. This is to make sure Turbo can deliver on the it just works promise with greater probability.
Turbo UI makes it extremely easy to build your own theme / design system:
Edit the styles in the library u1.turbo.
Done.
For example, you might want to make all your buttons rounded. Great, that's a single change.