html-marketplace-1.0-uikit
Типографика
HTML заголовки, начиная с <h1> до <h3>, доступны к использованию. Если нет необходимости использовать именно
теги, то для них есть классы ".h1" до ".h3". Они отлично подходят для <div> или <span>.
Для абзацев используется тег <p>. Если необходимо показать ошибку, то к нему добавляется класс ".error".
Так же доступен тег <caption>, который предназначен для описания содержания таблиц.
Если нужно просто отобразить похожий стиль в тексте,
то для этого есть класс ".caption".
Поля
Для добавления обычного текстового поля используется <input class="ui-input">.
Для добавления поля для Выбора из списка используется <select class="ui-select">, внутри которого находятся варианты внутри своих <option>. Если нужно
сделать Выпадающий список, то вместо ".ui-select" указывается класс ".ui-select-custom".
Кнопки добавляются с помощью тега <button class="button">. По умолчанию кнопка серая, но с помощью добавления дополнительного
класса ".button--success" её можно переопределить в зеленый цвет, подходящий для обозначения положительного выбора.
Для добавления чекбокса/флажка используется конструкция на базе тега <label class="option check">. Внутри находится
сам тег <input class="check__input">, тег <span class="check__box"> для отображения кастомизированного внешнего вида, и
<span class="check__text"> для добавления текста выбора.
Для добавления радиокнопки/переключателя используется конструкция на базе тега <label class="option radio">. Внутри находится
сам тег <input class="check__input">, тег <span class="check__box"> для отображения кастомизированного внешнего вида, и
<span class="check__text"> для добавления текста выбора.
Вкладки
Вкладки добавляются в блоки <div class="tabs js-tabs"> или <div class="tabs-border js-tabs">.
Шапка вкладок представляет собой список <ul class="tabs__buttons"> или <ul class="tabs-border__buttons">.
Пункты идут подряд друг за другом и являются элементами списка <li class="tabs__button js-tabs-button"> или
<li class="tabs-border__button js-tabs-button">. Активный пункт в шапке помечается классом ".b-active".
Сам контент располагается в <div class="tabs__items"> или <div class="tabs-border__items">, который разбит на несколько блоков
<div class="tabs__item js-tabs-item"> или <div class="tabs-border__item js-tabs-item">. Активный блок помечается классом ".b-active".
Классы с префиксом js-* необходимы для инициализации и работы вкладок. Класс ".tabs" и ".tabs-border" отвечают за внешний вид. Количество пунктов должно
быть равно количеству блоков с контентом.
Всплывающие окна
Для вызова всплывающего окна нужно добавить к кнопке <button class="button"> класс ".js-popup-open". Чтобы кнопка открывала нужное окно, и в ней,
и в самом окно указывается одинаковый data-name.
Всплывающее окно представляет собой блок <div class="popup js-popup-window b-hide">, в котором находятся <div class="popup__overlay js-popup-close">
для затемнения фона и <dialog class="popup__body" open>, что является самим окном.
Заголовок располагается в блоке <div class="popup__title">, а контент в блоке <div class="popup__content">.
Для закрытия окна используется кнопка <button class="popup__close js-popup-close">.
Для взаимодействия с окном можно добавить блок <div class="buttons">, в который размещаются как одна, так и несколько кнопок <button class="button">.
Для закрытия окна нажатием на них, так же используется класс ".js-popup-close".
Таблицы
Таблица добавляется тегом <table class="ui-table">. Навигация в таблице находится в подвале <tfoot> внутри блока <div class="ui-table__pager">.
Элементы управления располагаются в <div class="ui-table__buttons"> и добавляются с помощью <a href="#" class="ui-table__link"><button class="ui-table__button" title=""></button></a>.
Для отображения количества страниц используется блок <div class="ui-table__count">.