ustatic-css 0.0.1-b.2 → 0.0.1-beta.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +92 -90
- package/README.ru.md +206 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,63 +1,67 @@
|
|
|
1
1
|
# ustatic-css
|
|
2
2
|
|
|
3
|
-
> **u**tility **static** **css** framework —
|
|
3
|
+
> **u**tility **static** **css** framework — a set of utility CSS classes for rapid interface development.
|
|
4
4
|
|
|
5
5
|
<p align="center">
|
|
6
|
-
<img src="https://img.shields.io/badge/version-0.0.1-blue" alt="
|
|
7
|
-
<img src="https://img.shields.io/badge/license-MIT-green" alt="
|
|
8
|
-
<img src="https://img.shields.io/badge/module-ESM%20%7C%20CJS-lightgrey" alt="
|
|
6
|
+
<img src="https://img.shields.io/badge/version-0.0.1-blue" alt="Version">
|
|
7
|
+
<img src="https://img.shields.io/badge/license-MIT-green" alt="License">
|
|
8
|
+
<img src="https://img.shields.io/badge/module-ESM%20%7C%20CJS-lightgrey" alt="Modules">
|
|
9
9
|
</p>
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
**[🇷🇺 Русская версия](./README.ru.md)**
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## 📦 Overview
|
|
16
|
+
|
|
17
|
+
**ustatic-css** is a utility CSS framework for building modern interfaces. Built on design system tokens.
|
|
14
18
|
|
|
15
|
-
###
|
|
19
|
+
### Why ustatic-css?
|
|
16
20
|
|
|
17
|
-
|
|
18
|
-
-
|
|
19
|
-
-
|
|
21
|
+
In micro-frontends, typical utility frameworks (Tailwind, UnoCSS) create challenges:
|
|
22
|
+
- Complex configurations requiring synchronization between teams
|
|
23
|
+
- Style duplication between modules, increasing bundle size
|
|
20
24
|
|
|
21
|
-
**ustatic-css**
|
|
22
|
-
-
|
|
23
|
-
-
|
|
24
|
-
-
|
|
25
|
+
**ustatic-css** solves these problems:
|
|
26
|
+
- Unified token system for consistency across micro-frontends
|
|
27
|
+
- Modular loading of only required styles
|
|
28
|
+
- Runtime class activation capability
|
|
25
29
|
|
|
26
|
-
###
|
|
30
|
+
### Project includes
|
|
27
31
|
|
|
28
|
-
- 🎨
|
|
29
|
-
- 🧩
|
|
30
|
-
- 🌐
|
|
31
|
-
- 🔌
|
|
32
|
+
- 🎨 Utility CSS classes for typography, spacing, positioning, colors
|
|
33
|
+
- 🧩 `useCssProperties` and `useTokens` hooks for style management in JavaScript
|
|
34
|
+
- 🌐 Responsive design with breakpoints `xs`, `md`, `def`, `lg`
|
|
35
|
+
- 🔌 Module exports as ESM and CJS
|
|
32
36
|
|
|
33
|
-
## 🌐
|
|
37
|
+
## 🌐 Documentation
|
|
34
38
|
|
|
35
|
-
|
|
39
|
+
Full documentation is available at [https://yudinmaxim.github.io/ustatic-css/](https://yudinmaxim.github.io/ustatic-css/)
|
|
36
40
|
|
|
37
|
-
- [📘 `useCssProperties` —
|
|
38
|
-
- [📘 `useTokens` —
|
|
39
|
-
- [📘
|
|
40
|
-
- [📗
|
|
41
|
+
- [📘 `useCssProperties` — CSS Properties Management](https://yudinmaxim.github.io/ustatic-css/api/use-css-properties)
|
|
42
|
+
- [📘 `useTokens` — CSS Tokens Usage](https://yudinmaxim.github.io/ustatic-css/api/use-tokens)
|
|
43
|
+
- [📘 Utility Classes (detailed)](https://yudinmaxim.github.io/ustatic-css/guides/css-classes)
|
|
44
|
+
- [📗 Dictionary of All Classes](https://yudinmaxim.github.io/ustatic-css/reference/classes)
|
|
41
45
|
|
|
42
|
-
## 🚀
|
|
46
|
+
## 🚀 Quick Start
|
|
43
47
|
|
|
44
|
-
###
|
|
48
|
+
### Installation
|
|
45
49
|
|
|
46
50
|
```bash
|
|
47
51
|
npm install ustatic-css
|
|
48
52
|
```
|
|
49
53
|
|
|
50
|
-
###
|
|
54
|
+
### Usage
|
|
51
55
|
|
|
52
|
-
#### CSS
|
|
56
|
+
#### CSS Classes
|
|
53
57
|
|
|
54
|
-
|
|
58
|
+
Import the main stylesheet:
|
|
55
59
|
|
|
56
60
|
```js
|
|
57
61
|
import 'ustatic-css';
|
|
58
62
|
```
|
|
59
63
|
|
|
60
|
-
|
|
64
|
+
Or import individual modules:
|
|
61
65
|
|
|
62
66
|
```js
|
|
63
67
|
import 'ustatic-css/base';
|
|
@@ -66,53 +70,53 @@ import 'ustatic-css/spacing';
|
|
|
66
70
|
import 'ustatic-css/flexbox';
|
|
67
71
|
```
|
|
68
72
|
|
|
69
|
-
|
|
73
|
+
Use classes in markup:
|
|
70
74
|
|
|
71
75
|
```html
|
|
72
|
-
<!--
|
|
76
|
+
<!-- Card with flexbox -->
|
|
73
77
|
<div class="flex justify-between items-center p-4 bg-white border border-gray-200 rounded-base">
|
|
74
|
-
<span class="text-lg font-semibold text-gray-800"
|
|
78
|
+
<span class="text-lg font-semibold text-gray-800">Title</span>
|
|
75
79
|
<button class="px-4 py-2 bg-blue-500 text-white rounded-base hover:bg-blue-600 cursor-pointer">
|
|
76
|
-
|
|
80
|
+
Button
|
|
77
81
|
</button>
|
|
78
82
|
</div>
|
|
79
83
|
|
|
80
|
-
<!--
|
|
84
|
+
<!-- Badge -->
|
|
81
85
|
<span class="inline-block px-2 py-1 text-xs font-semibold text-red-600 bg-red-100 rounded-base">
|
|
82
86
|
New
|
|
83
87
|
</span>
|
|
84
88
|
|
|
85
|
-
<!--
|
|
89
|
+
<!-- Spinning animation -->
|
|
86
90
|
<div class="animation:spin-4">⚙️</div>
|
|
87
91
|
```
|
|
88
92
|
|
|
89
|
-
###
|
|
93
|
+
### Available Classes
|
|
90
94
|
|
|
91
|
-
|
|
92
|
-
-
|
|
93
|
-
-
|
|
95
|
+
**Core modules:**
|
|
96
|
+
- **Typography**: `.text-{size}`, `.font-{weight}`, `.text-{color}-{brightness}`
|
|
97
|
+
- **Spacing**: `.m-{space}`, `.p-{space}`, `.mt-{space}`, `.px-{space}`, etc.
|
|
94
98
|
- **Flexbox**: `.flex`, `.items-center`, `.justify-between`, `.gap-{size}`
|
|
95
|
-
-
|
|
96
|
-
-
|
|
97
|
-
-
|
|
98
|
-
-
|
|
99
|
-
-
|
|
100
|
-
-
|
|
101
|
-
|
|
102
|
-
|
|
99
|
+
- **Positioning**: `.relative`, `.absolute`, `.z-{index}`
|
|
100
|
+
- **Background**: `.bg-{color}-{brightness}`, `.bg-opacity-{0|25|50|75|100}`
|
|
101
|
+
- **Borders**: `.border`, `.border-{color}-{brightness}`, `.rounded-{size}` (e.g., `.rounded-base`, `.rounded-lg`)
|
|
102
|
+
- **Sizing**: `.w-{size}`, `.h-{size}`, `.min-w-{size}`, `.max-h-{size}`
|
|
103
|
+
- **Effects**: `.opacity-{0-100}`, `.rotate-{angle}`
|
|
104
|
+
- **Animations**: `.blink`, `.animation:spin-{1-10}`, `.active:pulse`
|
|
105
|
+
|
|
106
|
+
**Colors with brightness:** All color classes support brightness specification via hyphen:
|
|
103
107
|
- `.bg-red-500`, `.bg-blue-300`, `.bg-green-700`
|
|
104
108
|
- `.text-gray-600`, `.text-primary-400`
|
|
105
109
|
- `.border-purple-500`, `.border-orange-200`
|
|
106
110
|
|
|
107
|
-
|
|
111
|
+
For the complete list of 350+ classes, see [Utility Classes Dictionary](https://yudinmaxim.github.io/ustatic-css/reference/classes).
|
|
108
112
|
|
|
109
|
-
####
|
|
113
|
+
#### Runtime Style Activation
|
|
110
114
|
|
|
111
|
-
|
|
115
|
+
To load styles, use the ready-made Vue plugin or the universal method. Direct dynamic CSS import via `import()` is not required.
|
|
112
116
|
|
|
113
|
-
#### Vue 3
|
|
117
|
+
#### Vue 3 Plugin (ready-made)
|
|
114
118
|
|
|
115
|
-
|
|
119
|
+
The package provides a ready-made plugin for on-the-fly style activation.
|
|
116
120
|
|
|
117
121
|
```js
|
|
118
122
|
// main.js / main.ts
|
|
@@ -122,12 +126,12 @@ import App from './App.vue';
|
|
|
122
126
|
|
|
123
127
|
const app = createApp(App);
|
|
124
128
|
|
|
125
|
-
//
|
|
129
|
+
// Option 1: load specific framework modules
|
|
126
130
|
app.use(ustaticCss, {
|
|
127
|
-
modules: ['flexbox', 'spacing', 'typography'] //
|
|
131
|
+
modules: ['flexbox', 'spacing', 'typography'] // see module list below
|
|
128
132
|
});
|
|
129
133
|
|
|
130
|
-
//
|
|
134
|
+
// Option 2: auto-detect modules from used classes
|
|
131
135
|
app.use(ustaticCss, {
|
|
132
136
|
classes: ['flex', 'p-4', 'text-lg']
|
|
133
137
|
});
|
|
@@ -135,68 +139,66 @@ app.use(ustaticCss, {
|
|
|
135
139
|
app.mount('#app');
|
|
136
140
|
```
|
|
137
141
|
|
|
138
|
-
|
|
142
|
+
Plugin/loader options:
|
|
139
143
|
|
|
140
|
-
|
|
|
141
|
-
|
|
142
|
-
| `modules` | `string[]` |
|
|
143
|
-
| `classes` | `string[]` |
|
|
144
|
+
| Option | Type | Description |
|
|
145
|
+
|--------|------|-------------|
|
|
146
|
+
| `modules` | `string[]` | List of modules to include |
|
|
147
|
+
| `classes` | `string[]` | List of classes for auto-detection |
|
|
144
148
|
|
|
145
|
-
|
|
149
|
+
**Available modules:** `align`, `animations`, `base`, `bg`, `border`, `cursor`, `display`, `effects`, `filters`, `flexbox`, `grid`, `hide`, `interactivity`, `outline`, `position`, `scroll`, `sizing`, `spacing`, `typography`
|
|
146
150
|
|
|
147
|
-
|
|
151
|
+
If no options are provided — base styles (`ustatic.css`) and variables (`vars.css`) are loaded.
|
|
148
152
|
|
|
149
|
-
####
|
|
153
|
+
#### Loader Usage Examples
|
|
150
154
|
|
|
151
155
|
```js
|
|
152
|
-
// Vue 3:
|
|
156
|
+
// Vue 3: load specific modules
|
|
153
157
|
app.use(ustaticCss, {
|
|
154
158
|
modules: ['flexbox', 'spacing', 'typography', 'border']
|
|
155
159
|
});
|
|
156
160
|
|
|
157
|
-
// Vue 3:
|
|
161
|
+
// Vue 3: auto-detect from classes
|
|
158
162
|
app.use(ustaticCss, {
|
|
159
163
|
classes: ['flex', 'p-4', 'text-lg', 'bg-blue-500']
|
|
160
164
|
});
|
|
161
165
|
|
|
162
|
-
// Vanilla JS / React / Svelte:
|
|
166
|
+
// Vanilla JS / React / Svelte: explicit loading
|
|
163
167
|
import { loadStyles } from 'ustatic-css/scripts';
|
|
164
168
|
|
|
165
169
|
await loadStyles({ modules: ['typography', 'spacing'] });
|
|
166
170
|
|
|
167
|
-
//
|
|
171
|
+
// Auto-detect from classes
|
|
168
172
|
await loadStyles({ classes: ['flex', 'justify-between', 'items-center'] });
|
|
169
173
|
```
|
|
170
174
|
|
|
171
|
-
#### SSR
|
|
175
|
+
#### SSR Compatibility
|
|
172
176
|
|
|
173
|
-
|
|
177
|
+
The `loadStyles` method works safely with SSR: if `document` is not available, loading is skipped on the server and performed in the browser.
|
|
174
178
|
|
|
175
|
-
## 🧩
|
|
179
|
+
## 🧩 Features
|
|
176
180
|
|
|
177
|
-
-
|
|
178
|
-
-
|
|
179
|
-
-
|
|
180
|
-
-
|
|
181
|
-
- **350+
|
|
182
|
-
-
|
|
183
|
-
-
|
|
184
|
-
-
|
|
185
|
-
-
|
|
186
|
-
- **SSR
|
|
187
|
-
- **ESM
|
|
181
|
+
- **Ready Vue Plugin** — activation and on-demand loading of modular styles at runtime
|
|
182
|
+
- **Universal Loader** — `loadStyles` method for any environment (Vanilla/React/Svelte/Nuxt/SSR)
|
|
183
|
+
- **Auto-detection** — loader automatically determines required modules from class list
|
|
184
|
+
- **Design System Tokens** — all styles based on a unified token system
|
|
185
|
+
- **350+ Utility Classes** — 19 modules for typography, spacing, positioning, colors, and effects
|
|
186
|
+
- **Colors with Brightness** — support for shades like `{color}-{brightness}` (red-500, blue-300, green-700)
|
|
187
|
+
- **Dynamic Hooks** — `useCssProperties` and `useTokens` for style management in JavaScript
|
|
188
|
+
- **Responsiveness** — breakpoint support for `xs`, `md`, `def`, `lg`
|
|
189
|
+
- **Modularity** — import only needed components to reduce bundle size
|
|
190
|
+
- **SSR Compatibility** — safe operation on server and browser
|
|
191
|
+
- **ESM and CJS** — modern module standards support
|
|
188
192
|
|
|
189
193
|
## TODO
|
|
190
|
-
[ ]
|
|
194
|
+
[ ] Develop interactive examples and library usage documentation
|
|
191
195
|
|
|
192
|
-
[ ]
|
|
196
|
+
[ ] Publish to public registries
|
|
193
197
|
|
|
198
|
+
## 📄 License
|
|
194
199
|
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
Этот проект распространяется под лицензией MIT. Подробнее см. в файле [LICENSE](./LICENSE).
|
|
200
|
+
This project is licensed under the MIT license. See [LICENSE](./LICENSE) for details.
|
|
198
201
|
|
|
199
202
|
---
|
|
200
203
|
|
|
201
|
-
🤖
|
|
202
|
-
|
|
204
|
+
🤖 *Part of the documentation was created using artificial intelligence to improve readability and completeness.*
|
package/README.ru.md
ADDED
|
@@ -0,0 +1,206 @@
|
|
|
1
|
+
# ustatic-css
|
|
2
|
+
|
|
3
|
+
> **u**tility **static** **css** framework — набор утилитарных CSS-классов для быстрой разработки интерфейсов.
|
|
4
|
+
|
|
5
|
+
<p align="center">
|
|
6
|
+
<img src="https://img.shields.io/badge/version-0.0.1-blue" alt="Версия">
|
|
7
|
+
<img src="https://img.shields.io/badge/license-MIT-green" alt="Лицензия">
|
|
8
|
+
<img src="https://img.shields.io/badge/module-ESM%20%7C%20CJS-lightgrey" alt="Модули">
|
|
9
|
+
</p>
|
|
10
|
+
|
|
11
|
+
**[🇺🇸 English version](./README.md)**
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## 📦 Обзор
|
|
16
|
+
|
|
17
|
+
**ustatic-css** — утилитарный CSS-фреймворк для создания современных интерфейсов. Основан на токенах дизайн-системы.
|
|
18
|
+
|
|
19
|
+
### Почему ustatic-css?
|
|
20
|
+
|
|
21
|
+
В микрофронтендах типичные утилитарные фреймворки (Tailwind, UnoCSS) создают сложности:
|
|
22
|
+
- Сложные конфигурации, требующие синхронизации между командами
|
|
23
|
+
- Дублирование стилей между модулями, увеличивающее размер бандла
|
|
24
|
+
|
|
25
|
+
**ustatic-css** решает эти проблемы:
|
|
26
|
+
- Единая система токенов для консистентности между микрофронтендами
|
|
27
|
+
- Модульная загрузка только нужных стилей
|
|
28
|
+
- Возможность активации классов в рантайме
|
|
29
|
+
|
|
30
|
+
### Проект включает
|
|
31
|
+
|
|
32
|
+
- 🎨 Утилитарные CSS-классы для типографики, отступов, позиционирования, цветов
|
|
33
|
+
- 🧩 Хуки `useCssProperties` и `useTokens` для управления стилями в JavaScript
|
|
34
|
+
- 🌐 Адаптивный дизайн с брейкпоинтами `xs`, `md`, `def`, `lg`
|
|
35
|
+
- 🔌 Экспорт модулей как ESM и CJS
|
|
36
|
+
|
|
37
|
+
## 🌐 Документация
|
|
38
|
+
|
|
39
|
+
Полная документация доступна на сайте [https://yudinmaxim.github.io/ustatic-css/](https://yudinmaxim.github.io/ustatic-css/)
|
|
40
|
+
|
|
41
|
+
- [📘 `useCssProperties` — Управление CSS-свойствами](https://yudinmaxim.github.io/ustatic-css/api/use-css-properties)
|
|
42
|
+
- [📘 `useTokens` — Работа с токенами CSS](https://yudinmaxim.github.io/ustatic-css/api/use-tokens)
|
|
43
|
+
- [📘 Утилитарные классы (подробно)](https://yudinmaxim.github.io/ustatic-css/guides/css-classes)
|
|
44
|
+
- [📗 Словарь всех классов](https://yudinmaxim.github.io/ustatic-css/reference/classes) — полный список с примерами использования
|
|
45
|
+
|
|
46
|
+
## 🚀 Быстрый старт
|
|
47
|
+
|
|
48
|
+
### Установка
|
|
49
|
+
|
|
50
|
+
```bash
|
|
51
|
+
npm install ustatic-css
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
### Использование
|
|
55
|
+
|
|
56
|
+
#### CSS-классы
|
|
57
|
+
|
|
58
|
+
Подключите основной файл стилей:
|
|
59
|
+
|
|
60
|
+
```js
|
|
61
|
+
import 'ustatic-css';
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
Или импортируйте отдельные модули:
|
|
65
|
+
|
|
66
|
+
```js
|
|
67
|
+
import 'ustatic-css/base';
|
|
68
|
+
import 'ustatic-css/typography';
|
|
69
|
+
import 'ustatic-css/spacing';
|
|
70
|
+
import 'ustatic-css/flexbox';
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
Используйте классы в разметке:
|
|
74
|
+
|
|
75
|
+
```html
|
|
76
|
+
<!-- Карточка с flexbox -->
|
|
77
|
+
<div class="flex justify-between items-center p-4 bg-white border border-gray-200 rounded-base">
|
|
78
|
+
<span class="text-lg font-semibold text-gray-800">Заголовок</span>
|
|
79
|
+
<button class="px-4 py-2 bg-blue-500 text-white rounded-base hover:bg-blue-600 cursor-pointer">
|
|
80
|
+
Кнопка
|
|
81
|
+
</button>
|
|
82
|
+
</div>
|
|
83
|
+
|
|
84
|
+
<!-- Бейдж -->
|
|
85
|
+
<span class="inline-block px-2 py-1 text-xs font-semibold text-red-600 bg-red-100 rounded-base">
|
|
86
|
+
New
|
|
87
|
+
</span>
|
|
88
|
+
|
|
89
|
+
<!-- Анимация вращения -->
|
|
90
|
+
<div class="animation:spin-4">⚙️</div>
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### Доступные классы
|
|
94
|
+
|
|
95
|
+
**Основные модули:**
|
|
96
|
+
- **Типографика**: `.text-{size}`, `.font-{weight}`, `.text-{color}-{brightness}`
|
|
97
|
+
- **Отступы**: `.m-{space}`, `.p-{space}`, `.mt-{space}`, `.px-{space}` и т.д.
|
|
98
|
+
- **Flexbox**: `.flex`, `.items-center`, `.justify-between`, `.gap-{size}`
|
|
99
|
+
- **Позиционирование**: `.relative`, `.absolute`, `.z-{index}`
|
|
100
|
+
- **Фон**: `.bg-{color}-{brightness}`, `.bg-opacity-{0|25|50|75|100}`
|
|
101
|
+
- **Границы**: `.border`, `.border-{color}-{brightness}`, `.rounded-{size}` (например, `.rounded-base`, `.rounded-lg`)
|
|
102
|
+
- **Размеры**: `.w-{size}`, `.h-{size}`, `.min-w-{size}`, `.max-h-{size}`
|
|
103
|
+
- **Эффекты**: `.opacity-{0-100}`, `.rotate-{angle}`
|
|
104
|
+
- **Анимации**: `.blink`, `.animation:spin-{1-10}`, `.active:pulse`
|
|
105
|
+
|
|
106
|
+
**Цвета с яркостью:** Все цветовые классы поддерживают указания яркости через дефис:
|
|
107
|
+
- `.bg-red-500`, `.bg-blue-300`, `.bg-green-700`
|
|
108
|
+
- `.text-gray-600`, `.text-primary-400`
|
|
109
|
+
- `.border-purple-500`, `.border-orange-200`
|
|
110
|
+
|
|
111
|
+
Полный список из 350+ классов см. в [Словаре утилитарных классов](https://yudinmaxim.github.io/ustatic-css/reference/classes).
|
|
112
|
+
|
|
113
|
+
#### Активация стилей в рантайме
|
|
114
|
+
|
|
115
|
+
Для загрузки стилей используйте готовый Vue-плагин или универсальный метод. Прямой динамический импорт CSS через `import()` не требуется.
|
|
116
|
+
|
|
117
|
+
#### Vue 3 плагин (готовый)
|
|
118
|
+
|
|
119
|
+
Пакет предоставляет готовый плагин для активации стилей на лету.
|
|
120
|
+
|
|
121
|
+
```js
|
|
122
|
+
// main.js / main.ts
|
|
123
|
+
import { createApp } from 'vue';
|
|
124
|
+
import { ustaticCss } from 'ustatic-css/scripts';
|
|
125
|
+
import App from './App.vue';
|
|
126
|
+
|
|
127
|
+
const app = createApp(App);
|
|
128
|
+
|
|
129
|
+
// Вариант 1: загрузить конкретные модули фреймворка
|
|
130
|
+
app.use(ustaticCss, {
|
|
131
|
+
modules: ['flexbox', 'spacing', 'typography'] // см. список модулей ниже
|
|
132
|
+
});
|
|
133
|
+
|
|
134
|
+
// Вариант 2: автоподбор модулей по используемым классам
|
|
135
|
+
app.use(ustaticCss, {
|
|
136
|
+
classes: ['flex', 'p-4', 'text-lg']
|
|
137
|
+
});
|
|
138
|
+
|
|
139
|
+
app.mount('#app');
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
Опции плагина/загрузчика:
|
|
143
|
+
|
|
144
|
+
| Опция | Тип | Описание |
|
|
145
|
+
|-------|-----|----------|
|
|
146
|
+
| `modules` | `string[]` | Список модулей для подключения |
|
|
147
|
+
| `classes` | `string[]` | Список классов для автоподбора модулей |
|
|
148
|
+
|
|
149
|
+
**Доступные модули:** `align`, `animations`, `base`, `bg`, `border`, `cursor`, `display`, `effects`, `filters`, `flexbox`, `grid`, `hide`, `interactivity`, `outline`, `position`, `scroll`, `sizing`, `spacing`, `typography`
|
|
150
|
+
|
|
151
|
+
Если опции не заданы — подключаются базовые стили (`ustatic.css`) и переменные (`vars.css`).
|
|
152
|
+
|
|
153
|
+
#### Примеры использования загрузчика
|
|
154
|
+
|
|
155
|
+
```js
|
|
156
|
+
// Vue 3: загрузить конкретные модули
|
|
157
|
+
app.use(ustaticCss, {
|
|
158
|
+
modules: ['flexbox', 'spacing', 'typography', 'border']
|
|
159
|
+
});
|
|
160
|
+
|
|
161
|
+
// Vue 3: автоподбор по классам
|
|
162
|
+
app.use(ustaticCss, {
|
|
163
|
+
classes: ['flex', 'p-4', 'text-lg', 'bg-blue-500']
|
|
164
|
+
});
|
|
165
|
+
|
|
166
|
+
// Vanilla JS / React / Svelte: явная загрузка
|
|
167
|
+
import { loadStyles } from 'ustatic-css/scripts';
|
|
168
|
+
|
|
169
|
+
await loadStyles({ modules: ['typography', 'spacing'] });
|
|
170
|
+
|
|
171
|
+
// Автоподбор по классам
|
|
172
|
+
await loadStyles({ classes: ['flex', 'justify-between', 'items-center'] });
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
#### SSR-совместимость
|
|
176
|
+
|
|
177
|
+
Метод `loadStyles` безопасно работает при SSR: если `document` недоступен, загрузка пропускается на сервере и выполняется в браузере.
|
|
178
|
+
|
|
179
|
+
## 🧩 Особенности
|
|
180
|
+
|
|
181
|
+
- **Готовый Vue-плагин** — активация и подгрузка модульных стилей в рантайме
|
|
182
|
+
- **Универсальный загрузчик** — метод `loadStyles` для любых сред (Vanilla/React/Svelte/Nuxt/SSR)
|
|
183
|
+
- **Автоподбор модулей** — загрузчик автоматически определит нужные модули по списку классов
|
|
184
|
+
- **Токены дизайн-системы** — все стили основаны на единой системе токенов
|
|
185
|
+
- **350+ утилитарных классов** — 19 модулей для типографики, отступов, позиционирования, цветов и эффектов
|
|
186
|
+
- **Цвета с яркостью** — поддержка оттенков вида `{color}-{brightness}` (red-500, blue-300, green-700)
|
|
187
|
+
- **Динамические хуки** — `useCssProperties` и `useTokens` для управления стилями в JavaScript
|
|
188
|
+
- **Адаптивность** — поддержка брейкпоинтов `xs`, `md`, `def`, `lg`
|
|
189
|
+
- **Модульность** — импорт только нужных компонентов для уменьшения размера бандла
|
|
190
|
+
- **SSR-совместимость** — безопасная работа на сервере и в браузере
|
|
191
|
+
- **ESM и CJS** — поддержка современных стандартов модулей
|
|
192
|
+
|
|
193
|
+
## TODO
|
|
194
|
+
[ ] Разработка интерактивных примеров и документации на работу с библиотекой
|
|
195
|
+
|
|
196
|
+
[ ] Публикация в публичных сервисах
|
|
197
|
+
|
|
198
|
+
|
|
199
|
+
## 📄 Лицензия
|
|
200
|
+
|
|
201
|
+
Этот проект распространяется под лицензией MIT. Подробнее см. в файле [LICENSE](./LICENSE).
|
|
202
|
+
|
|
203
|
+
---
|
|
204
|
+
|
|
205
|
+
🤖 *Часть документации создана с применением искусственного интеллекта для улучшения читаемости и полноты.*
|
|
206
|
+
|