@brewcodex/chai-css 1.0.0 → 1.0.1
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 +1 -1
- package/dist/index.html +335 -0
- package/dist/website/docs.html +3588 -0
- package/package.json +12 -10
- package/dist/chaitailwind.esm.js +0 -135
- package/dist/chaitailwind.iife.js +0 -1
package/README.md
CHANGED
|
@@ -454,7 +454,7 @@ Examples:
|
|
|
454
454
|
|
|
455
455
|
- `chai-min-w-[300px]` → `minWidth: 300px`
|
|
456
456
|
- `chai-p-[1.5em]` → `padding: 1.5em`
|
|
457
|
-
- `chai-top-[calc(100% - 20px)]` → `top: calc(100% - 20px)`
|
|
457
|
+
<!-- - `chai-top-[calc(100% - 20px)]` → `top: calc(100% - 20px)` -->
|
|
458
458
|
|
|
459
459
|
---
|
|
460
460
|
|
package/dist/index.html
ADDED
|
@@ -0,0 +1,335 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta
|
|
6
|
+
name="viewport"
|
|
7
|
+
content="width=device-width, initial-scale=1.0" />
|
|
8
|
+
<meta
|
|
9
|
+
name="description"
|
|
10
|
+
content="ChaiCSS - A lightweight utility-first CSS engine by BrewCodex. Shorthand classes, 16px REM scale, zero config." />
|
|
11
|
+
<title>ChaiCSS — Utility-First CSS by BrewCodex</title>
|
|
12
|
+
|
|
13
|
+
<link
|
|
14
|
+
rel="preconnect"
|
|
15
|
+
href="https://fonts.googleapis.com" />
|
|
16
|
+
<link
|
|
17
|
+
rel="preconnect"
|
|
18
|
+
href="https://fonts.gstatic.com"
|
|
19
|
+
crossorigin />
|
|
20
|
+
<link
|
|
21
|
+
href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap"
|
|
22
|
+
rel="stylesheet" />
|
|
23
|
+
|
|
24
|
+
<style>
|
|
25
|
+
* {
|
|
26
|
+
box-sizing: border-box;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
:root {
|
|
30
|
+
--chai-cream: #faf6f1;
|
|
31
|
+
--chai-amber: #d97706;
|
|
32
|
+
--chai-amber-light: #fbbf24;
|
|
33
|
+
--chai-brown: #292524;
|
|
34
|
+
--chai-brown-dark: #1c1917;
|
|
35
|
+
--chai-muted: #78716c;
|
|
36
|
+
}
|
|
37
|
+
</style>
|
|
38
|
+
</head>
|
|
39
|
+
|
|
40
|
+
<body
|
|
41
|
+
class="chai-m-0 chai-family-[Syne,sans-serif] chai-bg-[#1c1917] chai-text-[#faf6f1] chai-min-h-100vh chai-overflow-x-hidden">
|
|
42
|
+
<!-- Nav -->
|
|
43
|
+
<nav
|
|
44
|
+
class="chai-pos-fixed chai-top-0 chai-left-0 chai-right-0 chai-z-100 chai-py-16 chai-px-32 chai-display-flex chai-justify-space-between chai-items-center"
|
|
45
|
+
style="
|
|
46
|
+
background: rgba(28, 25, 23, 0.9);
|
|
47
|
+
backdrop-filter: blur(12px);
|
|
48
|
+
border-bottom: 1px solid rgba(217, 119, 6, 0.2);
|
|
49
|
+
">
|
|
50
|
+
<a
|
|
51
|
+
href="index.html"
|
|
52
|
+
class="chai-fs-20 chai-weight-bold chai-text-[#faf6f1] chai-decoration-none chai-tracking-[-0.02em]">
|
|
53
|
+
<span class="chai-text-[#d97706]">Chai</span>CSS
|
|
54
|
+
</a>
|
|
55
|
+
|
|
56
|
+
<div class="chai-display-flex chai-gap-32 chai-items-center">
|
|
57
|
+
<a
|
|
58
|
+
href="#features"
|
|
59
|
+
class="chai-text-[#faf6f1] chai-decoration-none chai-weight-500"
|
|
60
|
+
style="opacity: 0.9">
|
|
61
|
+
Features
|
|
62
|
+
</a>
|
|
63
|
+
|
|
64
|
+
<a
|
|
65
|
+
href="#install"
|
|
66
|
+
class="chai-text-[#faf6f1] chai-decoration-none chai-weight-500"
|
|
67
|
+
style="opacity: 0.9">
|
|
68
|
+
Install
|
|
69
|
+
</a>
|
|
70
|
+
|
|
71
|
+
<a
|
|
72
|
+
href="./website/docs.html"
|
|
73
|
+
class="chai-text-[#faf6f1] chai-decoration-none chai-weight-500"
|
|
74
|
+
style="opacity: 0.9">
|
|
75
|
+
Docs
|
|
76
|
+
</a>
|
|
77
|
+
|
|
78
|
+
<a
|
|
79
|
+
href="https://www.npmjs.com/package/@brewcodex/chai-css"
|
|
80
|
+
target="_blank"
|
|
81
|
+
rel="noopener"
|
|
82
|
+
class="chai-display-flex chai-items-center chai-gap-8 chai-py-8 chai-px-16 chai-bg-[#d97706] chai-text-[#1c1917] chai-decoration-none chai-weight-600 chai-rounded-8 chai-fs-14">
|
|
83
|
+
<svg
|
|
84
|
+
width="24"
|
|
85
|
+
height="24"
|
|
86
|
+
viewBox="0 0 24 24"
|
|
87
|
+
fill="currentColor">
|
|
88
|
+
<path
|
|
89
|
+
d="M0 7.334v8h6.666v1.332H12v-1.332h12v-8H0zm6.666 6.664H5.334v-4H3.999v4H1.335V8.667h5.331v5.331zm4 0v1.336H8.001V8.667h5.334v5.332h-2.669v-.001zm12.001 0h-1.33v-4h-1.336v4h-1.335v-4h-1.33v4h-2.671V8.667h8.002v5.331zM10.665 10H12v2.667h-1.335V10z" />
|
|
90
|
+
</svg>
|
|
91
|
+
npm
|
|
92
|
+
</a>
|
|
93
|
+
</div>
|
|
94
|
+
</nav>
|
|
95
|
+
|
|
96
|
+
<!-- Hero -->
|
|
97
|
+
<header
|
|
98
|
+
class="chai-min-h-100vh chai-display-flex chai-flex-col chai-justify-center chai-items-center chai-align-center chai-py-96 chai-px-32 chai-pos-relative">
|
|
99
|
+
<div
|
|
100
|
+
class="chai-pos-absolute chai-top-0 chai-right-0 chai-bottom-0 chai-left-0"
|
|
101
|
+
style="
|
|
102
|
+
background: radial-gradient(
|
|
103
|
+
ellipse 80% 50% at 50% -20%,
|
|
104
|
+
rgba(217, 119, 6, 0.15),
|
|
105
|
+
transparent
|
|
106
|
+
);
|
|
107
|
+
pointer-events: none;
|
|
108
|
+
"></div>
|
|
109
|
+
|
|
110
|
+
<div class="chai-pos-relative chai-max-w-[720px] chai-w-100p">
|
|
111
|
+
<p
|
|
112
|
+
class="chai-fs-14 chai-weight-600 chai-text-[#d97706] chai-transform-uppercase chai-tracking-[0.2em] chai-mb-16">
|
|
113
|
+
by BrewCodex
|
|
114
|
+
</p>
|
|
115
|
+
|
|
116
|
+
<h1
|
|
117
|
+
class="chai-weight-800 chai-leading-[1.05] chai-tracking-[-0.03em] chai-m-0 chai-mb-24"
|
|
118
|
+
style="font-size: clamp(3rem, 8vw, 5rem)">
|
|
119
|
+
Utility-first CSS,<br />
|
|
120
|
+
<span class="chai-text-[#d97706]">brewed simple.</span>
|
|
121
|
+
</h1>
|
|
122
|
+
|
|
123
|
+
<p
|
|
124
|
+
class="chai-fs-20 chai-leading-[1.6] chai-text-[#78716c] chai-mb-40 chai-max-w-[520px] chai-mx-auto">
|
|
125
|
+
Lightweight engine with shorthand classes. 16px REM scale.
|
|
126
|
+
Zero config. Drop in and go.
|
|
127
|
+
</p>
|
|
128
|
+
|
|
129
|
+
<div
|
|
130
|
+
class="chai-display-flex chai-wrap-wrap chai-gap-16 chai-justify-center">
|
|
131
|
+
<a
|
|
132
|
+
href="#install"
|
|
133
|
+
class="chai-display-flex chai-items-center chai-gap-8 chai-py-16 chai-px-24 chai-bg-[#d97706] chai-text-[#1c1917] chai-decoration-none chai-weight-bold chai-rounded-12 chai-fs-16">
|
|
134
|
+
Get Started
|
|
135
|
+
</a>
|
|
136
|
+
|
|
137
|
+
<a
|
|
138
|
+
href="./website/docs.html"
|
|
139
|
+
class="chai-display-flex chai-items-center chai-gap-8 chai-py-16 chai-px-24 chai-text-[#faf6f1] chai-decoration-none chai-weight-600 chai-rounded-12 chai-fs-16 chai-bw-2 chai-bc-[#d97706] chai-bs-solid"
|
|
140
|
+
style="background: transparent">
|
|
141
|
+
View Docs
|
|
142
|
+
</a>
|
|
143
|
+
</div>
|
|
144
|
+
</div>
|
|
145
|
+
</header>
|
|
146
|
+
|
|
147
|
+
<!-- Live Demo -->
|
|
148
|
+
<section class="chai-py-96 chai-px-32 chai-max-w-[900px] chai-mx-auto">
|
|
149
|
+
<h2 class="chai-fs-32 chai-weight-bold chai-align-center chai-mb-8">
|
|
150
|
+
See it in action
|
|
151
|
+
</h2>
|
|
152
|
+
|
|
153
|
+
<p class="chai-align-center chai-text-[#78716c] chai-mb-48">
|
|
154
|
+
One script. Shorthand classes. Done.
|
|
155
|
+
</p>
|
|
156
|
+
|
|
157
|
+
<div
|
|
158
|
+
class="chai-bg-[#292524] chai-rounded-16 chai-overflow-hidden"
|
|
159
|
+
style="border: 1px solid rgba(217, 119, 6, 0.2)">
|
|
160
|
+
<div
|
|
161
|
+
class="chai-py-16 chai-px-24 chai-family-[JetBrains_Mono,monospace] chai-fs-[0.8rem] chai-text-[#78716c]"
|
|
162
|
+
style="border-bottom: 1px solid rgba(255, 255, 255, 0.06)">
|
|
163
|
+
<script
|
|
164
|
+
src="https://cdn.jsdelivr.net/npm/@brewcodex/chai-css"></script>
|
|
165
|
+
</div>
|
|
166
|
+
|
|
167
|
+
<div
|
|
168
|
+
class="chai-display-flex chai-wrap-wrap chai-gap-16 chai-justify-center chai-p-32">
|
|
169
|
+
<div
|
|
170
|
+
class="chai-p-24 chai-rounded-12 chai-bg-[#d97706] chai-text-[#1c1917] chai-weight-bold chai-fs-16">
|
|
171
|
+
chai-bg-[#d97706]
|
|
172
|
+
</div>
|
|
173
|
+
|
|
174
|
+
<div
|
|
175
|
+
class="chai-p-24 chai-rounded-12 chai-bw-2 chai-bc-[#fbbf24] chai-bs-solid chai-fs-14">
|
|
176
|
+
chai-bw-2 chai-bc
|
|
177
|
+
</div>
|
|
178
|
+
|
|
179
|
+
<div
|
|
180
|
+
class="chai-p-24 chai-rounded-12 chai-bg-[#292524] chai-text-[#fbbf24] chai-decoration-underline">
|
|
181
|
+
chai-decoration-underline
|
|
182
|
+
</div>
|
|
183
|
+
</div>
|
|
184
|
+
</div>
|
|
185
|
+
</section>
|
|
186
|
+
|
|
187
|
+
<!-- Features -->
|
|
188
|
+
<section
|
|
189
|
+
id="features"
|
|
190
|
+
class="chai-py-96 chai-px-32"
|
|
191
|
+
style="background: rgba(0, 0, 0, 0.3)">
|
|
192
|
+
<div class="chai-max-w-[1100px] chai-mx-auto">
|
|
193
|
+
<h2
|
|
194
|
+
class="chai-fs-32 chai-weight-bold chai-align-center chai-mb-8">
|
|
195
|
+
Built for speed
|
|
196
|
+
</h2>
|
|
197
|
+
|
|
198
|
+
<p class="chai-align-center chai-text-[#78716c] chai-mb-64">
|
|
199
|
+
Everything you need, nothing you don't
|
|
200
|
+
</p>
|
|
201
|
+
|
|
202
|
+
<div
|
|
203
|
+
class="chai-display-grid chai-gap-32"
|
|
204
|
+
style="
|
|
205
|
+
grid-template-columns: repeat(
|
|
206
|
+
auto-fit,
|
|
207
|
+
minmax(280px, 1fr)
|
|
208
|
+
);
|
|
209
|
+
">
|
|
210
|
+
<div
|
|
211
|
+
class="chai-p-32 chai-bg-[#292524] chai-rounded-16"
|
|
212
|
+
style="border: 1px solid rgba(217, 119, 6, 0.15)">
|
|
213
|
+
<div class="chai-fs-32 chai-mb-16">⚡</div>
|
|
214
|
+
<h3 class="chai-fs-20 chai-weight-bold chai-mb-8">
|
|
215
|
+
~3KB gzipped
|
|
216
|
+
</h3>
|
|
217
|
+
<p class="chai-text-[#78716c] chai-leading-[1.6]">
|
|
218
|
+
Tiny footprint. No build step. Zero dependencies.
|
|
219
|
+
</p>
|
|
220
|
+
</div>
|
|
221
|
+
|
|
222
|
+
<div
|
|
223
|
+
class="chai-p-32 chai-bg-[#292524] chai-rounded-16"
|
|
224
|
+
style="border: 1px solid rgba(217, 119, 6, 0.15)">
|
|
225
|
+
<div class="chai-fs-32 chai-mb-16">📐</div>
|
|
226
|
+
<h3 class="chai-fs-20 chai-weight-bold chai-mb-8">
|
|
227
|
+
16px REM scale
|
|
228
|
+
</h3>
|
|
229
|
+
<p class="chai-text-[#78716c] chai-leading-[1.6]">
|
|
230
|
+
Accessible, responsive values. chai-fs-16 → 1rem.
|
|
231
|
+
</p>
|
|
232
|
+
</div>
|
|
233
|
+
|
|
234
|
+
<div
|
|
235
|
+
class="chai-p-32 chai-bg-[#292524] chai-rounded-16"
|
|
236
|
+
style="border: 1px solid rgba(217, 119, 6, 0.15)">
|
|
237
|
+
<div class="chai-fs-32 chai-mb-16">🎨</div>
|
|
238
|
+
<h3 class="chai-fs-20 chai-weight-bold chai-mb-8">
|
|
239
|
+
70+ utilities
|
|
240
|
+
</h3>
|
|
241
|
+
<p class="chai-text-[#78716c] chai-leading-[1.6]">
|
|
242
|
+
Typography, layout, spacing, flexbox, borders, and
|
|
243
|
+
more.
|
|
244
|
+
</p>
|
|
245
|
+
</div>
|
|
246
|
+
</div>
|
|
247
|
+
</div>
|
|
248
|
+
</section>
|
|
249
|
+
|
|
250
|
+
<!-- Install -->
|
|
251
|
+
<section
|
|
252
|
+
id="install"
|
|
253
|
+
class="chai-py-96 chai-px-32">
|
|
254
|
+
<div class="chai-max-w-[700px] chai-mx-auto">
|
|
255
|
+
<h2
|
|
256
|
+
class="chai-fs-32 chai-weight-bold chai-align-center chai-mb-8">
|
|
257
|
+
Install in seconds
|
|
258
|
+
</h2>
|
|
259
|
+
|
|
260
|
+
<p class="chai-align-center chai-text-[#78716c] chai-mb-48">
|
|
261
|
+
npm or CDN — your choice
|
|
262
|
+
</p>
|
|
263
|
+
|
|
264
|
+
<div class="chai-display-flex chai-flex-col chai-gap-32">
|
|
265
|
+
<div
|
|
266
|
+
class="chai-bg-[#292524] chai-rounded-12 chai-overflow-hidden"
|
|
267
|
+
style="border: 1px solid rgba(217, 119, 6, 0.2)">
|
|
268
|
+
<div
|
|
269
|
+
class="chai-py-12 chai-px-16 chai-weight-600 chai-fs-14"
|
|
270
|
+
style="background: rgba(0, 0, 0, 0.3)">
|
|
271
|
+
npm
|
|
272
|
+
</div>
|
|
273
|
+
|
|
274
|
+
<pre
|
|
275
|
+
class="chai-m-0 chai-p-24 chai-family-[JetBrains_Mono,monospace] chai-fs-[0.9rem] chai-overflow-x-auto"><code class="chai-text-[#fbbf24]">npm install @brewcodex/chai-css</code></pre>
|
|
276
|
+
</div>
|
|
277
|
+
|
|
278
|
+
<div
|
|
279
|
+
class="chai-bg-[#292524] chai-rounded-12 chai-overflow-hidden"
|
|
280
|
+
style="border: 1px solid rgba(217, 119, 6, 0.2)">
|
|
281
|
+
<div
|
|
282
|
+
class="chai-py-12 chai-px-16 chai-weight-600 chai-fs-14"
|
|
283
|
+
style="background: rgba(0, 0, 0, 0.3)">
|
|
284
|
+
CDN
|
|
285
|
+
</div>
|
|
286
|
+
|
|
287
|
+
<pre
|
|
288
|
+
class="chai-m-0 chai-p-24 chai-family-[JetBrains_Mono,monospace] chai-fs-[0.9rem] chai-overflow-x-auto"><code class="chai-text-[#fbbf24]"><script src="https://cdn.jsdelivr.net/npm/@brewcodex/chai-css"></script></code></pre>
|
|
289
|
+
</div>
|
|
290
|
+
</div>
|
|
291
|
+
</div>
|
|
292
|
+
</section>
|
|
293
|
+
|
|
294
|
+
<!-- Footer -->
|
|
295
|
+
<footer
|
|
296
|
+
class="chai-py-48 chai-px-32 chai-display-flex chai-wrap-wrap chai-justify-between chai-items-center chai-gap-32 chai-max-w-[1100px] chai-mx-auto"
|
|
297
|
+
style="border-top: 1px solid rgba(217, 119, 6, 0.15)">
|
|
298
|
+
<div>
|
|
299
|
+
<a
|
|
300
|
+
href="index.html"
|
|
301
|
+
class="chai-weight-bold chai-text-[#faf6f1] chai-decoration-none">
|
|
302
|
+
<span class="chai-text-[#d97706]">Chai</span>CSS
|
|
303
|
+
</a>
|
|
304
|
+
<span class="chai-text-[#78716c] chai-ml-8">by BrewCodex</span>
|
|
305
|
+
</div>
|
|
306
|
+
|
|
307
|
+
<div class="chai-display-flex chai-gap-32">
|
|
308
|
+
<a
|
|
309
|
+
href="./website/docs.html"
|
|
310
|
+
class="chai-text-[#78716c] chai-decoration-none">
|
|
311
|
+
Documentation
|
|
312
|
+
</a>
|
|
313
|
+
|
|
314
|
+
<a
|
|
315
|
+
href="https://www.npmjs.com/package/@brewcodex/chai-css"
|
|
316
|
+
target="_blank"
|
|
317
|
+
rel="noopener"
|
|
318
|
+
class="chai-text-[#78716c] chai-decoration-none">
|
|
319
|
+
npm
|
|
320
|
+
</a>
|
|
321
|
+
|
|
322
|
+
<a
|
|
323
|
+
href="https://github.com"
|
|
324
|
+
target="_blank"
|
|
325
|
+
rel="noopener"
|
|
326
|
+
class="chai-text-[#78716c] chai-decoration-none">
|
|
327
|
+
GitHub
|
|
328
|
+
</a>
|
|
329
|
+
</div>
|
|
330
|
+
</footer>
|
|
331
|
+
|
|
332
|
+
<!-- Chai CSS -->
|
|
333
|
+
<script src="https://cdn.jsdelivr.net/npm/@brewcodex/chai-css"></script>
|
|
334
|
+
</body>
|
|
335
|
+
</html>
|