Examples
uppercase
.ttu
LOWERCASE
.ttl
capitalize multiple words
.ttc
TEXT Transform none
.ttn
Uppercase with tracking
.caps
/*
TEXT TRANSFORM
*/
.ttc { text-transform: capitalize; }
.ttl { text-transform: lowercase; }
.ttn { text-transform: none; }
.ttu { text-transform: uppercase; }
.caps {
text-transform: uppercase;
letter-spacing: .15em;
}
@media (--breakpoint-not-small) {
.ttc-ns { text-transform: capitalize; }
.ttl-ns { text-transform: lowercase; }
.ttn-ns { text-transform: none; }
.ttu-ns { text-transform: uppercase; }
.caps-ns {
text-transform: uppercase;
letter-spacing: .15em;
}
}
@media (--breakpoint-medium) {
.ttc-m { text-transform: capitalize; }
.ttl-m { text-transform: lowercase; }
.ttn-m { text-transform: none; }
.ttu-m { text-transform: uppercase; }
.caps-m {
text-transform: uppercase;
letter-spacing: .15em;
}
}
@media (--breakpoint-large) {
.ttc-l { text-transform: capitalize; }
.ttl-l { text-transform: lowercase; }
.ttn-l { text-transform: none; }
.ttu-l { text-transform: uppercase; }
.caps-l {
text-transform: uppercase;
letter-spacing: .15em;
}
}