CSS фреймворк Protosite UIKit

Библиотека правил CSS для определения представления элементов веб-интерфейса.

Интерфейс подключения библитеки реализован в виде типизированного CSS-модуля для применения как в нативной реализации так и в CommonJS или TypeScript окружении разработки веб-приложений. Так-же активы библиотеки содержат нативные модули JavaScript (ECMAScript Module) для подключения в браузерах.

Установка пакета

yarn add @bpanchenko/uikit --dev

Директории

components

Компоненты пользовательского интерфейса

document

Переопределение правил оформления и поведения стандартных HTML-элементов документа

objects

Абстрактные блоки модульной сетки веб-приложения или документа

settings

Глобальные переменные системы

styles

Правила косметического оформления отдельных элементов и компонент

themes

Глобальные темы переопределяют правила представления модулей интерфейса или структуры документа

utilities

Вспомогательные классы CSS

Пространства имён

o-: Объект - абстрактный модуль интерфейса с индивидуальным поведением. Нечто, на что направлена практическая или познавательная деятельность пользователя. Объединяет компоненты и логику работы. Пользователь может менять состояние объекта взаимодействуя с отдельными его компонентами. Внешний вид объекта зависит от контекста использования.

c-: Компонент - составная часть пользовательского интерфейса. Внешний вид может различатся в зависимости от контекста использования или темы оформления интерфейса. Косметическое оформление компоненты может быть измено в результате воздействия пользователем непосредственно на элемент.

u-: Вспомогательные классы CSS. Инструмент коррекции поведения элементов относительно окружения.

t-: Тема оформления интерфейса. Класс с такой приставкой определяет стилистическое оформление содержимого документа и должен быть объявлен в корневом элементе.

s-: Стиль контекста определяет косметический вид области документа или отдельной компоненты. Стиль оформления подобен теме.

is-, has-: Эти приставки означают что в данный момент времени элемент находится в определённом состоянии, которое меняет его внишний вид и, возможно, поведение. При измении состояния такие классы CSS удаляются или заменяются на другие. Хорошей практикой является использование атриботов aria- в качестве индикаторов состояния, классами CSS лучше не злоупотреблять.

js-: Приставка определяет селектор используемый вашим js-приложением для получения прямой ссылки на элемент в DOM-дереве. Ссылка на элемент позволяет менять его состояние, содержимое, отслеживать события или просто удалить.

qa-: Класс с этой приставкой необходим для поиска и связывания элементов DOM в автоматизированных тестах. Хорошей практикой является использование атриботов data- в качестве контейнеров данных для тестирования.