w-16are indeed functions, accepting arguments. The CSS is actually generated by calling these utility functions and passing them the provided arguments.
bg-c-blueto make the background blue on mobile. All the bigger screen sizes will use this setting, unless you override them at larger breakpoints. For example, to make it red on screens at least 640px wide, use the
w6:responsive selector defines that this setting shall only apply to screens above 640px.
w6:for 640px and above,
w7:for 768px and above,
w10:for 1024px and above,
w12:for 1280px and above.
w6:hover:bg-c-red-700class to provide different hover effects on different screen sizes. (Resize the demo!)
/, you could change an element's background color if its parent is hovered.
+, you could change an element's background color if its previous-sibling is hovered.
hover://bg-c-bluewill only apply if the element's grand-parent is hovered. This may sound exotic at first, but if you are going to use Turbo, trust me, you are going to use combinators a lot. They open up a whole new world.
btn-mclass for a medium sized button. Now, I want to show it on desktop only, because on mobile, I want to show a large button
btn-l. Thus, what I want to write is
btn-l w10:btn-m, where
w10:makes it only apply to large screens.
btn-mclass is not necessarily a single class. It may have a hover state defined, may have various definitions for different screen sizes, styles applied to the
::beforepseudo element, etc..
btnclass may look like:
t1class, it has many purposes. One of them is namespacing. All generated classes include the
t1namespace class, thus if your project is not using it, you can use Turbo on your project without accidentally breaking anything. (I haven't found any CSS framework that is using it.)
NAMESPACE-p-16. As it is quite unpleasant to write, this approach is only recommended when the compiler is used on the server-side, thus the namespace can be automatically injecteded.
t1class is used to apply the base styles to every element, one-by-one.
t1-allclass that lets you apply the reset to the entire subtree of an element, if you choose to. Adding it to the HTML element would be akin to using a global CSS reset.
t1class for that purpose. Instead, there is a
t1-startclass which you should use once at the root of any subtree controlled by Turbo CSS.
@self selector used by Turbo. We will have to do more explicit testing on that.