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.

Examples

<p class="ttu tracked">Uppercase</p>

Uppercase

<p class="ttl">LOWERCASE</p>

LOWERCASE

<p class="ttc">Capitalize</p>

capitalize multiple words

tachyons-text-transform

v4.0.6 173 B
Declarations
16
Selectors
16
Max. Specificity Score
10
Size of Avg. Rule
1
src/_text-transform.css

/*

   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; }
}