Tachyons

Docs

/

Typography

/

Text Transform

Version
2.1.0
Filesize
210 B
Declarations
24
Selectors
20
Max. Specificity Score
10
Size of Avg. Rule
1.2

Use these classes to set the capitalization of text.

If you use the uppercase class, don't forget to combine it with tracking to make the text more readable.

Examples

uppercase

.ttu

LOWERCASE

.ttl

capitalize multiple words

.ttc

TEXT Transform none

.ttn

Uppercase with tracking

.caps
src/_text-transform.css

/*

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


Docs

General

Debugging Images