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

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

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

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

o-: Объект

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

c-: Компонента

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

u-: Утилита

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

t-: Тема оформления

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

s-: Косметический стиль

Правила стилистического оформления отдельных элементов веб-интерфейса. Стиль контекста определяет косметический вид отдельной компоненты чаще, области документа реже. Стиль оформления подобен теме.

is-, has-: Модификатор состояния

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

js-: Селектор веб-приложения для ссылки на элемент DOM-дерева

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

qa-: Селектор автоматизированных тестов

Класс с этой приставкой необходим для поиска и связывания элементов DOM в автоматизированных тестах визаулизации GUI в браузере. Оцениваются результаты прохождения различных сценариев взаимодействия и функционирование подсистем. Хорошей практикой является использование атрибота data- в качестве контейнера данных промежуточного состояния элемента в сценарии.

Базовые настройки и переопределение стилей браузера

./document

Переопределение браузерных правил CSS для стандартных элементов страницы HTML. Определены правила оформления простого документа на основе базовых переменных дизайн-системы Протосайта.

./settings

Базовые переменные дизайн-системы Протосайта: размерности величин и экранов адаптивной вёрстки, шрифты, тени, палитра цветов.

Подключение модулей библиотеки

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

npm install @bpanchenko/uikit --save-dev

Подгрузка внешнего ресурса

//assets.protosite.xyz/uikit/
 ├── component
 │   ├── badge.css
 │   ├── button.css
 │   ├── chart.css
 │   ├── control.css
 │   ├── field.css
 │   ├── grid.css
 │   ├── list.css
 │   ├── modal.css
 │   ├── pagination.css
 │   ├── panel.css
 │   ├── popover.css
 │   ├── progress.css
 │   ├── tabs.css
 │   └── thumbnail.css
 │
 ├── element
 │   ├── any-mixes.css
 │   ├── code.css
 │   ├── headings.css
 │   ├── icon.css
 │   ├── icon.glyphs-arrow.css
 │   ├── icon.glyphs.css
 │   ├── link.css
 │   ├── lists.css
 │   ├── paragraph.css
 │   ├── root.css
 │   ├── table.css
 │   └── text.css
 │
 ├── style
 │   ├── animated-gradient.css
 │   ├── backgrounds.css
 │   ├── clean.css
 │   ├── coloring.css
 │   ├── cursor.css
 │   ├── floating.css
 │   ├── highlighted.css
 │   ├── hovered.css
 │   ├── icon.css
 │   ├── inversed.css
 │   ├── link.css
 │   ├── loading.css
 │   ├── rounded.css
 │   ├── shadow.css
 │   ├── sizes.css
 │   ├── striped.css
 │   ├── text.css
 │   └── transform.css
 │
 ├── components.css
 ├── elements.css
 ├── main.css
 ├── objects.css
 ├── styles.css
 └── utilities.css

Таблицы стилей сопровождаются модулями JavaScript с расширением .mjs, например:

//assets.protosite.xyz/uikit/elements.css
//assets.protosite.xyz/uikit/elements.mjs