Набор UI элементов каталога приложений
Используйте набор UI-элементов каталога приложений, чтобы обеспечить соответствие интерфейса вашего приложения стилевым гайдлайнам SendPulse, что значительно ускоряет разработку и гарантирует единый дизайн.
Набор компонентов интерфейса содержит единый файл стилей для интеграции с каталогом приложений, а также готовые классы для форматирования текста, форм, таблиц, кнопок и других элементов.
Использование набора поможет:
- сократить время вёрстки — все базовые CSS-/SASS-правила уже собраны в одном файле;
- обеспечить консистентность, используя готовые классы для текста, форм, таблиц, кнопок и других элементов;
- ускорить работу дизайнеров и разработчиков за счёт готовых Figma-компонентов.
В статье рассмотрим основные компоненты набора элементов интерфейса каталога приложений и как их применять.
Начало работы
Чтобы начать использовать набор UI-компонентов каталога приложений, добавьте ссылку на его CSS-код в секцию <head> вашей страницы. Дополнительные шаги при этом не требуются.
<link rel="stylesheet" href="https://cdn.sendpulse.com/dist/css/sp-marketplace-app-ui.min.css">
Чтобы настроить дизайн элементов каталога приложений, воспользуйтесь Figma UI Kit со всеми необходимыми компонентами.
Настройте типографику
Компоненты интерфейса содержат полный набор стилей типографики, которые соответствуют дизайну SendPulse. Эти стили обеспечивают последовательность и читаемость на странице вашего приложения.
Основной текст
Базовый размер шрифта — 16 px с межстрочным интервалом 1.428. Абзацы (<p>) имеют стандартные вертикальные отступы для улучшенной читаемости. Вы можете использовать класс .lead для более крупного вводного текста.
Каждый блок абзаца (<p>) получает нижний отступ, равный половине вычисленного межстрочного интервала (по умолчанию 10 px).
Строчные текстовые элементы
Используйте строчные текстовые элементы (inline text elements), чтобы быстро стилизовать отдельные фрагменты текста. Доступны следующие элементы:
<mark> |
Подсвечивает важный контент.
Помогает быстро обратить внимание пользователя на ключевые части текста, такие как предупреждения или инструкции. |
<del> |
Показывает удалённый контент.
Полезно для отображения изменений в контенте, например, в логах обновлений или комментариях. |
<s> |
Перечёркивает текст и обозначает устаревшую или неактуальную информацию. |
<ins> |
Добавляет вставленный контент.
Хорошо подходит для отображения нового текста в обновлённой документации или версиях. |
<u> |
Добавляет подчёркивание.
Может быть использовано для стилизации ссылок или выделения ключевых фраз в сообщениях. |
<small> |
Применяет форматирование второстепенного (меньшего) текста.
Удобно для показа вспомогательной информации, например, описания поля ввода или даты обновления. |
<strong> |
Форматирует текст жирным.
Подходит для акцентирования основного сообщения или важной инструкции. |
<em> |
Форматирует текст курсивом.
Помогает выделить важные слова или уточнения в описаниях. |
<abbr> |
Показывает подсказку при наведении.
Объясняет сокращения, особенно в формах или спецификациях API. Используйте класс |
<blockquote> |
Форматирует текст как цитату.
Полезно для вставки комментариев пользователей или ссылок на внешние отзывы. Используйте класс |
Код
Используйте теги для форматирования кода, чтобы отображать текст как программный код. Доступны следующие варианты:
<code> |
Выделяет короткие фрагменты кода внутри текста. |
<kbd> |
Обозначает ввод с клавиатуры. |
<pre> |
Выделяет фрагменты кода отдельным блоком.
Для корректного отображения указывайте все специальные символы в формате Unicode. Используйте класс |
<var> |
Обозначает переменные. |
<samp> |
Обозначает пример выходных данных. |
Списки
Используйте теги списков или соответствующие классы, чтобы сгруппировать набор связанных элементов. Доступны следующие списки:
<ul> |
Создаёт маркированный (ненумерованный) список. |
<ol> |
Создаёт нумерованный список. |
<dl> |
Создаёт список-описание с терминами и их описаниями, отображаемыми ниже с отступом слева.
Длинные термины в горизонтальных списках автоматически переносятся на новую строку на узких экранах. |
Дополнительно можно стилизовать ненумерованные списки (<ul>) с помощью следующих CSS-классов:
.list-unstyled |
Убирает стандартные маркеры списка и левый отступ у элементов списка. Применяется только к прямым потомкам; для вложенных списков класс нужно добавить отдельно.
Подходит для меню боковой панели, где важно показать список ссылок без маркеров для компактного дизайна. |
.list-inline |
Размещает все элементы списка в одну строку с небольшими внутренними отступами.
Подходит для отображения навигационных вкладок или списка параметров авторизации в одну строку. |
Заголовки
Используйте стандартные HTML-теги заголовков, чтобы структурировать текст и разделить его на секции. Также можно применять соответствующие классы (.h1–.h6), чтобы визуально отобразить уровни заголовков внутри текста без изменения семантики.
Доступны следующие заголовки:
h1 |
.h1 |
Жирный | 40 px |
h2 |
.h2 |
Жирный | 24 px |
h3 |
.h3 |
Обычный | 20 px |
h4 |
.h4 |
Обычный | 18 px |
h5 |
.h5 |
Обычный | 16 px |
h6 |
.h6 |
Обычный | 14 px |
Используйте тег <small> или класс .small, чтобы добавить второстепенный текст в заголовке.
Выравнивание и преобразование текста
Настраивайте выравнивание текста с помощью следующих утилитарных классов:
.text-left |
Выравнивает текст по левому краю. |
.text-center |
Выравнивает текст по центру. |
.text-right |
Выравнивает текст по правому краю. |
.text-justify |
Распределяет текст равномерно в контейнере. |
.text-nowrap |
Отключает автоматический перенос текста. |
Преобразуйте регистр текста с помощью следующих классов:
.text-uppercase |
Преобразует текст в ЗАГЛАВНЫЕ буквы. |
.text-lowercase |
Преобразует текст в строчные буквы. |
.text-capitalize |
Делает каждое слово с заглавной буквы. |
Настройте таблицы
Используйте классы таблиц из набора, чтобы обеспечить последовательность и адаптивность на странице вашего приложения. Доступны следующие классы таблиц:
.table |
Применяет базовый стиль: добавляет небольшой отступ (padding) и горизонтальные разделители во всех элементах <table>. |
.blue-table |
Применяет стиль таблиц по умолчанию в SendPulse: без границ заголовков и с чередованием фона строк. |
.table-striped |
Добавляет «зебру» (чередование фоновых цветов) строкам в <tbody> для улучшения читаемости (реализовано через :nth-child). |
.table-bordered |
Добавляет границы вокруг всех ячеек и самой таблицы. |
.table-hover |
Включает подсветку строки <tbody> при наведении курсора.
Улучшает взаимодействие пользователя, например, при выборе нужной записи в списке контактов. |
.table-condensed |
Уменьшает внутренние отступы ячеек наполовину для более компактного вида. |
.table-responsive |
Оборачивает .table, чтобы разрешить горизонтальную прокрутку на экранах уже 768 px (не влияет на более широкие экраны).
Обеспечивает удобный просмотр таблиц на мобильных устройствах, например, для просмотра статистики рассылок. |
Используйте контекстные классы для форматирования отдельных элементов, например, строк таблицы или отдельных ячеек. Доступны следующие классы:
.active |
Применяет цвет подсветки ко всей строке или ячейке. |
.success |
Отображает успешный или позитивный контекст (зелёный фон или текст в зависимости от применения). |
.info |
Отображает нейтральный, информационный контекст (светло-голубой). |
.warning |
Указывает на предупреждение, требующее внимания (жёлтый). |
.danger |
Указывает на потенциально опасное или негативное действие (красный). |
Настройте формы
Добавляйте различные формы, чтобы принимать разные типы ввода от пользователей. Каждый элемент имеет свои типы и параметры управления. Доступны следующие элементы:
<form> |
Основной контейнер для элементов формы. Можно стилизовать как block, inline или horizontal. |
<input> |
Контейнер для различных типов ввода, например текстового или выбора.
Добавьте атрибут |
<textarea> |
Контейнер для многострочного текстового ввода. Управляйте высотой поля через атрибут rows. |
<select> |
Контейнер для выпадающих списков. Для множественного выбора используйте атрибут multiple.
Добавьте атрибут |
Все элементы и типы форм можно стилизовать и контролировать с помощью соответствующих классов.
Основные элементы стилизации
Применяйте стили к стандартным текстовым типам форм (text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, color), чтобы переопределить их встроенные настройки или добавить собственные параметры. Используйте следующие классы:
.form-control |
Базовое стилирование (ширина 100 %, padding, рамки, размер шрифта) для <input>, <textarea> и <select>. |
.form-control-date |
Специфические стили для <input type="date"> для единообразного отображения и отступов. |
.form-control-time |
Специфические стили для <input type="time"> для единообразного отображения и отступов. |
.form-control-static |
Стилизует блок неизменяемого текста так, чтобы он выравнивался с другими элементами управления формой.
Позволяет показать пользователю предустановленное значение в том же стиле, что и другие поля, без возможности редактирования. |
.help-block |
Отображает контекстную подсказку под элементом формы (связывается через aria-describedby).
Удобно для пояснения формата ввода или ограничений (например, минимальная длина пароля) без перегрузки интерфейса. |
Если требуется многострочный ввод, используйте <textarea> с классом .form-control. Для выпадающих списков (<select>) достаточно только .form-control. Браузеры могут по-своему округлять нативные элементы select.
Группы ввода
Чтобы применить единый стиль к нескольким полям одновременно, оберните их в контейнер с аддонами (addons), чтобы добавить общий элемент перед или после поля. Элементы ввода можно группировать с помощью следующих классов:
.input-group |
Контейнер, который группирует <input> с его аддонами (текст или кнопки) в единый встроенный блок.
Позволяет вставлять префикс или суффикс (например, символ валюты или кнопку) непосредственно рядом с полем ввода для более интуитивного интерфейса. |
.input-group-addon |
Стилизует элемент (текст или кнопку), расположенный непосредственно перед или после <input>.
Удобно использовать для отображения единиц измерения (например, |
Чекбоксы и радиокнопки
Используйте флажки (checkbox), чтобы дать пользователям возможность выбрать один или несколько вариантов из списка, или радиокнопки (radiobuttons), чтобы выбрать только один вариант из многих. Используйте следующие классы для обёртки и управления стилем:
.checkbox |
Обертывает вложенный <input type="checkbox"> и его <label> в отдельный блок. |
.radio |
Обертывает вложенный <input type="radio"> и его <label> в отдельный блок. |
.checkbox-inline |
Отображает флажок и его <label> в одной строке (inline). |
.radio-inline |
Отображает радиокнопку и её <label> в одной строке (inline). |
.disabled (обёртка) |
Применяется к .checkbox, .checkbox-inline, .radio или .radio-inline, чтобы придать серый вид и курсор «запрещено». |
Даже если видимого текста метки нет, оберните элемент в .checkbox или .radio и добавьте атрибут aria-label на <input>, чтобы программы для чтения с экрана правильно озвучивали его назначение.
Обёртки для валидации и обратной связи
Оберните элементы формы и их метки или вспомогательный текст в контейнеры с соответствующими классами для отображения состояний. Используйте следующие классы.
.has-success |
Применяет зелёное оформление для обозначения успешного ввода. |
.has-warning |
Применяет жёлтое оформление для обозначения предупреждения. |
.has-error |
Применяет красное оформление для обозначения ошибки. |
.has-feedback |
Добавляет иконку обратной связи внутрь поля ввода. |
.form-control-feedback |
Обеспечивает абсолютное позиционирование иконки внутри поля. |
.sp-icon icon-check |
Добавляет иконку галочки (успех). |
.sp-icon icon-warning |
Отображает иконку предупреждения. |
.sp-icon icon-closed |
Отображает иконку крестика (ошибка). |
Чтобы добавить иконку обратной связи, комбинируйте класс валидации с .has-feedback и добавьте внутри элемент с классом .form-control-feedback.
Рекомендуется добавлять скрытый <span class="sr-only"></span> (например, «(успешно)») с привязкой через aria-describedby, чтобы программы для чтения с экрана озвучивали состояние валидации.
Размеры и расположение
Настраивайте высоту отдельных элементов, общие размеры групп в горизонтальных формах и ширину элементов через колонковую систему. Используйте следующие классы:
.input-lg |
Отображает увеличенное/высокое поле ввода — соответствует высоте кнопки .btn-lg.
Полезно для создания заметных полей, например, в форме поиска с большими шрифтами для лучшей читаемости. |
.input-sm |
Отображает уменьшенное/низкое поле ввода — соответствует высоте кнопки .btn-sm.
Удобно использовать в компактных панелях фильтрации или настройках, где нужен экономный простор. |
.form-group-lg |
В вертикальных формах (.form-horizontal) увеличивает и метку, и поле до «большого» размера.
Подходит для важных элементов формы, например, главного поля ввода при настройке API-ключа. |
.form-group-sm |
В вертикальных формах (.form-horizontal) уменьшает и метку, и поле до «малого» размера. |
.col-xs-2 |
Оборачивает элемент управления в колонку сетки шириной 2 на точке входа xs.
Используйте для регулировки ширины полей в одной строке на мобильных устройствах. |
.col-xs-3 |
Оборачивает элемент управления в колонку сетки шириной 3 на точке входа xs. |
.col-xs-4 |
Оборачивает элемент управления в колонку сетки шириной 4 на точке входа xs. |
Настройка кнопок
Добавляйте и настраивайте кнопки на странице вашего приложения, применяя классы кнопок к элементам <a>, <button> и <input>. Используйте следующие классы для задания контекста, размера и состояния кнопки:
.btn |
Базовый класс для всех кнопок — задает отступы (padding), рамки, размер шрифта и курсор. |
.btn-default |
Нейтральный («вторичный») стиль — светлый фон, темный текст. |
.btn-primary |
Стиль основной действия — синий фон, белый текст. |
.btn-success |
Отображает успешное или позитивное действие — зеленый фон. |
.btn-info |
Информационный контекст — светло-голубой фон. |
.btn-warning |
Привлекает внимание пользователя — оранжевый фон. |
.btn-danger |
Потенциально опасное или негативное действие — красный фон. |
.btn-link |
Стилизует ссылку как кнопку (без фона, подчеркнутый текст). |
.btn-lg |
Увеличенная/высокая кнопка — соответствует высоте .btn btn-lg. |
.btn-sm |
Уменьшенная/низкая кнопка — соответствует высоте .btn btn-sm. |
.btn-xs |
Миниатюрная кнопка — наименьший стандартный размер. |
.btn-block |
Заставляет кнопку занимать всю ширину родительского контейнера. |
.active |
Заставляет кнопку выглядеть нажатой (темный фон, эффект вдавленности). |
.disabled |
Придает кнопке «затемненный» вид и отключает взаимодействие (для <a> и <button>). Для <button> также используйте атрибут disabled="disabled". |
Хотя классы кнопок можно применять к <a> и <button>, только элементы <button> поддерживаются внутри компонентов nav и navbar каталога приложений.
Internet Explorer 9 и ниже добавляет нежелательную текстовую тень (text-shadow) к отключенным <button>. В текущей версии решить эту проблему только с помощью CSS невозможно.
Настройка элементов изображений
Добавляйте и настраивайте изображения на странице приложения с помощью соответствующих классов. Вы можете сделать изображения адаптивными и при необходимости изменить их форму.
Масштабируйте изображения в соответствии с родительским контейнером и центрируйте их с помощью:
.img-responsive |
Применяет max-width: 100%, height: auto, display: block, чтобы изображение плавно изменяло размер. |
.center-block |
Центрирует блочный элемент по горизонтали (например, адаптивное изображение). |
SVG-изображения с .img-responsive могут масштабироваться некорректно в IE8–10. Чтобы это исправить, добавьте width: 100% \9; в собственные стили — по умолчанию Bootstrap не включает этот параметр.
Применяйте скруглённые углы или другие стили с помощью:
.img-rounded |
Добавляет небольшие, равномерно скруглённые углы к изображению. |
.img-circle |
Формирует изображение в виде круга (требуется квадратное изображение). |
.img-thumbnail |
Применяет светлую рамку, внутренний отступ и скруглённые углы для внешнего вида уменьшенного изображения. |
Internet Explorer 8 не поддерживает скругление углов в CSS. Изображения могут отображаться с квадратными углами.
Вспомогательные классы
Используйте вспомогательные классы для дополнительных вариантов форматирования элементов. Например, можно контролировать цвет и видимость текста, добавить иконку закрытия или оформить элемент в виде каретки.
Контекстные цвета текста
Используйте классы цвета текста, чтобы передать значение или акцент через визуальное оформление. Убедитесь, что все семантические значения, передаваемые цветом, также дублируются в видимом тексте или доступны программам чтения с экрана (например, через .sr-only).
.text-muted |
Применяет более светлый, приглушённый цвет для снижения акцента (например, «последнее изменение»). |
.text-primary |
Применяет основной цвет — обычно используется для важных ссылок или призывов к действию. |
.text-success |
Применяет зелёный оттенок; обычно используется для обозначения успешной операции (например, «Настройки сохранены»). |
.text-info |
Применяет светло-голубой цвет; часто используется для информационных сообщений или подсказок. |
.text-warning |
Применяет оранжевый цвет; используется для привлечения внимания к предупреждениям (например, «Пароль скоро истечёт»). |
.text-danger |
Применяет красный цвет; используется для обозначения ошибок или опасных действий (например, «Удалить аккаунт»). |
В некоторых случаях классы акцентов не применяются из-за специфичности другого селектора. Обычно достаточно обернуть текст в <span> с нужным классом.
Контекстные цвета фона
Классы фона устанавливают сплошной цвет фона для любого блочного элемента. Как и с цветом текста, не полагайтесь только на цвет; добавляйте доступный текст или скрытые метки при необходимости.
.bg-primary |
Применяет основной фирменный цвет в качестве фона; полезно для заголовков или баннеров. |
.bg-success |
Применяет зелёный фон для обозначения успешных операций (например, «Операция выполнена»). |
.bg-info |
Применяет светло-голубой фон для информационных секций или призывов к действию. |
.bg-warning |
Применяет оранжевый фон для привлечения внимания к предупреждениям. |
.bg-danger |
Применяет красный фон для критических или опасных контекстов (например, сообщение об ошибке). |
В некоторых случаях контекстные классы фона не применяются из-за специфичности другого селектора. Обычно достаточно обернуть содержимое в <div> с соответствующим классом.
Видимость и отображение
Управляйте тем, отображается ли элемент или скрыт (в том числе для программ чтения с экрана), с помощью утилитных классов. Они используют !important, чтобы переопределить большинство других правил отображения. Доступны следующие классы видимости:
.show |
Отображает элемент как блок, игнорируя другие параметры отображения (например, .hidden).
Удобно использовать для программного отображения скрытого раздела документации при выполнении условия, например, открытия дополнительных настроек интеграции. |
.hidden |
Скрывает элемент из макета (display: none), также скрывает его от программ чтения с экрана.
Полезно для временного удаления из интерфейса определённых форм или сообщений, например, скрыть опцию настройки с кастомной аутентификацией до её активации. |
.invisible |
Делает элемент невидимым (visibility: hidden), но сохраняет его место в потоке документа.
Подходит для сохранения выравнивания макета при временном скрытии графического элемента, например, иконки статуса, чтобы структура документации не смещалась. |
Используйте .hidden, когда нужно полностью удалить элемент из макета (например, переключить модальное окно). Используйте .invisible, если нужно только визуально скрыть элемент, но сохранить его место (например, для заполнителя будущего контента).
Дополнительные классы
Добавляйте распространённые элементы интерфейса, такие как иконки закрытия и каретки. Они предназначены только для специфических сценариев, например, закрытия уведомлений или обозначения выпадающих меню. Используйте следующие классы:
.close |
Стилизует кнопку (обычно <button> или <a>) с минимальной обёрткой и крупным символом «×». Используется для закрытия уведомлений, модальных окон или других удаляемых компонентов.
Всегда добавляйте соответствующий атрибут |
.caret |
Отображает небольшую стрелку, направленную вниз; обычно используется внутри элементов для вызова выпадающих списков. В контейнерах «dropup» автоматически переворачивается вверх.
Помогает разработчику визуально указать на наличие дополнительного меню настроек интеграции (например, выбор канала связи) без создания собственной графики. |
Обновлено: 13.06.2025
или