Набір 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 %, наповнення, рамки, розмір шрифту) для <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
або