Skip to content
No description, website, or topics provided.
CSS HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
source Initial commit Oct 17, 2019
.gitignore
README.md
gulpfile.js
package-lock.json
package.json

README.md

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">.

You can’t perform that action at this time.