Text Transform
Use these classes to set the capitalization of text.
If you use the uppercase class, don’t forget to combine it with a tracking utility from the letter-spacing module.
Use these classes to set the capitalization of text.
If you use the uppercase class, don’t forget to combine it with a tracking utility from the letter-spacing module.
<p class="ttu tracked">Uppercase</p>
Uppercase
<p class="ttl">LOWERCASE</p>
LOWERCASE
<p class="ttc">Capitalize</p>
capitalize multiple words
/*
TEXT TRANSFORM
Docs: http://tachyons.io/docs/typography/text-transform/
Base:
tt = text-transform
Modifiers
c = capitalize
l = lowercase
u = uppercase
n = none
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.ttc { text-transform: capitalize; }
.ttl { text-transform: lowercase; }
.ttu { text-transform: uppercase; }
.ttn { text-transform: none; }
@media (--breakpoint-not-small) {
.ttc-ns { text-transform: capitalize; }
.ttl-ns { text-transform: lowercase; }
.ttu-ns { text-transform: uppercase; }
.ttn-ns { text-transform: none; }
}
@media (--breakpoint-medium) {
.ttc-m { text-transform: capitalize; }
.ttl-m { text-transform: lowercase; }
.ttu-m { text-transform: uppercase; }
.ttn-m { text-transform: none; }
}
@media (--breakpoint-large) {
.ttc-l { text-transform: capitalize; }
.ttl-l { text-transform: lowercase; }
.ttu-l { text-transform: uppercase; }
.ttn-l { text-transform: none; }
}