gullu-css 1.0.0
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 +129 -0
- package/appliers/background.js +27 -0
- package/appliers/boxModel.js +58 -0
- package/appliers/effects.js +18 -0
- package/appliers/image.js +30 -0
- package/appliers/layout.js +27 -0
- package/appliers/position.js +20 -0
- package/appliers/typography.js +44 -0
- package/index.html +588 -0
- package/main.js +31 -0
- package/package.json +19 -0
- package/values.js +406 -0
package/index.html
ADDED
|
@@ -0,0 +1,588 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>CleanCSS — Utility Engine Docs</title>
|
|
7
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
8
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
9
|
+
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
|
|
10
|
+
<style>
|
|
11
|
+
/* Minimal browser reset only — zero design CSS here */
|
|
12
|
+
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
13
|
+
body { font-family: 'Plus Jakarta Sans', sans-serif; }
|
|
14
|
+
code, pre { font-family: 'JetBrains Mono', monospace; }
|
|
15
|
+
a { text-decoration: none; color: inherit; }
|
|
16
|
+
|
|
17
|
+
/* Scroll behavior */
|
|
18
|
+
html { scroll-behavior: smooth; }
|
|
19
|
+
|
|
20
|
+
/* Sticky top helper */
|
|
21
|
+
.sticky-nav { position: sticky; top: 0; z-index: 100; }
|
|
22
|
+
|
|
23
|
+
/* Accent glow using box-shadow — allowed as its a browser enhancement */
|
|
24
|
+
.glow-green { box-shadow: 0 0 32px 0 rgba(52,211,153,0.20); }
|
|
25
|
+
.glow-green-sm { box-shadow: 0 0 12px 0 rgba(52,211,153,0.25); }
|
|
26
|
+
|
|
27
|
+
/* Code block scroll */
|
|
28
|
+
.code-scroll { overflow-x: auto; white-space: pre; }
|
|
29
|
+
|
|
30
|
+
/* Sidebar fixed layout */
|
|
31
|
+
.layout-wrapper { display: flex; align-items: flex-start; }
|
|
32
|
+
.sidebar { width: 260px; flex-shrink: 0; position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; }
|
|
33
|
+
.main-content { flex: 1; min-width: 0; }
|
|
34
|
+
|
|
35
|
+
/* Nav link states */
|
|
36
|
+
.sidebar-link { display: block; padding: 8px 16px; border-radius: 8px; cursor: pointer; transition: background 0.2s, color 0.2s; }
|
|
37
|
+
.sidebar-link:hover { background: rgba(52,211,153,0.1); color: #34d399; }
|
|
38
|
+
.sidebar-link.active { background: rgba(52,211,153,0.15); color: #34d399; font-weight: 600; }
|
|
39
|
+
|
|
40
|
+
/* Token grid */
|
|
41
|
+
.token-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 8px; margin-bottom: 4px; transition: background 0.15s; }
|
|
42
|
+
.token-row:hover { background: rgba(255,255,255,0.04); }
|
|
43
|
+
|
|
44
|
+
/* Copy button */
|
|
45
|
+
.copy-btn { position: absolute; top: 12px; right: 12px; cursor: pointer; border: 1px solid rgba(52,211,153,0.3); background: rgba(52,211,153,0.08); color: #34d399; border-radius: 6px; padding: 4px 12px; font-size: 12px; font-family: 'Plus Jakarta Sans', sans-serif; transition: background 0.2s, color 0.2s; }
|
|
46
|
+
.copy-btn:hover { background: rgba(52,211,153,0.2); }
|
|
47
|
+
.copy-btn.copied { background: rgba(52,211,153,0.3); color: #fff; }
|
|
48
|
+
</style>
|
|
49
|
+
</head>
|
|
50
|
+
<body class="bg-slate-950">
|
|
51
|
+
|
|
52
|
+
<!-- ─── NAVBAR ─────────────────────────────────────────── -->
|
|
53
|
+
<nav class="sticky-nav bg-slate-900 shadow-md">
|
|
54
|
+
<div class="d-flex items-center justify-between p-4 pl-8 pr-8 w-full">
|
|
55
|
+
<!-- Logo -->
|
|
56
|
+
<div class="d-flex items-center gap-4">
|
|
57
|
+
<div class="w-10 h-10 rounded-lg bg-emerald-500 d-flex items-center justify-center glow-green-sm">
|
|
58
|
+
<span class="text-white font-bold text-base">C</span>
|
|
59
|
+
</div>
|
|
60
|
+
<span class="text-xl font-bold text-white">Clean<span class="text-emerald-400">CSS</span></span>
|
|
61
|
+
<span class="text-xs font-medium text-emerald-400 bg-emerald-400 rounded-full pl-2 pr-2" style="background:rgba(52,211,153,0.12); padding-top:3px; padding-bottom:3px;">v2.0</span>
|
|
62
|
+
</div>
|
|
63
|
+
<!-- Nav Links -->
|
|
64
|
+
<div class="d-flex gap-6 items-center">
|
|
65
|
+
<a href="#backgrounds" class="text-gray-500 font-medium cursor-pointer transition text-sm">Backgrounds</a>
|
|
66
|
+
<a href="#layout" class="text-gray-500 font-medium cursor-pointer transition text-sm">Layout</a>
|
|
67
|
+
<a href="#images" class="text-gray-500 font-medium cursor-pointer transition text-sm">Images</a>
|
|
68
|
+
<a href="#typography" class="text-gray-500 font-medium cursor-pointer transition text-sm">Typography</a>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
</nav>
|
|
72
|
+
|
|
73
|
+
<!-- ─── HERO ───────────────────────────────────────────── -->
|
|
74
|
+
<div class="bg-slate-900 p-16" style="padding-top:80px; padding-bottom:80px; text-align:center;">
|
|
75
|
+
<div class="d-flex flex-col items-center gap-4 max-w-lg m-auto">
|
|
76
|
+
<div class="d-inline-flex items-center gap-2 rounded-full p-1 pl-4 pr-4" style="background: rgba(52,211,153,0.1); border: 1px solid rgba(52,211,153,0.25);">
|
|
77
|
+
<span class="w-2 h-2 rounded-full bg-emerald-400" style="display:inline-block"></span>
|
|
78
|
+
<span class="text-emerald-400 text-sm font-medium">Utility-First CSS Engine</span>
|
|
79
|
+
</div>
|
|
80
|
+
<h1 class="text-5xl font-bold text-white" style="line-height:1.15; margin-top: 12px;">
|
|
81
|
+
Style with classes.<br>
|
|
82
|
+
<span class="text-emerald-400">Zero stylesheet.</span>
|
|
83
|
+
</h1>
|
|
84
|
+
<p class="text-gray-500 font-medium" style="max-width:520px; line-height:1.7; margin-top:8px; font-size:17px;">
|
|
85
|
+
CleanCSS is a runtime utility engine that reads class names directly
|
|
86
|
+
and applies styles in JavaScript — no build step, no stylesheet, no framework required.
|
|
87
|
+
</p>
|
|
88
|
+
<!-- Stats -->
|
|
89
|
+
<div class="d-flex gap-8 m-auto" style="margin-top: 40px;">
|
|
90
|
+
<div class="text-center">
|
|
91
|
+
<div class="text-3xl font-bold text-emerald-400">200+</div>
|
|
92
|
+
<div class="text-sm text-gray-500 font-medium" style="margin-top:4px;">Color Tokens</div>
|
|
93
|
+
</div>
|
|
94
|
+
<div class="text-center">
|
|
95
|
+
<div class="text-3xl font-bold text-emerald-400">7</div>
|
|
96
|
+
<div class="text-sm text-gray-500 font-medium" style="margin-top:4px;">Core Modules</div>
|
|
97
|
+
</div>
|
|
98
|
+
<div class="text-center">
|
|
99
|
+
<div class="text-3xl font-bold text-emerald-400">0</div>
|
|
100
|
+
<div class="text-sm text-gray-500 font-medium" style="margin-top:4px;">CSS Files</div>
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
|
|
106
|
+
<!-- ─── PAGE LAYOUT ────────────────────────────────────── -->
|
|
107
|
+
<div class="layout-wrapper max-w-lg m-auto" style="padding-left:16px; padding-right:16px; gap: 32px;">
|
|
108
|
+
|
|
109
|
+
<!-- Sidebar -->
|
|
110
|
+
<aside class="sidebar p-6" style="padding-top:32px;">
|
|
111
|
+
<p class="text-gray-500 text-xs font-bold" style="text-transform:uppercase; letter-spacing:1.5px; margin-bottom:12px;">Documentation</p>
|
|
112
|
+
<a href="#backgrounds" class="sidebar-link text-gray-500 text-sm">🎨 Background Colors</a>
|
|
113
|
+
<a href="#typography" class="sidebar-link text-gray-500 text-sm">✏️ Typography</a>
|
|
114
|
+
<a href="#layout" class="sidebar-link text-gray-500 text-sm">📐 Layout & Flex</a>
|
|
115
|
+
<a href="#spacing" class="sidebar-link text-gray-500 text-sm">📏 Spacing</a>
|
|
116
|
+
<a href="#sizing" class="sidebar-link text-gray-500 text-sm">📦 Sizing & Borders</a>
|
|
117
|
+
<a href="#images" class="sidebar-link text-gray-500 text-sm">🖼 Image Engine</a>
|
|
118
|
+
<a href="#effects" class="sidebar-link text-gray-500 text-sm">✨ Effects</a>
|
|
119
|
+
<a href="#arbitrary" class="sidebar-link text-gray-500 text-sm">⚡ Arbitrary Values</a>
|
|
120
|
+
</aside>
|
|
121
|
+
|
|
122
|
+
<!-- Main Content -->
|
|
123
|
+
<main class="main-content" style="padding: 32px 0 80px 0;">
|
|
124
|
+
|
|
125
|
+
<!-- ── SECTION: Backgrounds ──────────────────── -->
|
|
126
|
+
<section id="backgrounds" style="margin-bottom: 72px;">
|
|
127
|
+
<div class="d-flex items-center gap-3" style="margin-bottom:8px;">
|
|
128
|
+
<span class="text-2xl">🎨</span>
|
|
129
|
+
<h2 class="text-3xl font-bold text-white">Background Colors</h2>
|
|
130
|
+
</div>
|
|
131
|
+
<p class="text-gray-500 font-medium" style="margin-bottom:24px; line-height:1.7;">Apply background colors using semantic tokens. The engine maps every class to an <span class="text-emerald-400 font-bold">oklch</span> value for perceptual uniformity.</p>
|
|
132
|
+
|
|
133
|
+
<!-- Code Block -->
|
|
134
|
+
<div class="rounded-xl bg-slate-900 shadow-lg" style="position:relative; margin-bottom:24px; border: 1px solid rgba(255,255,255,0.06);">
|
|
135
|
+
<div class="d-flex items-center gap-2 p-4 pb-0 pl-5">
|
|
136
|
+
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
|
137
|
+
<div class="w-3 h-3 rounded-full bg-amber-400"></div>
|
|
138
|
+
<div class="w-3 h-3 rounded-full bg-emerald-500"></div>
|
|
139
|
+
<span class="text-gray-500 text-xs font-medium" style="margin-left:8px;">index.html</span>
|
|
140
|
+
</div>
|
|
141
|
+
<pre class="code-scroll p-6 pt-4 text-sm" style="color:#a3e635; font-size:13px; line-height:1.75;"><!-- Standard semantic colors -->
|
|
142
|
+
<div class="<span style="color:#34d399">bg-emerald-500</span>"></div>
|
|
143
|
+
<div class="<span style="color:#34d399">bg-blue-700</span>"></div>
|
|
144
|
+
<div class="<span style="color:#34d399">bg-red-300</span>"></div>
|
|
145
|
+
<div class="<span style="color:#34d399">bg-slate-900</span>"></div>
|
|
146
|
+
|
|
147
|
+
<!-- Special values -->
|
|
148
|
+
<div class="<span style="color:#34d399">bg-white</span>"></div>
|
|
149
|
+
<div class="<span style="color:#34d399">bg-black</span>"></div>
|
|
150
|
+
<div class="<span style="color:#34d399">bg-transparent</span>"></div></pre>
|
|
151
|
+
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
|
152
|
+
</div>
|
|
153
|
+
|
|
154
|
+
<!-- Color Swatches -->
|
|
155
|
+
<p class="text-gray-500 text-sm font-medium" style="margin-bottom:12px;">Available color palettes:</p>
|
|
156
|
+
<div class="d-flex flex-wrap gap-3" style="margin-bottom:16px;">
|
|
157
|
+
<div class="w-10 h-10 rounded-md bg-emerald-400 shadow-md glow-green-sm" title="emerald-400"></div>
|
|
158
|
+
<div class="w-10 h-10 rounded-md bg-emerald-500 shadow-md" title="emerald-500"></div>
|
|
159
|
+
<div class="w-10 h-10 rounded-md bg-emerald-700 shadow-md" title="emerald-700"></div>
|
|
160
|
+
<div class="w-10 h-10 rounded-md bg-teal-500 shadow-md" title="teal-500"></div>
|
|
161
|
+
<div class="w-10 h-10 rounded-md bg-blue-400 shadow-md" title="blue-400"></div>
|
|
162
|
+
<div class="w-10 h-10 rounded-md bg-blue-600 shadow-md" title="blue-600"></div>
|
|
163
|
+
<div class="w-10 h-10 rounded-md bg-sky-500 shadow-md" title="sky-500"></div>
|
|
164
|
+
<div class="w-10 h-10 rounded-md bg-violet-500 shadow-md" title="violet-500" style="background: oklch(60.6% 0.25 292.717)"></div>
|
|
165
|
+
<div class="w-10 h-10 rounded-md bg-red-500 shadow-md" title="red-500"></div>
|
|
166
|
+
<div class="w-10 h-10 rounded-md bg-orange-500 shadow-md" title="orange-500"></div>
|
|
167
|
+
<div class="w-10 h-10 rounded-md bg-amber-400 shadow-md" title="amber-400"></div>
|
|
168
|
+
<div class="w-10 h-10 rounded-md bg-yellow-400 shadow-md" title="yellow-400"></div>
|
|
169
|
+
<div class="w-10 h-10 rounded-md bg-slate-500 shadow-md" title="slate-500"></div>
|
|
170
|
+
<div class="w-10 h-10 rounded-md bg-gray-500 shadow-md" title="gray-500"></div>
|
|
171
|
+
<div class="w-10 h-10 rounded-md bg-zinc-800 shadow-md" title="zinc-800"></div>
|
|
172
|
+
</div>
|
|
173
|
+
<div class="rounded-lg p-4" style="background:rgba(52,211,153,0.06); border:1px solid rgba(52,211,153,0.15);">
|
|
174
|
+
<p class="text-emerald-400 text-sm font-bold" style="margin-bottom:4px;">💡 Scale</p>
|
|
175
|
+
<p class="text-gray-500 text-sm">Each color family (red, blue, green, slate, etc.) has 11 shades: <span class="text-white">50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950</span></p>
|
|
176
|
+
</div>
|
|
177
|
+
</section>
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
<!-- ── SECTION: Typography ───────────────────── -->
|
|
182
|
+
<section id="typography" style="margin-bottom: 72px;">
|
|
183
|
+
<div class="d-flex items-center gap-3" style="margin-bottom:8px;">
|
|
184
|
+
<span class="text-2xl">✏️</span>
|
|
185
|
+
<h2 class="text-3xl font-bold text-white">Typography</h2>
|
|
186
|
+
</div>
|
|
187
|
+
<p class="text-gray-500 font-medium" style="margin-bottom:24px; line-height:1.7;">Control font size, weight, color and alignment using class prefixes.</p>
|
|
188
|
+
|
|
189
|
+
<div class="rounded-xl bg-slate-900 shadow-lg" style="position:relative; margin-bottom:24px; border: 1px solid rgba(255,255,255,0.06);">
|
|
190
|
+
<div class="d-flex items-center gap-2 p-4 pb-0 pl-5">
|
|
191
|
+
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
|
192
|
+
<div class="w-3 h-3 rounded-full bg-amber-400"></div>
|
|
193
|
+
<div class="w-3 h-3 rounded-full bg-emerald-500"></div>
|
|
194
|
+
<span class="text-gray-500 text-xs font-medium" style="margin-left:8px;">index.html</span>
|
|
195
|
+
</div>
|
|
196
|
+
<pre class="code-scroll p-6 pt-4 text-sm" style="color:#a3e635; font-size:13px; line-height:1.75;"><!-- Font sizes -->
|
|
197
|
+
<h1 class="<span style="color:#34d399">text-6xl font-bold</span>">Huge Heading</h1>
|
|
198
|
+
<h2 class="<span style="color:#34d399">text-3xl font-bold</span>">Section Title</h2>
|
|
199
|
+
<p class="<span style="color:#34d399">text-base font-medium</span>">Body text</p>
|
|
200
|
+
<small class="<span style="color:#34d399">text-sm</span>">Small label</small>
|
|
201
|
+
|
|
202
|
+
<!-- Text colors -->
|
|
203
|
+
<span class="<span style="color:#34d399">text-white</span>">White</span>
|
|
204
|
+
<span class="<span style="color:#34d399">text-gray</span>">Gray</span>
|
|
205
|
+
<span class="<span style="color:#34d399">text-blue-500</span>">Blue 500</span>
|
|
206
|
+
|
|
207
|
+
<!-- Alignment -->
|
|
208
|
+
<p class="<span style="color:#34d399">text-center</span>">Centered</p>
|
|
209
|
+
<p class="<span style="color:#34d399">text-right</span>">Right-aligned</p></pre>
|
|
210
|
+
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
|
211
|
+
</div>
|
|
212
|
+
|
|
213
|
+
<!-- Live demos -->
|
|
214
|
+
<div class="rounded-xl bg-slate-900 p-8 shadow-md d-flex flex-col gap-4" style="border:1px solid rgba(255,255,255,0.06);">
|
|
215
|
+
<span class="text-white font-bold" style="font-size:48px; line-height:1;">text-5xl</span>
|
|
216
|
+
<span class="text-white font-bold" style="font-size:30px;">text-3xl</span>
|
|
217
|
+
<span class="text-white font-bold" style="font-size:20px;">text-xl</span>
|
|
218
|
+
<span class="text-white" style="font-size:16px;">text-base — Regular paragraph</span>
|
|
219
|
+
<span class="text-gray-500" style="font-size:14px;">text-sm text-gray-500 — Muted metadata</span>
|
|
220
|
+
</div>
|
|
221
|
+
|
|
222
|
+
<!-- Size table -->
|
|
223
|
+
<div class="rounded-lg p-4 d-flex flex-col gap-2" style="background:rgba(52,211,153,0.06); border:1px solid rgba(52,211,153,0.15); margin-top:16px;">
|
|
224
|
+
<p class="text-emerald-400 text-sm font-bold" style="margin-bottom:6px;">Size Scale</p>
|
|
225
|
+
<div class="d-flex flex-wrap gap-2">
|
|
226
|
+
<span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">text-xs (12px)</span>
|
|
227
|
+
<span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">text-sm (12px)</span>
|
|
228
|
+
<span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">text-base (16px)</span>
|
|
229
|
+
<span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">text-lg (18px)</span>
|
|
230
|
+
<span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">text-xl (20px)</span>
|
|
231
|
+
<span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">text-2xl (24px)</span>
|
|
232
|
+
<span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">text-4xl (36px)</span>
|
|
233
|
+
<span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">text-6xl (60px)</span>
|
|
234
|
+
</div>
|
|
235
|
+
</div>
|
|
236
|
+
</section>
|
|
237
|
+
|
|
238
|
+
<!-- ── SECTION: Layout ───────────────────────── -->
|
|
239
|
+
<section id="layout" style="margin-bottom: 72px;">
|
|
240
|
+
<div class="d-flex items-center gap-3" style="margin-bottom:8px;">
|
|
241
|
+
<span class="text-2xl">📐</span>
|
|
242
|
+
<h2 class="text-3xl font-bold text-white">Layout & Flexbox</h2>
|
|
243
|
+
</div>
|
|
244
|
+
<p class="text-gray-500 font-medium" style="margin-bottom:24px; line-height:1.7;">Construct flexible layouts using display, direction, wrapping, and alignment class prefixes.</p>
|
|
245
|
+
|
|
246
|
+
<div class="rounded-xl bg-slate-900 shadow-lg" style="position:relative; margin-bottom:24px; border: 1px solid rgba(255,255,255,0.06);">
|
|
247
|
+
<div class="d-flex items-center gap-2 p-4 pb-0 pl-5">
|
|
248
|
+
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
|
249
|
+
<div class="w-3 h-3 rounded-full bg-amber-400"></div>
|
|
250
|
+
<div class="w-3 h-3 rounded-full bg-emerald-500"></div>
|
|
251
|
+
<span class="text-gray-500 text-xs font-medium" style="margin-left:8px;">index.html</span>
|
|
252
|
+
</div>
|
|
253
|
+
<pre class="code-scroll p-6 pt-4 text-sm" style="color:#a3e635; font-size:13px; line-height:1.75;"><!-- Flex container -->
|
|
254
|
+
<div class="<span style="color:#34d399">d-flex items-center justify-between gap-4</span>">
|
|
255
|
+
<div>Left</div>
|
|
256
|
+
<div>Right</div>
|
|
257
|
+
</div>
|
|
258
|
+
|
|
259
|
+
<!-- Column layout -->
|
|
260
|
+
<div class="<span style="color:#34d399">d-flex flex-col gap-6</span>">
|
|
261
|
+
<div>Item 1</div>
|
|
262
|
+
<div>Item 2</div>
|
|
263
|
+
</div>
|
|
264
|
+
|
|
265
|
+
<!-- Wrapping -->
|
|
266
|
+
<div class="<span style="color:#34d399">d-flex flex-wrap gap-4</span>"> ... </div></pre>
|
|
267
|
+
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
|
268
|
+
</div>
|
|
269
|
+
|
|
270
|
+
<div class="rounded-lg p-4" style="background:rgba(52,211,153,0.06); border:1px solid rgba(52,211,153,0.15);">
|
|
271
|
+
<p class="text-emerald-400 text-sm font-bold" style="margin-bottom:8px;">Reference</p>
|
|
272
|
+
<div class="d-flex flex-col gap-2">
|
|
273
|
+
<div class="token-row">
|
|
274
|
+
<code class="text-emerald-400 text-xs">d-flex</code>
|
|
275
|
+
<span class="text-gray-500 text-xs">→ display: flex</span>
|
|
276
|
+
</div>
|
|
277
|
+
<div class="token-row">
|
|
278
|
+
<code class="text-emerald-400 text-xs">d-inline-flex</code>
|
|
279
|
+
<span class="text-gray-500 text-xs">→ display: inline-flex</span>
|
|
280
|
+
</div>
|
|
281
|
+
<div class="token-row">
|
|
282
|
+
<code class="text-emerald-400 text-xs">flex-col / flex-row</code>
|
|
283
|
+
<span class="text-gray-500 text-xs">→ flex-direction</span>
|
|
284
|
+
</div>
|
|
285
|
+
<div class="token-row">
|
|
286
|
+
<code class="text-emerald-400 text-xs">items-center / items-start / items-end</code>
|
|
287
|
+
<span class="text-gray-500 text-xs">→ align-items</span>
|
|
288
|
+
</div>
|
|
289
|
+
<div class="token-row">
|
|
290
|
+
<code class="text-emerald-400 text-xs">justify-center / justify-between / justify-around</code>
|
|
291
|
+
<span class="text-gray-500 text-xs">→ justify-content</span>
|
|
292
|
+
</div>
|
|
293
|
+
<div class="token-row">
|
|
294
|
+
<code class="text-emerald-400 text-xs">flex-wrap / flex-nowrap</code>
|
|
295
|
+
<span class="text-gray-500 text-xs">→ flex-wrap</span>
|
|
296
|
+
</div>
|
|
297
|
+
<div class="token-row">
|
|
298
|
+
<code class="text-emerald-400 text-xs">gap-4 / gap-8</code>
|
|
299
|
+
<span class="text-gray-500 text-xs">→ gap (mapped via spacing tokens)</span>
|
|
300
|
+
</div>
|
|
301
|
+
</div>
|
|
302
|
+
</div>
|
|
303
|
+
</section>
|
|
304
|
+
|
|
305
|
+
<!-- ── SECTION: Spacing ──────────────────────── -->
|
|
306
|
+
<section id="spacing" style="margin-bottom: 72px;">
|
|
307
|
+
<div class="d-flex items-center gap-3" style="margin-bottom:8px;">
|
|
308
|
+
<span class="text-2xl">📏</span>
|
|
309
|
+
<h2 class="text-3xl font-bold text-white">Spacing</h2>
|
|
310
|
+
</div>
|
|
311
|
+
<p class="text-gray-500 font-medium" style="margin-bottom:24px; line-height:1.7;">Control padding and margin with directional shorthand. All values map through the spacing token registry.</p>
|
|
312
|
+
|
|
313
|
+
<div class="rounded-xl bg-slate-900 shadow-lg" style="position:relative; margin-bottom:24px; border: 1px solid rgba(255,255,255,0.06);">
|
|
314
|
+
<div class="d-flex items-center gap-2 p-4 pb-0 pl-5">
|
|
315
|
+
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
|
316
|
+
<div class="w-3 h-3 rounded-full bg-amber-400"></div>
|
|
317
|
+
<div class="w-3 h-3 rounded-full bg-emerald-500"></div>
|
|
318
|
+
<span class="text-gray-500 text-xs font-medium" style="margin-left:8px;">index.html</span>
|
|
319
|
+
</div>
|
|
320
|
+
<pre class="code-scroll p-6 pt-4 text-sm" style="color:#a3e635; font-size:13px; line-height:1.75;"><!-- All sides -->
|
|
321
|
+
<div class="<span style="color:#34d399">p-4</span>"> ... </div> <!-- padding: 16px -->
|
|
322
|
+
<div class="<span style="color:#34d399">m-8</span>"> ... </div> <!-- margin: 32px -->
|
|
323
|
+
|
|
324
|
+
<!-- Per side -->
|
|
325
|
+
<div class="<span style="color:#34d399">pt-4 pb-6 pl-8 pr-2</span>"> ... </div>
|
|
326
|
+
<div class="<span style="color:#34d399">mt-4 mb-12</span>"> ... </div></pre>
|
|
327
|
+
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
|
328
|
+
</div>
|
|
329
|
+
|
|
330
|
+
<div class="rounded-lg p-4" style="background:rgba(52,211,153,0.06); border:1px solid rgba(52,211,153,0.15);">
|
|
331
|
+
<p class="text-emerald-400 text-sm font-bold" style="margin-bottom:8px;">Spacing Scale (px)</p>
|
|
332
|
+
<div class="d-flex flex-wrap gap-2">
|
|
333
|
+
<span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">0 → 0px</span>
|
|
334
|
+
<span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">1 → 4px</span>
|
|
335
|
+
<span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">2 → 8px</span>
|
|
336
|
+
<span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">3 → 12px</span>
|
|
337
|
+
<span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">4 → 16px</span>
|
|
338
|
+
<span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">6 → 24px</span>
|
|
339
|
+
<span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">8 → 32px</span>
|
|
340
|
+
<span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">12 → 48px</span>
|
|
341
|
+
<span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">16 → 64px</span>
|
|
342
|
+
<span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">20 → 80px</span>
|
|
343
|
+
<span class="text-xs text-white rounded-md p-1 pl-2 pr-2" style="background:rgba(255,255,255,0.07);">24 → 96px</span>
|
|
344
|
+
</div>
|
|
345
|
+
</div>
|
|
346
|
+
</section>
|
|
347
|
+
|
|
348
|
+
<!-- ── SECTION: Sizing & Borders ─────────────── -->
|
|
349
|
+
<section id="sizing" style="margin-bottom: 72px;">
|
|
350
|
+
<div class="d-flex items-center gap-3" style="margin-bottom:8px;">
|
|
351
|
+
<span class="text-2xl">📦</span>
|
|
352
|
+
<h2 class="text-3xl font-bold text-white">Sizing & Borders</h2>
|
|
353
|
+
</div>
|
|
354
|
+
<p class="text-gray-500 font-medium" style="margin-bottom:24px; line-height:1.7;">Set element dimensions and control border radius, width, and color via utility classes.</p>
|
|
355
|
+
|
|
356
|
+
<div class="rounded-xl bg-slate-900 shadow-lg" style="position:relative; margin-bottom:24px; border: 1px solid rgba(255,255,255,0.06);">
|
|
357
|
+
<div class="d-flex items-center gap-2 p-4 pb-0 pl-5">
|
|
358
|
+
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
|
359
|
+
<div class="w-3 h-3 rounded-full bg-amber-400"></div>
|
|
360
|
+
<div class="w-3 h-3 rounded-full bg-emerald-500"></div>
|
|
361
|
+
<span class="text-gray-500 text-xs font-medium" style="margin-left:8px;">index.html</span>
|
|
362
|
+
</div>
|
|
363
|
+
<pre class="code-scroll p-6 pt-4 text-sm" style="color:#a3e635; font-size:13px; line-height:1.75;"><!-- Width & Height -->
|
|
364
|
+
<div class="<span style="color:#34d399">w-full h-32</span>"> ... </div>
|
|
365
|
+
<div class="<span style="color:#34d399">w-screen h-screen</span>"> ... </div>
|
|
366
|
+
<div class="<span style="color:#34d399">max-w-lg m-auto</span>"> ... </div>
|
|
367
|
+
|
|
368
|
+
<!-- Border Radius -->
|
|
369
|
+
<div class="<span style="color:#34d399">rounded-sm</span>"></div> <!-- 4px -->
|
|
370
|
+
<div class="<span style="color:#34d399">rounded-lg</span>"></div> <!-- 12px -->
|
|
371
|
+
<div class="<span style="color:#34d399">rounded-full</span>"></div> <!-- 9999px -->
|
|
372
|
+
|
|
373
|
+
<!-- Borders -->
|
|
374
|
+
<div class="<span style="color:#34d399">border-2 border-emerald-500 rounded-md</span>"></div></pre>
|
|
375
|
+
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
|
376
|
+
</div>
|
|
377
|
+
|
|
378
|
+
<!-- Live border demo -->
|
|
379
|
+
<div class="d-flex gap-4 flex-wrap" style="margin-bottom:16px;">
|
|
380
|
+
<div class="w-16 h-16 bg-slate-800 rounded-sm d-flex items-center justify-center">
|
|
381
|
+
<span class="text-emerald-400 text-xs font-bold">sm</span>
|
|
382
|
+
</div>
|
|
383
|
+
<div class="w-16 h-16 bg-slate-800 rounded-md d-flex items-center justify-center">
|
|
384
|
+
<span class="text-emerald-400 text-xs font-bold">md</span>
|
|
385
|
+
</div>
|
|
386
|
+
<div class="w-16 h-16 bg-slate-800 rounded-lg d-flex items-center justify-center">
|
|
387
|
+
<span class="text-emerald-400 text-xs font-bold">lg</span>
|
|
388
|
+
</div>
|
|
389
|
+
<div class="w-16 h-16 bg-slate-800 rounded-xl d-flex items-center justify-center">
|
|
390
|
+
<span class="text-emerald-400 text-xs font-bold">xl</span>
|
|
391
|
+
</div>
|
|
392
|
+
<div class="w-16 h-16 bg-slate-800 rounded-full d-flex items-center justify-center">
|
|
393
|
+
<span class="text-emerald-400 text-xs font-bold">full</span>
|
|
394
|
+
</div>
|
|
395
|
+
<div class="w-20 h-16 bg-slate-900 rounded-lg d-flex items-center justify-center" style="border: 2px solid rgba(52,211,153,0.5);">
|
|
396
|
+
<span class="text-emerald-400 text-xs font-bold">border</span>
|
|
397
|
+
</div>
|
|
398
|
+
</div>
|
|
399
|
+
</section>
|
|
400
|
+
|
|
401
|
+
<!-- ── SECTION: Image Engine ─────────────────── -->
|
|
402
|
+
<section id="images" style="margin-bottom: 72px;">
|
|
403
|
+
<div class="d-flex items-center gap-3" style="margin-bottom:8px;">
|
|
404
|
+
<span class="text-2xl">🖼</span>
|
|
405
|
+
<h2 class="text-3xl font-bold text-white">Image Engine</h2>
|
|
406
|
+
</div>
|
|
407
|
+
<p class="text-gray-500 font-medium" style="margin-bottom:24px; line-height:1.7;">Control background images, sizing, positioning, and object-fit for native img elements — all via utility class names.</p>
|
|
408
|
+
|
|
409
|
+
<div class="rounded-xl bg-slate-900 shadow-lg" style="position:relative; margin-bottom:24px; border: 1px solid rgba(255,255,255,0.06);">
|
|
410
|
+
<div class="d-flex items-center gap-2 p-4 pb-0 pl-5">
|
|
411
|
+
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
|
412
|
+
<div class="w-3 h-3 rounded-full bg-amber-400"></div>
|
|
413
|
+
<div class="w-3 h-3 rounded-full bg-emerald-500"></div>
|
|
414
|
+
<span class="text-gray-500 text-xs font-medium" style="margin-left:8px;">index.html</span>
|
|
415
|
+
</div>
|
|
416
|
+
<pre class="code-scroll p-6 pt-4 text-sm" style="color:#a3e635; font-size:13px; line-height:1.75;"><!-- Background Image (arbitrary URL) -->
|
|
417
|
+
<div class="<span style="color:#34d399">bg-[url('https://example.com/photo.jpg')] bg-cover bg-center</span>"
|
|
418
|
+
style="height:200px">
|
|
419
|
+
</div>
|
|
420
|
+
|
|
421
|
+
<!-- Object Fit for <img> elements -->
|
|
422
|
+
<img class="<span style="color:#34d399">object-cover object-center</span>" src="..." />
|
|
423
|
+
<img class="<span style="color:#34d399">object-contain</span>" src="..." />
|
|
424
|
+
|
|
425
|
+
<!-- Background Size and Position -->
|
|
426
|
+
<div class="<span style="color:#34d399">bg-cover bg-top bg-no-repeat</span>"></div>
|
|
427
|
+
<div class="<span style="color:#34d399">bg-auto bg-center bg-repeat</span>"></div></pre>
|
|
428
|
+
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
|
429
|
+
</div>
|
|
430
|
+
|
|
431
|
+
<!-- Live Image demo -->
|
|
432
|
+
<div class="d-flex gap-4 w-full" style="margin-bottom:16px; height:220px;">
|
|
433
|
+
<div class="rounded-xl shadow-lg glow-green" style="flex:1; background-image:url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=600&auto=format'); background-size:cover; background-position:center;">
|
|
434
|
+
</div>
|
|
435
|
+
<div class="rounded-xl bg-slate-900 p-6 d-flex flex-col justify-center shadow-md" style="flex:1; border:1px solid rgba(255,255,255,0.06);">
|
|
436
|
+
<div class="d-flex flex-col gap-3">
|
|
437
|
+
<div><code class="text-emerald-400 text-xs">bg-cover</code> <span class="text-gray-500 text-xs">→ background-size: cover</span></div>
|
|
438
|
+
<div><code class="text-emerald-400 text-xs">bg-contain</code> <span class="text-gray-500 text-xs">→ background-size: contain</span></div>
|
|
439
|
+
<div><code class="text-emerald-400 text-xs">bg-center</code> <span class="text-gray-500 text-xs">→ background-position: center</span></div>
|
|
440
|
+
<div><code class="text-emerald-400 text-xs">bg-no-repeat</code> <span class="text-gray-500 text-xs">→ background-repeat: no-repeat</span></div>
|
|
441
|
+
<div><code class="text-emerald-400 text-xs">object-cover</code> <span class="text-gray-500 text-xs">→ object-fit: cover</span></div>
|
|
442
|
+
</div>
|
|
443
|
+
</div>
|
|
444
|
+
</div>
|
|
445
|
+
</section>
|
|
446
|
+
|
|
447
|
+
<!-- ── SECTION: Effects ──────────────────────── -->
|
|
448
|
+
<section id="effects" style="margin-bottom: 72px;">
|
|
449
|
+
<div class="d-flex items-center gap-3" style="margin-bottom:8px;">
|
|
450
|
+
<span class="text-2xl">✨</span>
|
|
451
|
+
<h2 class="text-3xl font-bold text-white">Effects & Misc</h2>
|
|
452
|
+
</div>
|
|
453
|
+
<p class="text-gray-500 font-medium" style="margin-bottom:24px; line-height:1.7;">Shadows, transitions, opacity, overflow and cursor utilities for interaction effects.</p>
|
|
454
|
+
|
|
455
|
+
<div class="rounded-xl bg-slate-900 shadow-lg" style="position:relative; margin-bottom:24px; border: 1px solid rgba(255,255,255,0.06);">
|
|
456
|
+
<div class="d-flex items-center gap-2 p-4 pb-0 pl-5">
|
|
457
|
+
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
|
458
|
+
<div class="w-3 h-3 rounded-full bg-amber-400"></div>
|
|
459
|
+
<div class="w-3 h-3 rounded-full bg-emerald-500"></div>
|
|
460
|
+
<span class="text-gray-500 text-xs font-medium" style="margin-left:8px;">index.html</span>
|
|
461
|
+
</div>
|
|
462
|
+
<pre class="code-scroll p-6 pt-4 text-sm" style="color:#a3e635; font-size:13px; line-height:1.75;"><!-- Shadows -->
|
|
463
|
+
<div class="<span style="color:#34d399">shadow-sm</span>"> subtle </div>
|
|
464
|
+
<div class="<span style="color:#34d399">shadow-md</span>"> normal </div>
|
|
465
|
+
<div class="<span style="color:#34d399">shadow-lg</span>"> pronounced </div>
|
|
466
|
+
|
|
467
|
+
<!-- Opacity -->
|
|
468
|
+
<div class="<span style="color:#34d399">opacity-50</span>">50%</div>
|
|
469
|
+
<div class="<span style="color:#34d399">opacity-75</span>">75%</div>
|
|
470
|
+
|
|
471
|
+
<!-- Cursor & Overflow -->
|
|
472
|
+
<button class="<span style="color:#34d399">cursor-pointer transition</span>">Click me</button>
|
|
473
|
+
<div class="<span style="color:#34d399">overflow-hidden</span>"> ... </div></pre>
|
|
474
|
+
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
|
475
|
+
</div>
|
|
476
|
+
|
|
477
|
+
<div class="d-flex gap-4 flex-wrap" style="margin-bottom:16px;">
|
|
478
|
+
<div class="rounded-xl bg-slate-800 p-6 shadow-sm d-flex items-center justify-center">
|
|
479
|
+
<span class="text-white text-sm font-medium">shadow-sm</span>
|
|
480
|
+
</div>
|
|
481
|
+
<div class="rounded-xl bg-slate-800 p-6 shadow-md d-flex items-center justify-center">
|
|
482
|
+
<span class="text-white text-sm font-medium">shadow-md</span>
|
|
483
|
+
</div>
|
|
484
|
+
<div class="rounded-xl bg-slate-800 p-6 shadow-lg d-flex items-center justify-center">
|
|
485
|
+
<span class="text-white text-sm font-medium">shadow-lg</span>
|
|
486
|
+
</div>
|
|
487
|
+
</div>
|
|
488
|
+
</section>
|
|
489
|
+
|
|
490
|
+
<!-- ── SECTION: Arbitrary Values ─────────────── -->
|
|
491
|
+
<section id="arbitrary" style="margin-bottom: 72px;">
|
|
492
|
+
<div class="d-flex items-center gap-3" style="margin-bottom:8px;">
|
|
493
|
+
<span class="text-2xl">⚡</span>
|
|
494
|
+
<h2 class="text-3xl font-bold text-white">Arbitrary Values</h2>
|
|
495
|
+
</div>
|
|
496
|
+
<p class="text-gray-500 font-medium" style="margin-bottom:24px; line-height:1.7;">Break out of the token system for one-off values using bracket <span class="text-emerald-400">[ ]</span> syntax. Works for colors, URLs, gradients and sizes.</p>
|
|
497
|
+
|
|
498
|
+
<div class="rounded-xl bg-slate-900 shadow-lg" style="position:relative; margin-bottom:24px; border: 1px solid rgba(255,255,255,0.06);">
|
|
499
|
+
<div class="d-flex items-center gap-2 p-4 pb-0 pl-5">
|
|
500
|
+
<div class="w-3 h-3 rounded-full bg-red-500"></div>
|
|
501
|
+
<div class="w-3 h-3 rounded-full bg-amber-400"></div>
|
|
502
|
+
<div class="w-3 h-3 rounded-full bg-emerald-500"></div>
|
|
503
|
+
<span class="text-gray-500 text-xs font-medium" style="margin-left:8px;">index.html</span>
|
|
504
|
+
</div>
|
|
505
|
+
<pre class="code-scroll p-6 pt-4 text-sm" style="color:#a3e635; font-size:13px; line-height:1.75;"><!-- Arbitrary background color -->
|
|
506
|
+
<div class="<span style="color:#34d399">bg-[#ff6b6b]</span>"></div>
|
|
507
|
+
<div class="<span style="color:#34d399">bg-[oklch(65%_0.2_145)]</span>"></div>
|
|
508
|
+
|
|
509
|
+
<!-- Arbitrary text size -->
|
|
510
|
+
<p class="<span style="color:#34d399">text-[35px]</span>">Custom size</p>
|
|
511
|
+
|
|
512
|
+
<!-- Arbitrary background image -->
|
|
513
|
+
<div class="<span style="color:#34d399">bg-[url('https://example.com/bg.jpg')]</span>"></div>
|
|
514
|
+
|
|
515
|
+
<!-- CSS Variables -->
|
|
516
|
+
<style>:root { --brand: #34d399; }</style>
|
|
517
|
+
<div class="<span style="color:#34d399">bg-(--brand)</span>"></div></pre>
|
|
518
|
+
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
|
519
|
+
</div>
|
|
520
|
+
|
|
521
|
+
<!-- Demos -->
|
|
522
|
+
<div class="d-flex flex-wrap gap-3" style="margin-bottom:16px;">
|
|
523
|
+
<div class="w-20 h-20 rounded-lg bg-[#ff6b6b] shadow-md d-flex items-center justify-center">
|
|
524
|
+
<span class="text-white text-xs font-bold">#ff6b6b</span>
|
|
525
|
+
</div>
|
|
526
|
+
<div class="w-20 h-20 rounded-lg bg-[#6c5ce7] shadow-md d-flex items-center justify-center">
|
|
527
|
+
<span class="text-white text-xs font-bold">#6c5ce7</span>
|
|
528
|
+
</div>
|
|
529
|
+
<div class="w-20 h-20 rounded-lg bg-[#00cec9] shadow-md d-flex items-center justify-center">
|
|
530
|
+
<span class="text-white text-xs font-bold">#00cec9</span>
|
|
531
|
+
</div>
|
|
532
|
+
<div class="w-20 h-20 rounded-lg bg-[#fdcb6e] shadow-md d-flex items-center justify-center">
|
|
533
|
+
<span class="text-white text-xs font-bold">#fdcb6e</span>
|
|
534
|
+
</div>
|
|
535
|
+
</div>
|
|
536
|
+
</section>
|
|
537
|
+
|
|
538
|
+
</main>
|
|
539
|
+
</div>
|
|
540
|
+
|
|
541
|
+
<!-- ─── FOOTER ─────────────────────────────────────────── -->
|
|
542
|
+
<div class="bg-slate-900 w-full" style="border-top: 1px solid rgba(255,255,255,0.06);">
|
|
543
|
+
<div class="max-w-lg m-auto p-8 d-flex items-center justify-between">
|
|
544
|
+
<div class="d-flex items-center gap-3">
|
|
545
|
+
<div class="w-8 h-8 rounded-lg bg-emerald-500 d-flex items-center justify-center">
|
|
546
|
+
<span class="text-white font-bold text-xs">C</span>
|
|
547
|
+
</div>
|
|
548
|
+
<span class="text-white font-bold">CleanCSS</span>
|
|
549
|
+
<span class="text-gray-500 text-sm">v2.0</span>
|
|
550
|
+
</div>
|
|
551
|
+
<p class="text-gray-500 text-sm font-medium">Built with Custom Utility Engine © 2026 · Zero raw CSS.</p>
|
|
552
|
+
</div>
|
|
553
|
+
</div>
|
|
554
|
+
|
|
555
|
+
<script type="module">
|
|
556
|
+
import { initEngine } from "./main.js";
|
|
557
|
+
initEngine();
|
|
558
|
+
</script>
|
|
559
|
+
<script>
|
|
560
|
+
function copyCode(btn) {
|
|
561
|
+
const pre = btn.previousElementSibling;
|
|
562
|
+
const text = pre.innerText;
|
|
563
|
+
navigator.clipboard.writeText(text).then(() => {
|
|
564
|
+
btn.textContent = 'Copied!';
|
|
565
|
+
btn.classList.add('copied');
|
|
566
|
+
setTimeout(() => {
|
|
567
|
+
btn.textContent = 'Copy';
|
|
568
|
+
btn.classList.remove('copied');
|
|
569
|
+
}, 2000);
|
|
570
|
+
});
|
|
571
|
+
}
|
|
572
|
+
|
|
573
|
+
// Active sidebar link on scroll
|
|
574
|
+
const sections = document.querySelectorAll('section[id]');
|
|
575
|
+
const links = document.querySelectorAll('.sidebar-link');
|
|
576
|
+
window.addEventListener('scroll', () => {
|
|
577
|
+
let current = '';
|
|
578
|
+
sections.forEach(sec => {
|
|
579
|
+
if (window.scrollY >= sec.offsetTop - 120) current = sec.id;
|
|
580
|
+
});
|
|
581
|
+
links.forEach(link => {
|
|
582
|
+
link.classList.remove('active');
|
|
583
|
+
if (link.getAttribute('href') === '#' + current) link.classList.add('active');
|
|
584
|
+
});
|
|
585
|
+
});
|
|
586
|
+
</script>
|
|
587
|
+
</body>
|
|
588
|
+
</html>
|
package/main.js
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { applyTypography } from "./appliers/typography.js";
|
|
2
|
+
import { applyLayout } from "./appliers/layout.js";
|
|
3
|
+
import { applyPosition } from "./appliers/position.js";
|
|
4
|
+
import { applyBoxModel } from "./appliers/boxModel.js";
|
|
5
|
+
import { applyEffects } from "./appliers/effects.js";
|
|
6
|
+
import { applyBackground } from "./appliers/background.js";
|
|
7
|
+
import { applyImage } from "./appliers/image.js";
|
|
8
|
+
|
|
9
|
+
export function initEngine() {
|
|
10
|
+
const elements = document.querySelectorAll("[class]");
|
|
11
|
+
|
|
12
|
+
const modules = [
|
|
13
|
+
applyTypography,
|
|
14
|
+
applyLayout,
|
|
15
|
+
applyPosition,
|
|
16
|
+
applyBoxModel,
|
|
17
|
+
applyBackground,
|
|
18
|
+
applyEffects,
|
|
19
|
+
applyImage
|
|
20
|
+
];
|
|
21
|
+
|
|
22
|
+
elements.forEach((el) => {
|
|
23
|
+
[...el.classList].forEach((cls) => {
|
|
24
|
+
for (const applyFn of modules) {
|
|
25
|
+
if (applyFn(el, cls)) break;
|
|
26
|
+
}
|
|
27
|
+
});
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
console.log("🚀 Custom Utility Engine (Single-Pass) Initialized");
|
|
31
|
+
}
|