Tachyons
v4.12.0
Type Scale Measure Line Height / Leading Tracking Font Weights Font Style Vertical Align Text Align Text Transform Text Decoration White Space Font Families

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

Previous

Text Align

Next

Text Decoration

Reference

MDN - Text Transform

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