Типографика
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">
.