Jump to content

Типографика (шрифты)

Модуль типографии предлагает широкий спектр классов для стилизации текста в рамках всего сайта. 

Заголовки

Предусмотрен ряд стилей для заголовков, цель которых структурирование информации на странице. Вы можете использовать стили для любых тегов <h*> (или любых других тегов) - выберите наиболее семантический элемент в каждом конкретном использовании.

ipsType_pageTitle
Наиболее применим в качестве основного заголовка на странице. Более крупная версия доступна с добавлением дополнительно класса ipsType_largeTitle.

Основной заголовок страницы

ipsType_sectionTitle
Заглавие раздела на странице.

Заглавие раздела

ipsType_sectionHead
Заголовок раздела.

Заголовок раздела

ipsType_minorHeading
Небольшой, менее важный заголовок.

Небольшой заголовок

 

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

ipsType_left
Выравнивание текста по левому краю.

ipsType_right
Выравнивание текста по правому краю.

ipsType_center
Центрированный текст.

 

Цвета

ipsType_light
Светлый текст

ipsType_warning или psType_negative
Текст предупреждения

ipsType_success
Текст успешного статуса

ipsType_issue
Текст ошибочного статуса

ipsType_neutral
Нейтральный текст

 

Размеры

ipsType_small
Небольшой текст

ipsType_medium
Средний текст

ipsType_normal
Нормальный размер текста

ipsType_large
Крупный текст

ipsType_veryLarge
Очень крупный текст

ipsType_huge (Используется для иконок)

 

Созданный пользователь текст/контент из редактора CKEditor

Когда речь заходит о работе с контентом, который был создан пользователем (как правило из редактора CKEditor), существует три класса, которые должны быть использованы для корректного отображения этого контента. Как правило, необходимо использовать все три класса, но бывают ситуации, когда необходимо использовать другую обработку. Вы также можете применить классы к различным элементам - например, если у вас есть повторяющиеся блоки контента пользователя, класс ipsContained может быть применим к обёртке всего контента, вместо применения к каждому отдельному блоку. При работе с пользовательским контентом, не исключайте нестандартных ситуаций.

ipsType_richText
Это основной класс для пользовательского контента, и активирует стили как, например, адаптивные изображения и корректные поля.

ipsType_break
Обеспечивает корректный перенос слов в пользовательском контенте.

ipsType_contained
Это защитный тего, обеспечивающий то, что контент не будет выходить за пределы из своего существующего контейнера.

Укороченный текст

Текст может быть укорочен в одну строку с помощью добавления к элементу двух классов: ipsTruncate ipsTruncate_line. В браузерах, которые это поддерживают, это приводит к скрытию излишней части текста, вместо которой отображается знак троеточия.

Этот метод предназначен для работы на небольших одностроковых фрагментах текста, например тексте на кнопке. Он не будет корректно работать с многостроковыми данными; для этих случаев, вы должны использовать основанный на Яваскрипте виджет ips.ui.truncate. Он также устанавливает элементу ширину в 100% для корректной работы; вам нужно будет вручную установить ширину, чтобы перезаписать это значение.

Другие стили типографики

ipsType_noBreak
Предотвращает обёртывание текста.

ipsType_reset
Удаляет отступ от края (margin) (наиболее полезен для использования на элементах <h*> и <p>).

ipsType_unbold
Удаляет стиль жирности (bold) у текста.

ipsType_uppercase
Переводит текст в верхний регистр.

ipsType_blendLinks
При применении к элементу, содержащему ссылки или элементу, ссылающемуся на самого себя, ссылки будут наследовать стили окружающего их текста.