Классы для работы с текстом

В качестве примера адаптивности используется модификатор -tablet.

Цвет Colors module

• t-red ↝ color: $red См. таблицу цветов

Размеры

• t120 ↝ font-size: 1.2rem
• t120-tablet ↝ font-size: 1.2rem for tablet
• t120em ↝ font-size: 1.2em
• t30px ↝ font-size: 30px

«Сброс»

• t-normal ↝ font-weight: normal; font-style: normal; text-decoration: none;

Полужирность

• t-bold, t-bold700 ↝ font-weight: bold
• t-bold-normal, t-bold400 ↝ font-weight: normal
• t-bold-bolder ↝ font-weight: bolder
• t-bold-light ↝ font-weight: lighter
• t-bold100[200..900] ↝ font-weight: 100[200..900]

Оформление

• t-italic ↝ font-style: italic
• t-underline ↝ text-decoration: underline
• t-strike ↝ text-decoration: line-through
• t-decoration-none ↝ text-decoration: none

Регистр

• t-small-caps ↝ font-variant: small-caps
• t-capitalize ↝ text-transform: capitalize
• t-upper ↝ text-transform: uppercase
• t-lower ↝ text-transform: lowercase

t-small-caps Sample Text

t-capitalize Sample Text

t-upper Sample Text

t-lower Sample Text

Выравнивание

• t-right ↝ text-align: right
• t-left ↝ text-align: left
• t-center ↝ text-align: center
• t-justify ↝ text-align: justify
• t-right-tablet ↝ text-align: right for tablet @media
• t-left-tablet ↝ text-align: left for tablet @media
• t-center-tablet ↝ text-align: center for tablet @media
• t-justify-tablet ↝ text-align: justify for tablet @media

Переносы

• t-nowrap ↝ white-space: nowrap
• t-nowrap-tablet ↝ white-space: nowrap for tablet @media
• t-wrap ↝ white-space: normal
• t-wrap-tablet ↝ white-space: normal for tablet @media
• t-pre-wrap ↝ white-space: pre-wrap
• t-break-word ↝ word-wrap: break-word
• t-break-all ↝ word-break: break-all
• t-break-keep ↝ word-break: keep-all
• t-hyphens ↝ hyphens: auto
  Перенос слов зависит от используемого браузера и установленных словарей.

Шрифты (Safe fonts)

• t-georgia ↝ font-family: Georgia, "Times New Roman", serif
• t-palatino ↝ font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif
• t-times ↝ font-family: "Times New Roman", serif
• t-arial ↝ font-family: Arial, Helvetica, Verdana, sans-serif
• t-arial-black ↝ font-family: "Arial Black", Gadget, sans-serif
• t-comic ↝ font-family: "Comic Sans MS", cursive, sans-serif
• t-impact ↝ font-family: Impact, Charcoal, sans-serif
• t-tahoma ↝ font-family: Tahoma, Geneva, sans-serif
• t-trebuchet ↝ font-family: "Trebuchet MS", Helvetica, sans-serif
• t-verdana ↝ font-family: Verdana, Arial, Helvetica, sans-serif
• t-mono ↝ font-family: $text_monospace;

Обрезка

• t-ellipsis ↝ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
• t-line-clamp ↝ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--line, 3); css-var

t-ellipsis Text text text text text text text text

t-line-clamp Text text text text text text text text text text text text text text text text text text text text text text text text text