Библиотека правил CSS для определения представления элементов веб-интерфейса.
Интерфейс подключения библитеки реализован в виде типизированного CSS-модуля для применения как в нативной реализации так и в CommonJS или TypeScript окружении разработки веб-приложений. Так-же активы библиотеки содержат нативные модули JavaScript (ECMAScript Module) для подключения в браузерах.
yarn add @bpanchenko/uikit --dev
Компоненты пользовательского интерфейса
Переопределение правил оформления и поведения стандартных HTML-элементов документа
Абстрактные блоки модульной сетки веб-приложения или документа
Глобальные переменные системы
Правила косметического оформления отдельных элементов и компонент
Глобальные темы переопределяют правила представления модулей интерфейса или структуры документа
Вспомогательные классы CSS
o-
: Объект - абстрактный модуль интерфейса с индивидуальным поведением. Нечто, на что направлена практическая или познавательная
деятельность пользователя. Объединяет компоненты и логику работы. Пользователь может менять состояние объекта взаимодействуя с отдельными
его компонентами. Внешний вид объекта зависит от контекста использования.
c-
: Компонент - составная часть пользовательского интерфейса. Внешний вид может различатся в зависимости от контекста использования или
темы оформления интерфейса. Косметическое оформление компоненты может быть измено в результате воздействия пользователем непосредственно на
элемент.
u-
: Вспомогательные классы CSS. Инструмент коррекции поведения элементов относительно окружения.
t-
: Тема оформления интерфейса. Класс с такой приставкой определяет стилистическое оформление содержимого документа и должен быть объявлен
в корневом элементе.
s-
: Стиль контекста определяет косметический вид области документа или отдельной компоненты. Стиль оформления подобен теме.
is-
, has-
: Эти приставки означают что в данный момент времени элемент находится в определённом состоянии, которое меняет его внишний вид
и, возможно, поведение. При измении состояния такие классы CSS удаляются или заменяются на другие. Хорошей практикой является использование
атриботов aria-
в качестве индикаторов состояния, классами CSS лучше не злоупотреблять.
js-
: Приставка определяет селектор используемый вашим js-приложением для получения прямой ссылки на элемент в DOM-дереве. Ссылка на
элемент позволяет менять его состояние, содержимое, отслеживать события или просто удалить.
qa-
: Класс с этой приставкой необходим для поиска и связывания элементов DOM в автоматизированных тестах. Хорошей практикой является
использование атриботов data-
в качестве контейнеров данных для тестирования.