4.26.91 • Published 8 months ago

@bpanchenko/uikit v4.26.91

Weekly downloads
-
License
LGPL-3.0-only
Repository
github
Last release
8 months ago

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

npm

Библиотека правил 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

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

Использование активов библиотеки

Через подключение модулей пакета Node.js

yarn add @bpanchenko/uikit -D

Через загрузку ресурсов веб-страницы в браузер

//assets.protosite.rocks/uikit/components.{css,mjs}
//assets.protosite.rocks/uikit/document.{css,mjs}
//assets.protosite.rocks/uikit/main.{css,mjs}
//assets.protosite.rocks/uikit/objects.{css,mjs}
//assets.protosite.rocks/uikit/styles.{css,mjs}
//assets.protosite.rocks/uikit/utilities.{css,mjs}

//assets.protosite.rocks/uikit/component/avatar.{css,mjs}
//assets.protosite.rocks/uikit/component/backdrop.{css,mjs}
//assets.protosite.rocks/uikit/component/badge.{css,mjs}
//assets.protosite.rocks/uikit/component/button.{css,mjs}
//assets.protosite.rocks/uikit/component/chart.{css,mjs}
//assets.protosite.rocks/uikit/component/control.{css,mjs}
//assets.protosite.rocks/uikit/component/dialog.{css,mjs}
//assets.protosite.rocks/uikit/component/list.{css,mjs}
//assets.protosite.rocks/uikit/component/pagination.{css,mjs}
//assets.protosite.rocks/uikit/component/panel.{css,mjs}
//assets.protosite.rocks/uikit/component/popover.{css,mjs}
//assets.protosite.rocks/uikit/component/progress.{css,mjs}
//assets.protosite.rocks/uikit/component/tabs.{css,mjs}
//assets.protosite.rocks/uikit/component/thumbnail.{css,mjs}
//assets.protosite.rocks/uikit/component/toolbar.{css,mjs}

//assets.protosite.rocks/uikit/style/animated-gradient.{css,mjs}
//assets.protosite.rocks/uikit/style/backgrounds.{css,mjs}
//assets.protosite.rocks/uikit/style/clean.{css,mjs}
//assets.protosite.rocks/uikit/style/cursor.{css,mjs}
//assets.protosite.rocks/uikit/style/floating.{css,mjs}
//assets.protosite.rocks/uikit/style/highlighted.{css,mjs}
//assets.protosite.rocks/uikit/style/hovered.{css,mjs}
//assets.protosite.rocks/uikit/style/icon.{css,mjs}
//assets.protosite.rocks/uikit/style/inversed.{css,mjs}
//assets.protosite.rocks/uikit/style/lead.{css,mjs}
//assets.protosite.rocks/uikit/style/link.{css,mjs}
//assets.protosite.rocks/uikit/style/loading.{css,mjs}
//assets.protosite.rocks/uikit/style/rounded.{css,mjs}
//assets.protosite.rocks/uikit/style/shadows.{css,mjs}
//assets.protosite.rocks/uikit/style/sizes.{css,mjs}
//assets.protosite.rocks/uikit/style/striped.{css,mjs}
//assets.protosite.rocks/uikit/style/text.{css,mjs}
//assets.protosite.rocks/uikit/style/transform.{css,mjs}
4.26.91

8 months ago

4.26.90

9 months ago

4.26.87

9 months ago

4.26.86

9 months ago

4.26.85

9 months ago

4.26.89

9 months ago

4.26.88

9 months ago

4.26.83

9 months ago

4.26.82

9 months ago

4.26.81

10 months ago

4.26.84

9 months ago

4.26.80

11 months ago

4.26.76

12 months ago

4.26.75

12 months ago

4.26.74

1 year ago

4.26.79

11 months ago

4.26.78

11 months ago

4.26.77

12 months ago

4.26.73

1 year ago

4.26.72

1 year ago

4.26.71

1 year ago

4.26.69

1 year ago

4.26.70

1 year ago

4.25.70

1 year ago

4.25.69

1 year ago

4.25.68

2 years ago

4.25.64

2 years ago

4.25.62

2 years ago

4.25.61

2 years ago

4.25.67

2 years ago

4.25.65

2 years ago

4.24.60

2 years ago

4.24.61

2 years ago

4.23.58

2 years ago

4.23.59

2 years ago

4.24.59

2 years ago

4.23.57

2 years ago

4.22.56

2 years ago

4.22.55

2 years ago

4.22.57

2 years ago

4.22.49

2 years ago

4.22.48

2 years ago

4.22.50

2 years ago

4.22.52

2 years ago

4.22.51

2 years ago

4.22.53

2 years ago

4.20.45

2 years ago

4.18.43

2 years ago

4.20.45-beta.0

2 years ago

4.11.32

3 years ago

3.5.14

3 years ago

3.5.13

3 years ago

3.8.25

3 years ago

3.5.12

3 years ago

4.15.38

3 years ago

3.8.23

3 years ago

4.15.37

3 years ago

3.8.24

3 years ago

4.13.35

3 years ago

4.11.33

3 years ago

3.7.18

3 years ago

3.5.15

3 years ago

4.8.27

3 years ago

4.8.26

3 years ago

4.8.28

3 years ago

3.8.20

3 years ago

4.14.35

3 years ago

4.14.36

3 years ago

4.10.30

3 years ago

4.14.37

3 years ago

4.10.31

3 years ago

3.4.8

3 years ago

3.4.10

3 years ago

3.4.9

3 years ago

3.2.2

3 years ago

3.2.1

3 years ago

3.0.0

3 years ago