Text
Utilities and variable classes for customizing text and font properties.
- Source file
- src/css/text.css
- View on GitHub
- https://github.com/pmbrown/ming-css/blob/main/src/css/text.css
Included with:
- ming.css
- ming.min.css
- ming.mono.css
- ming.mono.min.css
Fixed utilities (anchor)
Text wrap (anchor)
.text-balance
The quick brown fox jumped over the lazy dog.
.text-pretty
The quick brown fox jumped over the lazy dog.
NB. Text wrap pretty currently doesn't work with Firefox.
Text alignment (anchor)
.text-left
The quick brown fox jumped over the lazy dog.
.text-right
The quick brown fox jumped over the lazy dog.
.text-center
The quick brown fox jumped over the lazy dog.
Links (anchor)
.decoration-none
Decoration none
.text-link
Text link
Variable utilities (anchor)
Font family (anchor)
<p class="font-family" style="--ff: Georgia;">
The quick brown fox jumped over the lazy dog.
Font sizes (anchor)
<p class="font-size" style="--fs: 1.25rem;">
The quick brown fox jumped over the lazy dog.
Font weights (anchor)
<p class="font-weight" style="--fw: bold;">
The quick brown fox jumped over the lazy dog.
Line-height (anchor)
<p class="line-height" style="--lh: 1.2;">
The quick brown fox jumped over the lazy dog.
Text-transform (anchor)
<p class="text-transform" style="--tt: uppercase;">
The quick brown fox jumped over the lazy dog.
Font-variant (anchor)
<p class="font-variant" style="--fv: small-caps;">
The quick brown fox jumped over the lazy dog.
Letter and word spacing (anchor)
The .text-spacing utility combines letter-spacing and word-spacing in one class.
Letter spacing
<p class="text-spacing" style="--ls: 0.25em;">
The quick brown fox jumped over the lazy dog.
Word spacing
<p class="text-spacing" style="--ws: 0.125em;">
The quick brown fox jumped over the lazy dog.
Both
<p class="text-spacing" style="--ls: 0.125em; --ws: -0.125em;">
The quick brown fox jumped over the lazy dog.