Текст

SIMAI Framework позволяет изменять размер шрифта, толщину, стиль, трекинг, интерлиньяж, задавать выравнивание, индекс, максимальную длину строки, производить трансформацию и указывать семейство шрифтов.

Размер шрифта

Адаптивный модификатор. Позволяет изменять размер текста в зависимости от ширины экрана. Использование: .t{контрольная точка}-{размер}

Контрольная точка. Необязательный параметр. Изменяет размер шрифта только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
Размер. Обязательный параметр. Указывает размер шрифта. Принимает значение от -3 до 7. В скобках указан абсолютный размер шрифта при 1rem = 16px:
- -3 – 0.625rem (10px)
- -2 – 0.75rem (12px)
- -1 – 0.875rem (14px)
- 0 – 1rem (16px) - значение шрифта по умолчанию
- 1 – 1.25rem (20px)
- 2 – 1.5rem (24px)
- 3 – 2rem (32px)
- 4 – 2.5rem (40px)
- 5 – 3rem (48px)
- 6 – 4rem (64px)
- 7 – 6rem (96px)

Размер текста: -3

Размер текста: -2

Размер текста: -1

Размер текста: 0 (размер текста по умолчанию)

Размер текста: 1

Размер текста: 2

Размер текста: 3

Размер текста: 4

Размер текста: 5

Размер текста: 6

Размер текста: 7

<p class="t--3">Размер текста: -3</p>
<p class="t--2">Размер текста: -2</p>
<p class="t--1">Размер текста: -1</p>
<p class="t-0">Размер текста: 0 (размер текста по умолчанию)</p>
<p class="t-1">Размер текста: 1</p>
<p class="t-2">Размер текста: 2</p>
<p class="t-3">Размер текста: 3</p>
<p class="t-4">Размер текста: 4</p>
<p class="t-5">Размер текста: 5</p>
<p class="t-6">Размер текста: 6</p>
<p class="t-7">Размер текста: 7</p>

Толщина шрифта

Адаптивный модификатор. Позволяет изменять толщину текста в зависимости от ширины экрана. Использование: .t{контрольная точка}-{толщина}

Контрольная точка. Необязательный параметр. Изменяет толщину шрифта только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
Толщина. Обязательный параметр. Указывает толщину шрифта. Принимает значения:
- light – толщина шрифта 300
- regular – нормальная толщина шрифта
- medium – толщина шрифта 500
- bold – толщина шрифта жирная

Толщина шрифта 300

Нормальная толщина шрифта

Толщина шрифта 500

Жирная толщина шрифта

<p class="t-light">Толщина шрифта 300</p>
<p class="t-regular">Нормальная толщина шрифта</p>	
<p class="t-medium">Толщина шрифта 500</p>
<p class="t-bold">Жирная толщина шрифта</p>

Адаптивная толщина шрифта

Вы можете использовать параметры контрольных точек для изменения толщины шрифта при различных разрешениях. Для просмотра демонстрации измените разрешение экрана.

При использовании нескольких модификаторов толщины шрифта подряд, необходимо располагать их в порядке увеличения размера экрана: -без параметра -sm, -md, -lg, -xl.

Толщина шрифта 300 (<md)

Нормальная толщина шрифта (<md)

Толщина шрифта 500 (<md)

Жирная толщина шрифта(<md)

<p class="t-light t-md-regular">Толщина шрифта 300</p>
<p class="t-regular t-md-regular">Нормальная толщина шрифта</p>
<p class="t-medium t-md-regular">Толщина шрифта 500</p>
<p class="t-bold t-md-regular">Жирная толщина шрифта</p>

Стиль шрифта

Использование модификатора: .t{контрольная точка}-{стиль}

Контрольная точка. Необязательный параметр. Изменяет стиль шрифта только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
Стиль. Обязательный параметр. Указывает стиль шрифта. Принимает значения:
- normal – нормальный шрифт
- italic – курсивный шрифт

Нормальный шрифт

Курсивный шрифт

<p class="t-normal">Нормальная толщина шрифта</p>
<p class="t-italic">Курсивный шрифт</p>

Адаптивный стиль шрифта

Вы можете использовать параметры контрольных точек для изменения стиля шрифта при различных разрешениях. Для просмотра демонстрации измените разрешение экрана.

При использовании нескольких модификаторов стиля подряд, необходимо располагать их в порядке увеличения размера экрана: -без параметра -sm, -md, -lg, -xl.

Курсивный шрифт(<md)

<p class="t-italic t-md-normal">Курсивный шрифт</p>

Семейство шрифтов

Вы можете использовать следующие модификаторы для использования в проекте безопасных (системных) шрифтов:

Использование модификатора: .t{контрольная точка}-{гарнитура}

Контрольная точка. Необязательный параметр. Изменяет стиль шрифта только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
Гарнитура. Обязательный параметр. Указывает гарнитуру шрифта. Принимает значения:
- .t-arial или .t-helvetica – Arial (Windows); Arial, Helvetica (Mac)
- .t-arial-black или .t-gadget – Arial Black (Windows); Arial Black, Gadget (Mac)
- .t-comic – Comic Sans MS (Windows, Mac)
- .t-courier – Courier New (Windows); Courier New, Courier (Mac)
- .t-georgia – Georgia (Windows, Mac)
- .t-impact или .t-charcoal – Impact (Windows); Impact,Charcoal (Mac)
- .t-lucida-console или .t-monaco – Lucida Console (Windows); Monaco (Mac)
- .t-lucida-sans или .t-lucida-grande – Lucida Sans Unicode (Windows); Lucida Grande (Mac)
- .t-palatino или .t-book-antiqua – Palatino Linotype, Book Antiqua (Windows); Palatino (Mac)
- .t-tahoma или .t-geneva – Tahoma (Windows); Geneva (Mac)
- .t-times – Times New Roman (Windows); Times (Mac)
- .t-trebuchet – Trebuchet MS (Windows); Helvetica (Mac)
- .t-verdana – Verdana (Windows); Verdana, Geneva (Mac)

В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!

<p class="t-arial t-3">В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!</p>
<p class="t-arial-black t-3">В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!</p>
<p class="t-comic t-3">В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!</p>
<p class="t-courier t-3">В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!</p>
<p class="t-georgia t-3">В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!</p>	
<p class="t-impact t-3">В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!</p>	
<p class="t-lucida-console t-3">В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!</p>
<p class="t-lucida-sans t-3">В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!</p>
<p class="t-palatino t-3">В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!</p>
<p class="t-tahoma t-3">В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!</p>
<p class="t-times t-3">В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!</p>
<p class="t-trebuchet t-3">В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!</p>
<p class="t-verdana t-3">В чащах юга жил-был цитрус... — да, но фальшивый экземпляръ!</p>

Трансформация текста

Использование модификатора: .t{контрольная точка}-{тип трансформации}

Контрольная точка. Необязательный параметр. Изменяет толщину шрифта только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
Тип трансформации. Обязательный параметр. Указывает вид трансформации текста. Принимает значения:
- lowercase – все символы текста становятся строчными (нижний регистр)
- uppercase – все символы текста становятся прописными (верхний регистр)
- capitalize – первый символ каждого слова в предложении будет заглавным, остальные символы свой вид не меняют
- strike – текст зачеркивается

Текст в нижнем регистре

Текст в верхнем регистре

Текст с заглавными символами

Зачеркнутый текст

<p class="t-lowercase">Текст в нижнем регистре</p>
<p class="t-uppercase">Текст в верхнем регистре</p>	
<p class="t-capitalize">Текст с заглавными символами</p>
<p class="t-strike">Зачеркнутый текст</p>

Адаптивная трансформация текста

Вы можете использовать параметры контрольных точек для изменения трансформации текста при различных разрешениях. Для просмотра демонстрации измените разрешение экрана.

Текст в верхнем регистре (<md)

<p class="t-uppercase t-md-lowercase">Text uppercase (&lt;md)</p>

Трекинг

Трекинг — равномерное изменение расстояния между буквами (межбуквенных пробелов).

Использование модификатора: .t{контрольная точка}-{тип трекинга}

Контрольная точка. Необязательный параметр. Изменяет трекинг только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
Тип трекинга. Обязательный параметр. Указывает вид трекинга текста. Принимает значения:
- tracked – растояние между символами .1em
- tracked-tight – растояние между символами -.05em
- tracked-mega – растояние между символами .25em

Стало немного просторнее

Встаньте теснее!

Всем разойтись!

<p class="t-tracked t-2 t-uppercase">Стало немного просторнее</p>
<p class="t-tracked-tight t-2 t-uppercase">Встаньте теснее!</p>
<p class="t-tracked-mega t-2 t-uppercase">Всем разойтись!</p>

Интерлиньяж (межстрочный интервал)

Интерлиньяж — междустрочный пробел, расстояние между базовыми линиями соседних строк. В компьютерной вёрстке это понятие обычно называют "межстрочный интервал".

Использование модификатора: .t{контрольная точка}-{тип интервала}

Контрольная точка. Необязательный параметр. Изменяет межстрочный интервал только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
Тип интервала. Обязательный параметр. Указывает вид трекинга текста. Принимает значения:
- copy – растояние между строками 1.5 х размер шрифта
- title – растояние между строками 1.25 х размер шрифта
- solid – растояние между строками 1 х размер шрифта

<p class="t-copy">Lorem ipsum dolor ...</p>
<p class="t-title">Lorem ipsum dolor ...</p>
<p class="t-solid">Lorem ipsum dolor ...</p>

Выравнивание текста

Использование модификатора: .t{контрольная точка}-{выравнивание}

Контрольная точка. Необязательный параметр. Изменяет стиль шрифта только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
Выравнивание. Обязательный параметр. Указывает выравнивание текста. Принимает значения:
- left – выравнивание по левому краю
- right – выравнивание по правому краю
- center – выравнивание по центру
- justify – выравнивание по ширине

Текст выравнен по левому краю

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at ex ante. Nam turpis sem, faucibus nec placerat in, auctor vitae odio. Morbi convallis nisl erat, vel auctor augue pharetra eu. Duis tempor augue nec erat lobortis imperdiet. In hac habitasse platea dictumst. Suspendisse ut finibus nibh. Aenean id leo in arcu maximus cursus. Curabitur pulvinar lobortis porttitor. Praesent tincidunt varius nulla quis mollis. Suspendisse tempus viverra lectus sed blandit. Praesent ultrices mi ante, et bibendum est suscipit eget. Morbi dignissim finibus erat ut ornare. Nullam nec leo in magna interdum congue.

Текст выравнен по правому краю

Текст выравнен по центру

Текст выравнен по ширине

<p class="t-left">Текст выравнен по левому краю</p>
<p class="t-right">Текст выравнен по правому краю</p>	
<p class="t-center">Текст выравнен по центру</p>
<p class="t-justify">Текст выравнен по ширине</p>

Адаптивное выравнивание текста

Вы можете использовать параметры контрольных точек для изменения параметра выравнивания текста. Для просмотра демонстрации измените разрешение экрана.

При использовании нескольких модификаторов выравнивания текста подряд, необходимо располагать их в порядке увеличения размера экрана: -без параметра -sm, -md, -lg, -xl.

Текст выравнен по правому краю (<md)

Текст выравнен по центру(<md)

Текст выравнен по ширине (<md)

<p class="t-right t-md-left">Текст выравнен по правому краю</p>	
<p class="t-center t-md-left">Текст выравнен по центру</p>
<p class="t-justify t-md-left">Текст выравнен по ширине</p>

Длина строки текста

Использование модификатора: .t{контрольная точка}-{размер}

Контрольная точка. Необязательный параметр. Изменяет размер строки текста только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).
Размер. Обязательный параметр. Определяет длину строки текста. Принимает значения:
- measure – длина строки ~66 символов
- measure-narrow – длина строки ~45 символов
- measure-wide – длина строки ~80 символов

Текст с длиной строки ~66 символов

Текст с длиной строки ~45 символов

Текст с длиной строки ~80 символов

<p class="t-measure">Текст с длиной строки ~66 символов</p>
<p class="t-measure-narrow">Текст с длиной строки ~45 символов</p>
<p class="t-measure-wide">Текст с длиной строки ~80 символов</p>

Адаптивная длина строки текста

Вы можете использовать параметры контрольных точек для изменения параметра длины строки текста. Для просмотра демонстрации измените разрешение экрана.

При использовании нескольких модификаторов длины строки текста подряд, необходимо располагать их в порядке увеличения размера экрана: -без параметра -sm, -md, -lg, -xl.

Текст с длиной строки ~45 символов (<md)

Текст с длиной строки ~80 символов (<md)

<p class="t-measure-narrow t-md-measure">Текст с длиной строки ~45 символов (<md)</p>	
<p class="t-measure-wide t-md-measure">Текст с длиной строки ~80 символов (<md)</p>

Список

Модификатор убирает маркеры в списке

Использование модификатора: .t{контрольная точка}-list

Контрольная точка. Необязательный параметр. Изменяет размер строки текста только для определенного диапазона, в соответствии с контрольными точками (-sm, -md, -lg, -xl).

Немаркированный список

Пункт 1
Пункт 2
Пункт 3

Немаркированный адаптивный список. Диапазон md и больше

Пункт 1
Пункт 2
Пункт 3

<h5>Немаркированный списокt</h5>
<ul class="t-list">
	<li>Пункт 1</li>
	<li>Пункт 2</li>
	<li>Пункт 3</li>
</ul>	
<h5>Немаркированный адаптивный список. Диапазон MD и больше</h5>
<ul class="t-md-list">
	<li>Пункт 1</li>
	<li>Пункт 2</li>
	<li>Пункт 3</li>
</ul>

Введение

Макет

Контент

Компоненты

Формы

Оформление

Эффекты

Утилиты

Сниппеты

Стандарты

Структура