Text helpers
←Additonal helpers to make your live working with text easier and to control stuff like: alignment, font-family, weight and overflow.
SCSS:
_text-helpers.scss
Weight
.text-bold
makes text fat.
.text-thin
makes text slim. Might not apply to all typefaces.
Overflow
.text-clip
will NOT wrap over multiple lines but instead stay in one line and text-clip off with an elpisis. Most useful when in boxes or menus.
.text-keep
stays together no matter what.
.text-hyphen
will hyphenate. so that supercalifragilisticexpialidocious and honorificabilitudinitatibus and subdermatoglyphic are good to go.
↑ This is a horizontal ruler, by the way.
Font families
.text-sans
will use the sans serif font.
.text-serif
will use the serif font.
.text-mono
will use the monospaced font.
Inline elements
Mark the important parts within your text with the HTML element
Use the
<mark>
. Use the
<abbr>
element to give some hint for QWERTY words.
Text selection
.text-select-all
: select all text in this line with ONE click.
.text-select-no
: this text can't be selected.
.text-point-no
: no pointer events allowed. Similar to the one above but different.
Alignment
Usually text is left aligned.
.text-center
stays in the middle.
.text-right
is right aligned.