@brewcodex/chai-css 1.0.4 โ†’ 1.1.4

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.
Files changed (5) hide show
  1. package/README.md +527 -527
  2. package/dist/chaitailwind.esm.js +27 -8
  3. package/dist/chaitailwind.iife.js +1 -1
  4. package/dist/favicon.svg +28 -0
  5. package/package.json +40 -40
package/README.md CHANGED
@@ -1,527 +1,527 @@
1
- # Chai Tailwind - Utility-First CSS Engine
2
-
3
- A lightweight utility-first CSS engine that provides shorthand class names mapped to CSS properties. **16px base scale** with automatic REM conversion for responsive, accessible design.
4
-
5
- ---
6
-
7
- ## ๐Ÿ“ฆ Installation
8
-
9
- ### npm
10
-
11
- ```bash
12
- npm install @brewcodex/chai-css
13
- ```
14
-
15
- ```js
16
- import "@brewcodex/chai-css"; // Auto-initializes on DOM ready
17
- // Or for manual control:
18
- import chaiEngine from "@brewcodex/chai-css";
19
- chaiEngine.init();
20
- ```
21
-
22
- ### CDN (unpkg / jsDelivr)
23
-
24
- Add before `</body>`:
25
-
26
- ```html
27
- <script src="https://unpkg.com/@brewcodex/chai-css"></script>
28
- <!-- or -->
29
- <script src="https://cdn.jsdelivr.net/npm/@brewcodex/chai-css"></script>
30
- ```
31
-
32
- The script auto-initializes when the DOM is ready. Exposes `window.ChaiTailwind` for manual `init()` if needed.
33
-
34
- ---
35
-
36
- ## ๐Ÿ“š Complete Utilities Documentation
37
-
38
- ### 1. ๐ŸŽจ **TYPOGRAPHY** (`typography.js`)
39
-
40
- Text styling and font utilities. Use `chai-` prefix with any of these properties.
41
-
42
- | Utility | CSS Property | Example | Usage |
43
- | ------------ | -------------------- | ----------------------------------------------------------- | ------------------------ |
44
- | `text` | `color` | `chai-text-[#4a362c]` | Hex color in brackets |
45
- | `fs` | `fontSize` | `chai-fs-16`, `chai-fs-24` | Numeric value โ†’ REM |
46
- | `align` | `textAlign` | `chai-align-center`, `chai-align-left` | String keyword |
47
- | `weight` | `fontWeight` | `chai-weight-bold`, `chai-weight-normal` | String keyword |
48
- | `leading` | `lineHeight` | `chai-leading-[1.5]` | Custom value in brackets |
49
- | `tracking` | `letterSpacing` | `chai-tracking-[0.05em]` | Custom value in brackets |
50
- | `transform` | `textTransform` | `chai-transform-uppercase` | Implicit value |
51
- | `transform` | `textTransform` | `chai-transform-lowercase` | Implicit value |
52
- | `transform` | `textTransform` | `chai-transform-capitalize` | Implicit value |
53
- | `style` | `fontStyle` | `chai-style-italic` | Implicit value |
54
- | `decoration` | `textDecorationLine` | `chai-decoration-underline`, `chai-decoration-line-through` | String keyword |
55
- | `family` | `fontFamily` | `chai-family-[Arial]` | Custom value in brackets |
56
-
57
- **Examples:**
58
-
59
- ```html
60
- <h2 class="chai-fs-26 chai-text-[#4a362c] chai-weight-bold">Heading</h2>
61
- <p class="chai-fs-14 chai-text-[#815c4d] chai-align-center chai-leading-[1.6]">
62
- Text
63
- </p>
64
- <span class="chai-uppercase chai-tracking-[0.1em]">Styled Text</span>
65
- ```
66
-
67
- **Value Format:**
68
-
69
- - `chai-fs-16` โ†’ `fontSize: 1rem` (16 รท 16)
70
- - `chai-fs-24` โ†’ `fontSize: 1.5rem` (24 รท 16)
71
- - `chai-text-[#4a362c]` โ†’ `color: #4a362c` (brackets stripped)
72
-
73
- ---
74
-
75
- ### 2. ๐Ÿ“ **SIZING** (`sizing.js`)
76
-
77
- Dimension utilities for width, height, and constraints.
78
-
79
- | Utility | CSS Property | Example | Usage |
80
- | ------- | ------------ | ------------------------------------------ | -------------------------------------------- |
81
- | `w` | `width` | `chai-w-100`, `chai-w-50p`, `chai-w-100vh` | Numeric (โ†’ REM), `p` (โ†’%), or viewport units |
82
- | `h` | `height` | `chai-h-100`, `chai-h-50p`, `chai-h-100vh` | Numeric (โ†’ REM), `p` (โ†’%), or viewport units |
83
- | `min-w` | `minWidth` | `chai-min-w-200`, `chai-min-w-[300px]` | Numeric (โ†’ REM) or brackets |
84
- | `max-w` | `maxWidth` | `chai-max-w-500`, `chai-max-w-[600px]` | Numeric (โ†’ REM) or brackets |
85
- | `min-h` | `minHeight` | `chai-min-h-100`, `chai-min-h-[80px]` | Numeric (โ†’ REM) or brackets |
86
- | `max-h` | `maxHeight` | `chai-max-h-300`, `chai-max-h-[400px]` | Numeric (โ†’ REM) or brackets |
87
-
88
- **Examples:**
89
-
90
- ```html
91
- <div class="chai-w-100p chai-h-100vh">Full width & viewport height</div>
92
- <img
93
- class="chai-w-80 chai-h-80"
94
- src="image.jpg" />
95
- <div class="chai-min-h-100 chai-max-w-600">Constrained box</div>
96
- ```
97
-
98
- **Value Format:**
99
-
100
- - `chai-w-100` โ†’ `width: 6.25rem` (100 รท 16)
101
- - `chai-w-50p` โ†’ `width: 50%` (p suffix converts to %)
102
- - `chai-h-100vh` โ†’ `height: 100vh` (viewport units pass through)
103
- - `chai-min-w-[300px]` โ†’ `minWidth: 300px` (brackets pass through as-is)
104
-
105
- ---
106
-
107
- ### 3. ๐Ÿ“ **LAYOUT** (`layout.js`)
108
-
109
- Display, positioning, and visibility utilities for page layout and component positioning.
110
-
111
- | Utility | CSS Property | Example | Usage |
112
- | ------------ | ------------ | ------------------------------------------------------ | --------------------------- |
113
- | `display` | `display` | `chai-display-flex`, `chai-display-block` | String keyword |
114
- | `visibility` | `visibility` | `chai-visibility-visible`, `chai-visibility-invisible` | String keyword |
115
- | `pos` | `position` | `chai-pos-absolute`, `chai-pos-relative` | String keyword |
116
- | `top` | `top` | `chai-top-0`, `chai-top-[20px]` | Numeric (โ†’ REM) or brackets |
117
- | `right` | `right` | `chai-right-0`, `chai-right-[15px]` | Numeric (โ†’ REM) or brackets |
118
- | `bottom` | `bottom` | `chai-bottom-0`, `chai-bottom-[10px]` | Numeric (โ†’ REM) or brackets |
119
- | `left` | `left` | `chai-left-0`, `chai-left-[25px]` | Numeric (โ†’ REM) or brackets |
120
- | `z` | `zIndex` | `chai-z-10`, `chai-z-50`, `chai-z-[999]` | Numeric or brackets |
121
- | `overflow` | `overflow` | `chai-overflow-hidden`, `chai-overflow-auto` | String keyword |
122
- | `overflow-x` | `overflowX` | `chai-overflow-x-hidden`, `chai-overflow-x-auto` | String keyword |
123
- | `overflow-y` | `overflowY` | `chai-overflow-y-hidden`, `chai-overflow-y-auto` | String keyword |
124
- | `object` | `objectFit` | `chai-object-cover`, `chai-object-contain` | String keyword |
125
-
126
- **Examples:**
127
-
128
- ```html
129
- <div class="chai-display-flex chai-pos-relative">Flex container</div>
130
- <div class="chai-pos-absolute chai-top-0 chai-left-0 chai-z-10">
131
- Positioned absolutely
132
- </div>
133
- <div class="chai-overflow-hidden chai-overflow-x-auto">Overflow control</div>
134
- ```
135
-
136
- **Value Format:**
137
-
138
- - `chai-top-0` โ†’ `top: 0` (string "0" passed through)
139
- - `chai-top-16` โ†’ `top: 1rem` (16 รท 16)
140
- - `chai-top-[20px]` โ†’ `top: 20px` (brackets pass through)
141
- - `chai-display-flex` โ†’ `display: flex` (string keyword)
142
-
143
- ---
144
-
145
- ### 4. ๐Ÿ“ฆ **SPACING** (`spacing.js`)
146
-
147
- Padding and margin utilities with directional control.
148
-
149
- #### Padding (`p*`)
150
-
151
- | Utility | CSS Property | Example | Usage |
152
- | ------- | -------------------- | ------------------------ | --------------- |
153
- | `p` | `padding` | `chai-p-16`, `chai-p-32` | Numeric (โ†’ REM) |
154
- | `pt` | `paddingBlockStart` | `chai-pt-8` | Numeric (โ†’ REM) |
155
- | `pb` | `paddingBlockEnd` | `chai-pb-8` | Numeric (โ†’ REM) |
156
- | `pl` | `paddingInlineStart` | `chai-pl-12` | Numeric (โ†’ REM) |
157
- | `pr` | `paddingInlineEnd` | `chai-pr-12` | Numeric (โ†’ REM) |
158
- | `px` | `paddingInline` | `chai-px-16` | Numeric (โ†’ REM) |
159
- | `py` | `paddingBlock` | `chai-py-12` | Numeric (โ†’ REM) |
160
-
161
- #### Margin (`m*`)
162
-
163
- | Utility | CSS Property | Example | Usage |
164
- | ------- | ------------------- | -------------------------- | ------------------------- |
165
- | `m` | `margin` | `chai-m-16`, `chai-m-auto` | Numeric (โ†’ REM) or string |
166
- | `mt` | `marginBlockStart` | `chai-mt-8` | Numeric (โ†’ REM) |
167
- | `mb` | `marginBlockEnd` | `chai-mb-8` | Numeric (โ†’ REM) |
168
- | `ml` | `marginInlineStart` | `chai-ml-12` | Numeric (โ†’ REM) |
169
- | `mr` | `marginInlineEnd` | `chai-mr-12` | Numeric (โ†’ REM) |
170
- | `mx` | `marginInline` | `chai-mx-auto` | Numeric (โ†’ REM) or string |
171
- | `my` | `marginBlock` | `chai-my-16` | Numeric (โ†’ REM) |
172
-
173
- **Examples:**
174
-
175
- ```html
176
- <div class="chai-p-32">All sides padding: 2rem (32px)</div>
177
- <div class="chai-py-16 chai-px-24">Vertical 1rem, Horizontal 1.5rem</div>
178
- <div class="chai-m-auto">Centered with auto margin</div>
179
- <div class="chai-mt-8 chai-mb-16">Top 0.5rem, Bottom 1rem</div>
180
- ```
181
-
182
- **Value Format:**
183
-
184
- - `chai-p-32` โ†’ `padding: 2rem` (32 รท 16)
185
- - `chai-m-auto` โ†’ `margin: auto` (string keyword)
186
- - `chai-mx-auto` โ†’ `marginInline: auto` (string keyword)
187
-
188
- ---
189
-
190
- ### 5. ๐ŸŽจ **BACKGROUND** (`background.js`)
191
-
192
- Background color utilities with hex color support.
193
-
194
- | Utility | CSS Property | Example | Usage |
195
- | ------- | ----------------- | ------------------- | ---------------------- |
196
- | `bg` | `backgroundColor` | `chai-bg-[#f5f1e9]` | Hex colors in brackets |
197
-
198
- **Examples:**
199
-
200
- ```html
201
- <div class="chai-bg-[#f5f1e9]">Cream background</div>
202
- <div class="chai-bg-[#815c4d]">Brown background</div>
203
- <div class="chai-bg-[#ffffff]">White background</div>
204
- ```
205
-
206
- **Value Format:**
207
-
208
- - `chai-bg-[#f5f1e9]` โ†’ `backgroundColor: #f5f1e9` (brackets stripped)
209
-
210
- ---
211
-
212
- ### 6. ๐Ÿ”ฒ **BORDER** (`border.js`)
213
-
214
- Border styling utilities for width, color, style, and radius.
215
-
216
- | Utility | CSS Property | Example | Usage |
217
- | ----------------- | ---------------- | ------------------------------------ | --------------------------- |
218
- | `bw` | `borderWidth` | `chai-bw-1`, `chai-bw-2` | Numeric (โ†’ REM) |
219
- | `bc` | `borderColor` | `chai-bc-[#ccc]` | Hex color in brackets |
220
- | `bs` | `borderStyle` | `chai-bs-solid`, `chai-bs-dashed` | String keyword |
221
- | `rounded` | `borderRadius` | `chai-rounded-8`, `chai-rounded-50p` | Numeric (โ†’ REM) or `p` (โ†’%) |
222
- | `border-collapse` | `borderCollapse` | `chai-border-collapse` | String keyword |
223
-
224
- **Examples:**
225
-
226
- ```html
227
- <div class="chai-bw-1 chai-bc-[#ccc] chai-bs-solid chai-rounded-8">
228
- Bordered box
229
- </div>
230
- <div class="chai-rounded-50p">Circle - 50% radius</div>
231
- <button class="chai-bw-2 chai-bc-[#4a362c] chai-rounded-12">Button</button>
232
- ```
233
-
234
- **Value Format:**
235
-
236
- - `chai-bw-1` โ†’ `borderWidth: 0.0625rem` (1 รท 16)
237
- - `chai-bc-[#ccc]` โ†’ `borderColor: #ccc` (brackets stripped)
238
- - `chai-rounded-8` โ†’ `borderRadius: 0.5rem` (8 รท 16)
239
- - `chai-rounded-50p` โ†’ `borderRadius: 50%` (p suffix converts to %)
240
-
241
- ---
242
-
243
- ### 7. ๐Ÿ”„ **FLEXBOX** (`flex_grid.js`)
244
-
245
- Flex layout utilities for alignment, direction, sizing, and spacing.
246
-
247
- #### Direction & Wrapping
248
-
249
- | Utility | CSS Property | Example | Usage |
250
- | ---------- | --------------- | ------------------------------------ | ----------------------- |
251
- | `flex-row` | `flexDirection` | `chai-flex-row` | Row direction (default) |
252
- | `flex-col` | `flexDirection` | `chai-flex-col` | Column direction |
253
- | `flex-row` | `flexDirection` | `chai-flex-row-reverse` | Row direction recerse |
254
- | `flex-col` | `flexDirection` | `chai-flex-col-reverse` | Row direction recerse |
255
- | `wrap` | `flexWrap` | `chai-wrap-wrap`, `chai-wrap-nowrap` | Wrapping behavior |
256
-
257
- #### Alignment
258
-
259
- | Utility | CSS Property | Example | Usage |
260
- | --------- | ---------------- | --------------------------------------------- | ------------------------- |
261
- | `justify` | `justifyContent` | `chai-justify-center`, `chai-justify-between` | Horizontal alignment |
262
- | `items` | `alignItems` | `chai-items-center`, `chai-items-start` | Vertical alignment |
263
- | `self` | `alignSelf` | `chai-self-end`, `chai-self-center` | Individual item alignment |
264
-
265
- #### Sizing & Spacing
266
-
267
- | Utility | CSS Property | Example | Usage |
268
- | -------- | ------------ | ------------------------------------------ | ------------------------- |
269
- | `flex` | `flex` | `chai-flex-1`, `chai-flex-auto` | Flex grow behavior |
270
- | `grow` | `flexGrow` | `chai-grow-1`, `chai-grow-0` | Flex grow value |
271
- | `shrink` | `flexShrink` | `chai-shrink-0`, `chai-shrink-1` | Flex shrink value |
272
- | `gap` | `gap` | `chai-gap-4`, `chai-gap-16`, `chai-gap-32` | Gap between items (โ†’ REM) |
273
-
274
- **Examples:**
275
-
276
- ```html
277
- <!-- Flex row with centered items -->
278
- <div
279
- class="chai-display-flex chai-flex-row chai-gap-16 chai-justify-center chai-items-center">
280
- <div class="chai-flex-1">Item 1</div>
281
- <div class="chai-flex-1">Item 2</div>
282
- </div>
283
-
284
- <!-- Flex column layout -->
285
- <div class="chai-display-flex chai-flex-col chai-gap-8">
286
- <div>Header</div>
287
- <div>Content</div>
288
- <div>Footer</div>
289
- </div>
290
-
291
- <!-- Space-between layout -->
292
- <div
293
- class="chai-display-flex chai-justify-between chai-items-center chai-gap-32">
294
- <span>Left</span>
295
- <span>Right</span>
296
- </div>
297
- ```
298
-
299
- **Value Format:**
300
-
301
- - `chai-gap-16` โ†’ `gap: 1rem` (16 รท 16)
302
- - `chai-gap-32` โ†’ `gap: 2rem` (32 รท 16)
303
- - `chai-justify-center` โ†’ `justifyContent: center` (string keyword)
304
- - `chai-items-center` โ†’ `alignItems: center` (string keyword)
305
-
306
- ---
307
-
308
- ## ๐Ÿš€ Complete Usage Examples
309
-
310
- ### Example 1: Card Component
311
-
312
- ```html
313
- <div
314
- class="chai-bg-[#fff] chai-p-32 chai-rounded-16 chai-display-flex chai-flex-col chai-gap-16 chai-bw-1 chai-bc-[#ddd] chai-bs-solid">
315
- <h2 class="chai-fs-24 chai-weight-bold chai-text-[#4a362c] chai-m-0">
316
- Card Title
317
- </h2>
318
- <p class="chai-fs-14 chai-text-[#815c4d] chai-leading-[1.6] chai-m-0">
319
- Card description with proper spacing and typography styling.
320
- </p>
321
- <button
322
- class="chai-bg-[#4a362c] chai-text-[#fff] chai-p-12 chai-rounded-12 chai-fs-16 chai-weight-bold chai-bw-0">
323
- Action Button
324
- </button>
325
- </div>
326
- ```
327
-
328
- **Resulting CSS:**
329
-
330
- ```css
331
- padding: 2rem; /* chai-p-32: 32 รท 16 */
332
- borderradius: 1rem; /* chai-rounded-16: 16 รท 16 */
333
- gap: 1rem; /* chai-gap-16: 16 รท 16 */
334
- fontsize: 1.5rem; /* chai-fs-24: 24 รท 16 */
335
- backgroundcolor: #4a362c; /* chai-bg-[#4a362c] */
336
- ```
337
-
338
- ### Example 2: Two-Column Layout
339
-
340
- ```html
341
- <div
342
- class="chai-display-flex chai-flex-row chai-gap-32 chai-justify-center chai-items-start">
343
- <div class="chai-w-350 chai-display-flex chai-flex-col chai-gap-16">
344
- <!-- Left column: 350px (21.875rem) -->
345
- </div>
346
- <div class="chai-w-400 chai-display-flex chai-flex-col chai-gap-16">
347
- <!-- Right column: 400px (25rem) -->
348
- </div>
349
- </div>
350
- ```
351
-
352
- **Resulting CSS:**
353
-
354
- ```css
355
- width: 21.875rem; /* chai-w-350: 350 รท 16 */
356
- gap: 2rem; /* chai-gap-32: 32 รท 16 */
357
- justifycontent: center;
358
- ```
359
-
360
- ### Example 3: Responsive Hero Section
361
-
362
- ```html
363
- <section
364
- class="chai-bg-gradient chai-h-100vh chai-w-100p chai-display-flex chai-items-center chai-justify-center chai-flex-col chai-gap-24 chai-p-32">
365
- <h1
366
- class="chai-fs-48 chai-weight-bold chai-text-[#fff] chai-align-center chai-m-0">
367
- Welcome to Chai Tailwind
368
- </h1>
369
- <p class="chai-fs-18 chai-text-[#f0f0f0] chai-align-center chai-max-w-600">
370
- Lightweight utility-first CSS engine with 16px REM scaling
371
- </p>
372
- </section>
373
- ```
374
-
375
- **Value Conversions:**
376
-
377
- - `chai-h-100vh` โ†’ `height: 100vh` (viewport unit)
378
- - `chai-w-100p` โ†’ `width: 100%` (percentage with p suffix)
379
- - `chai-gap-24` โ†’ `gap: 1.5rem` (24 รท 16)
380
- - `chai-max-w-600` โ†’ `maxWidth: 37.5rem` (600 รท 16)
381
-
382
- ---
383
-
384
- ## ๐ŸŽฏ Value Formatting System
385
-
386
- The Chai engine has smart value parsing that automatically converts values based on their format:
387
-
388
- ### ๐Ÿ”ข **Numeric Values โ†’ REM Conversion**
389
-
390
- Any numeric value in these properties gets converted from pixels to REM (base: 16px):
391
-
392
- **Numeric-to-REM Properties:**
393
-
394
- - Spacing: `p`, `m`, `pt`, `pb`, `pl`, `pr`, `px`, `py`, `mt`, `mb`, `ml`, `mr`, `my`, `mx`
395
- - Sizing: `w`, `h`, `min-w`, `min-h`, `max-w`, `max-h`
396
- - Typography: `fs` (fontSize)
397
- - Border: `rounded` (borderRadius), `bw` (borderWidth)
398
- - Flexbox: `gap`
399
-
400
- **Conversion Formula:** `value รท 16 = rem`
401
-
402
- Examples:
403
-
404
- - `chai-p-16` โ†’ `padding: 1rem` (16 รท 16)
405
- - `chai-fs-24` โ†’ `fontSize: 1.5rem` (24 รท 16)
406
- - `chai-gap-32` โ†’ `gap: 2rem` (32 รท 16)
407
- - `chai-w-100` โ†’ `width: 6.25rem` (100 รท 16)
408
-
409
- ### ๐Ÿ“Š **Percentage Values (p suffix)**
410
-
411
- Any value ending with `p` converts to a percentage:
412
-
413
- Examples:
414
-
415
- - `chai-w-50p` โ†’ `width: 50%`
416
- - `chai-h-75p` โ†’ `height: 75%`
417
- - `chai-rounded-50p` โ†’ `borderRadius: 50%`
418
-
419
- ### ๐Ÿ“ฑ **Viewport Units (vh/vw)**
420
-
421
- Viewport units pass through unchanged:
422
-
423
- Examples:
424
-
425
- - `chai-h-100vh` โ†’ `height: 100vh`
426
- - `chai-w-50vw` โ†’ `width: 50vw`
427
-
428
- ### ๐ŸŽจ **Hex Colors (brackets)**
429
-
430
- Hex colors wrapped in brackets get brackets stripped:
431
-
432
- Examples:
433
-
434
- - `chai-bg-[#f5f1e9]` โ†’ `backgroundColor: #f5f1e9`
435
- - `chai-text-[#4a362c]` โ†’ `color: #4a362c`
436
- - `chai-bc-[#ccc]` โ†’ `borderColor: #ccc`
437
-
438
- ### ๐Ÿท๏ธ **String Keywords**
439
-
440
- String values pass through unchanged:
441
-
442
- Examples:
443
-
444
- - `chai-display-flex` โ†’ `display: flex`
445
- - `chai-items-center` โ†’ `alignItems: center`
446
- - `chai-justify-between` โ†’ `justifyContent: between`
447
- - `chai-bs-solid` โ†’ `borderStyle: solid`
448
-
449
- ### ๐Ÿ“ฆ **Custom Values (brackets)**
450
-
451
- Any custom value in brackets passes through as-is:
452
-
453
- Examples:
454
-
455
- - `chai-min-w-[300px]` โ†’ `minWidth: 300px`
456
- - `chai-p-[1.5em]` โ†’ `padding: 1.5em`
457
- <!-- - `chai-top-[calc(100% - 20px)]` โ†’ `top: calc(100% - 20px)` -->
458
-
459
- ---
460
-
461
- ## ๐Ÿ“Š REM Scale Reference
462
-
463
- **16px Base Scale** - All numeric values convert to REM:
464
-
465
- | Value | REM | Actual | Example |
466
- | ----- | ------- | ------ | ------------- |
467
- | 4 | 0.25rem | 4px | `chai-gap-4` |
468
- | 8 | 0.5rem | 8px | `chai-p-8` |
469
- | 12 | 0.75rem | 12px | `chai-pl-12` |
470
- | 16 | 1rem | 16px | `chai-fs-16` |
471
- | 24 | 1.5rem | 24px | `chai-m-24` |
472
- | 32 | 2rem | 32px | `chai-p-32` |
473
- | 48 | 3rem | 48px | `chai-gap-48` |
474
- | 64 | 4rem | 64px | `chai-p-64` |
475
- | 80 | 5rem | 80px | `chai-w-80` |
476
- | 96 | 6rem | 96px | `chai-h-96` |
477
- | 100 | 6.25rem | 100px | `chai-w-100` |
478
-
479
- ---
480
-
481
- ## ๐ŸŽฏ Class Naming Convention
482
-
483
- All utilities follow the pattern:
484
-
485
- ```
486
- chai-[property]-[value]
487
- ```
488
-
489
- Examples:
490
-
491
- - `chai-p-24` โ†’ property: `p`, value: `24`
492
- - `chai-text-[#4a362c]` โ†’ property: `text`, value: `[#4a362c]`
493
- - `chai-display-flex` โ†’ property: `display`, value: `flex`
494
- - `chai-w-100p` โ†’ property: `w`, value: `100p`
495
-
496
- ---
497
-
498
- ## โœจ Summary
499
-
500
- ### ๐Ÿ“Š Statistics
501
-
502
- - **Total Utilities**: 70+
503
- - **Utility Categories**: 7
504
- - **CSS Properties Mapped**: 40+
505
- - **Base Scale**: 16px REM conversion
506
- - **Value Types**: Numeric (REM), Percentage, Viewport, Hex Color, String Keyword, Custom
507
-
508
- ### ๐ŸŽจ Categories
509
-
510
- 1. **Typography** (12 utilities) - Text styling, colors, decoration
511
- 2. **Sizing** (6 utilities) - Width, height, constraints
512
- 3. **Layout** (12 utilities) - Display, positioning, overflow
513
- 4. **Spacing** (14 utilities) - Padding and margin with directions
514
- 5. **Background** (1 utility) - Background colors
515
- 6. **Border** (4 utilities) - Width, color, style, radius
516
- 7. **Flexbox** (11 utilities) - Direction, alignment, gap, flex sizing
517
-
518
- ### ๐Ÿš€ Key Features
519
-
520
- - โœ… **Automatic REM Scaling** - Numeric values auto-convert with 16px base
521
- - โœ… **Smart Value Parsing** - Percentages (p suffix), viewport units (vh/vw), custom values (brackets)
522
- - โœ… **Hex Color Support** - Direct bracket notation for colors: `[#4a362c]`
523
- - โœ… **Responsive-First** - Built for fluid, accessible designs
524
- - โœ… **Lightweight** - Minimal CSS footprint, utility-first approach
525
- - โœ… **Accessibility** - Logical properties (start/end) support RTL/LTR
526
-
527
- Perfect for rapid, utility-driven UI development! โ˜•
1
+ # ChaiCSS - Utility-First CSS Engine
2
+
3
+ A lightweight utility-first CSS engine that provides shorthand class names mapped to CSS properties. **16px base scale** with automatic REM conversion for responsive, accessible design.
4
+
5
+ ---
6
+
7
+ ## ๐Ÿ“ฆ Installation
8
+
9
+ ### npm
10
+
11
+ ```bash
12
+ npm install @brewcodex/chai-css
13
+ ```
14
+
15
+ ```js
16
+ import "@brewcodex/chai-css"; // Auto-initializes on DOM ready
17
+ // Or for manual control:
18
+ import chaiEngine from "@brewcodex/chai-css";
19
+ chaiEngine.init();
20
+ ```
21
+
22
+ ### CDN (unpkg / jsDelivr)
23
+
24
+ Add before `</body>`:
25
+
26
+ ```html
27
+ <script src="https://cdn.jsdelivr.net/npm/@brewcodex/chai-css@1"></script>
28
+ <!-- or -->
29
+ <script src="https://cdn.jsdelivr.net/npm/@brewcodex/chai-css"></script>
30
+ ```
31
+
32
+ The script auto-initializes when the DOM is ready. Exposes `window.ChaiTailwind` for manual `init()` if needed.
33
+
34
+ ---
35
+
36
+ ## ๐Ÿ“š Complete Utilities Documentation
37
+
38
+ ### 1. ๐ŸŽจ **TYPOGRAPHY**
39
+
40
+ Text styling and font utilities. Use `chai-` prefix with any of these properties.
41
+
42
+ | Utility | CSS Property | Example | Usage |
43
+ | ------------ | -------------------- | ----------------------------------------------------------- | ------------------------ |
44
+ | `text` | `color` | `chai-text-[#4a362c]` | Hex color in brackets |
45
+ | `fs` | `fontSize` | `chai-fs-16`, `chai-fs-24` | Numeric value โ†’ REM |
46
+ | `align` | `textAlign` | `chai-align-center`, `chai-align-left` | String keyword |
47
+ | `weight` | `fontWeight` | `chai-weight-bold`, `chai-weight-normal` | String keyword |
48
+ | `leading` | `lineHeight` | `chai-leading-[1.5]` | Custom value in brackets |
49
+ | `tracking` | `letterSpacing` | `chai-tracking-[0.05em]` | Custom value in brackets |
50
+ | `transform` | `textTransform` | `chai-transform-uppercase` | Implicit value |
51
+ | `transform` | `textTransform` | `chai-transform-lowercase` | Implicit value |
52
+ | `transform` | `textTransform` | `chai-transform-capitalize` | Implicit value |
53
+ | `style` | `fontStyle` | `chai-style-italic` | Implicit value |
54
+ | `decoration` | `textDecorationLine` | `chai-decoration-underline`, `chai-decoration-line-through` | String keyword |
55
+ | `family` | `fontFamily` | `chai-family-[Arial]` | Custom value in brackets |
56
+
57
+ **Examples:**
58
+
59
+ ```html
60
+ <h2 class="chai-fs-26 chai-text-[#4a362c] chai-weight-bold">Heading</h2>
61
+ <p class="chai-fs-14 chai-text-[#815c4d] chai-align-center chai-leading-[1.6]">
62
+ Text
63
+ </p>
64
+ <span class="chai-uppercase chai-tracking-[0.1em]">Styled Text</span>
65
+ ```
66
+
67
+ **Value Format:**
68
+
69
+ - `chai-fs-16` โ†’ `fontSize: 1rem` (16 รท 16)
70
+ - `chai-fs-24` โ†’ `fontSize: 1.5rem` (24 รท 16)
71
+ - `chai-text-[#4a362c]` โ†’ `color: #4a362c` (brackets stripped)
72
+
73
+ ---
74
+
75
+ ### 2. ๐Ÿ“ **SIZING**
76
+
77
+ Dimension utilities for width, height, and constraints.
78
+
79
+ | Utility | CSS Property | Example | Usage |
80
+ | ------- | ------------ | ------------------------------------------ | -------------------------------------------- |
81
+ | `w` | `width` | `chai-w-100`, `chai-w-50p`, `chai-w-100vh` | Numeric (โ†’ REM), `p` (โ†’%), or viewport units |
82
+ | `h` | `height` | `chai-h-100`, `chai-h-50p`, `chai-h-100vh` | Numeric (โ†’ REM), `p` (โ†’%), or viewport units |
83
+ | `min-w` | `minWidth` | `chai-min-w-200`, `chai-min-w-[300px]` | Numeric (โ†’ REM) or brackets |
84
+ | `max-w` | `maxWidth` | `chai-max-w-500`, `chai-max-w-[600px]` | Numeric (โ†’ REM) or brackets |
85
+ | `min-h` | `minHeight` | `chai-min-h-100`, `chai-min-h-[80px]` | Numeric (โ†’ REM) or brackets |
86
+ | `max-h` | `maxHeight` | `chai-max-h-300`, `chai-max-h-[400px]` | Numeric (โ†’ REM) or brackets |
87
+
88
+ **Examples:**
89
+
90
+ ```html
91
+ <div class="chai-w-100p chai-h-100vh">Full width & viewport height</div>
92
+ <img
93
+ class="chai-w-80 chai-h-80"
94
+ src="image.jpg" />
95
+ <div class="chai-min-h-100 chai-max-w-600">Constrained box</div>
96
+ ```
97
+
98
+ **Value Format:**
99
+
100
+ - `chai-w-100` โ†’ `width: 6.25rem` (100 รท 16)
101
+ - `chai-w-50p` โ†’ `width: 50%` (p suffix converts to %)
102
+ - `chai-h-100vh` โ†’ `height: 100vh` (viewport units pass through)
103
+ - `chai-min-w-[300px]` โ†’ `minWidth: 300px` (brackets pass through as-is)
104
+
105
+ ---
106
+
107
+ ### 3. ๐Ÿ“ **LAYOUT**
108
+
109
+ Display, positioning, and visibility utilities for page layout and component positioning.
110
+
111
+ | Utility | CSS Property | Example | Usage |
112
+ | ------------ | ------------ | ------------------------------------------------------ | --------------------------- |
113
+ | `display` | `display` | `chai-display-flex`, `chai-display-block` | String keyword |
114
+ | `visibility` | `visibility` | `chai-visibility-visible`, `chai-visibility-invisible` | String keyword |
115
+ | `pos` | `position` | `chai-pos-absolute`, `chai-pos-relative` | String keyword |
116
+ | `top` | `top` | `chai-top-0`, `chai-top-[20px]` | Numeric (โ†’ REM) or brackets |
117
+ | `right` | `right` | `chai-right-0`, `chai-right-[15px]` | Numeric (โ†’ REM) or brackets |
118
+ | `bottom` | `bottom` | `chai-bottom-0`, `chai-bottom-[10px]` | Numeric (โ†’ REM) or brackets |
119
+ | `left` | `left` | `chai-left-0`, `chai-left-[25px]` | Numeric (โ†’ REM) or brackets |
120
+ | `z` | `zIndex` | `chai-z-10`, `chai-z-50`, `chai-z-[999]` | Numeric or brackets |
121
+ | `overflow` | `overflow` | `chai-overflow-hidden`, `chai-overflow-auto` | String keyword |
122
+ | `overflow-x` | `overflowX` | `chai-overflow-x-hidden`, `chai-overflow-x-auto` | String keyword |
123
+ | `overflow-y` | `overflowY` | `chai-overflow-y-hidden`, `chai-overflow-y-auto` | String keyword |
124
+ | `object` | `objectFit` | `chai-object-cover`, `chai-object-contain` | String keyword |
125
+
126
+ **Examples:**
127
+
128
+ ```html
129
+ <div class="chai-display-flex chai-pos-relative">Flex container</div>
130
+ <div class="chai-pos-absolute chai-top-0 chai-left-0 chai-z-10">
131
+ Positioned absolutely
132
+ </div>
133
+ <div class="chai-overflow-hidden chai-overflow-x-auto">Overflow control</div>
134
+ ```
135
+
136
+ **Value Format:**
137
+
138
+ - `chai-top-0` โ†’ `top: 0` (string "0" passed through)
139
+ - `chai-top-16` โ†’ `top: 1rem` (16 รท 16)
140
+ - `chai-top-[20px]` โ†’ `top: 20px` (brackets pass through)
141
+ - `chai-display-flex` โ†’ `display: flex` (string keyword)
142
+
143
+ ---
144
+
145
+ ### 4. ๐Ÿ“ฆ **SPACING**
146
+
147
+ Padding and margin utilities with directional control.
148
+
149
+ #### Padding (`p*`)
150
+
151
+ | Utility | CSS Property | Example | Usage |
152
+ | ------- | -------------------- | ------------------------ | --------------- |
153
+ | `p` | `padding` | `chai-p-16`, `chai-p-32` | Numeric (โ†’ REM) |
154
+ | `pt` | `paddingBlockStart` | `chai-pt-8` | Numeric (โ†’ REM) |
155
+ | `pb` | `paddingBlockEnd` | `chai-pb-8` | Numeric (โ†’ REM) |
156
+ | `pl` | `paddingInlineStart` | `chai-pl-12` | Numeric (โ†’ REM) |
157
+ | `pr` | `paddingInlineEnd` | `chai-pr-12` | Numeric (โ†’ REM) |
158
+ | `px` | `paddingInline` | `chai-px-16` | Numeric (โ†’ REM) |
159
+ | `py` | `paddingBlock` | `chai-py-12` | Numeric (โ†’ REM) |
160
+
161
+ #### Margin (`m*`)
162
+
163
+ | Utility | CSS Property | Example | Usage |
164
+ | ------- | ------------------- | -------------------------- | ------------------------- |
165
+ | `m` | `margin` | `chai-m-16`, `chai-m-auto` | Numeric (โ†’ REM) or string |
166
+ | `mt` | `marginBlockStart` | `chai-mt-8` | Numeric (โ†’ REM) |
167
+ | `mb` | `marginBlockEnd` | `chai-mb-8` | Numeric (โ†’ REM) |
168
+ | `ml` | `marginInlineStart` | `chai-ml-12` | Numeric (โ†’ REM) |
169
+ | `mr` | `marginInlineEnd` | `chai-mr-12` | Numeric (โ†’ REM) |
170
+ | `mx` | `marginInline` | `chai-mx-auto` | Numeric (โ†’ REM) or string |
171
+ | `my` | `marginBlock` | `chai-my-16` | Numeric (โ†’ REM) |
172
+
173
+ **Examples:**
174
+
175
+ ```html
176
+ <div class="chai-p-32">All sides padding: 2rem (32px)</div>
177
+ <div class="chai-py-16 chai-px-24">Vertical 1rem, Horizontal 1.5rem</div>
178
+ <div class="chai-m-auto">Centered with auto margin</div>
179
+ <div class="chai-mt-8 chai-mb-16">Top 0.5rem, Bottom 1rem</div>
180
+ ```
181
+
182
+ **Value Format:**
183
+
184
+ - `chai-p-32` โ†’ `padding: 2rem` (32 รท 16)
185
+ - `chai-m-auto` โ†’ `margin: auto` (string keyword)
186
+ - `chai-mx-auto` โ†’ `marginInline: auto` (string keyword)
187
+
188
+ ---
189
+
190
+ ### 5. ๐ŸŽจ **BACKGROUND**
191
+
192
+ Background color utilities with hex color support.
193
+
194
+ | Utility | CSS Property | Example | Usage |
195
+ | ------- | ----------------- | ------------------- | ---------------------- |
196
+ | `bg` | `backgroundColor` | `chai-bg-[#f5f1e9]` | Hex colors in brackets |
197
+
198
+ **Examples:**
199
+
200
+ ```html
201
+ <div class="chai-bg-[#f5f1e9]">Cream background</div>
202
+ <div class="chai-bg-[#815c4d]">Brown background</div>
203
+ <div class="chai-bg-[#ffffff]">White background</div>
204
+ ```
205
+
206
+ **Value Format:**
207
+
208
+ - `chai-bg-[#f5f1e9]` โ†’ `backgroundColor: #f5f1e9` (brackets stripped)
209
+
210
+ ---
211
+
212
+ ### 6. ๐Ÿ”ฒ **BORDER**
213
+
214
+ Border styling utilities for width, color, style, and radius.
215
+
216
+ | Utility | CSS Property | Example | Usage |
217
+ | ----------------- | ---------------- | ------------------------------------ | --------------------------- |
218
+ | `bw` | `borderWidth` | `chai-bw-1`, `chai-bw-2` | Numeric (โ†’ REM) |
219
+ | `bc` | `borderColor` | `chai-bc-[#ccc]` | Hex color in brackets |
220
+ | `bs` | `borderStyle` | `chai-bs-solid`, `chai-bs-dashed` | String keyword |
221
+ | `rounded` | `borderRadius` | `chai-rounded-8`, `chai-rounded-50p` | Numeric (โ†’ REM) or `p` (โ†’%) |
222
+ | `border-collapse` | `borderCollapse` | `chai-border-collapse` | String keyword |
223
+
224
+ **Examples:**
225
+
226
+ ```html
227
+ <div class="chai-bw-1 chai-bc-[#ccc] chai-bs-solid chai-rounded-8">
228
+ Bordered box
229
+ </div>
230
+ <div class="chai-rounded-50p">Circle - 50% radius</div>
231
+ <button class="chai-bw-2 chai-bc-[#4a362c] chai-rounded-12">Button</button>
232
+ ```
233
+
234
+ **Value Format:**
235
+
236
+ - `chai-bw-1` โ†’ `borderWidth: 0.0625rem` (1 รท 16)
237
+ - `chai-bc-[#ccc]` โ†’ `borderColor: #ccc` (brackets stripped)
238
+ - `chai-rounded-8` โ†’ `borderRadius: 0.5rem` (8 รท 16)
239
+ - `chai-rounded-50p` โ†’ `borderRadius: 50%` (p suffix converts to %)
240
+
241
+ ---
242
+
243
+ ### 7. ๐Ÿ”„ **FLEXBOX**
244
+
245
+ Flex layout utilities for alignment, direction, sizing, and spacing.
246
+
247
+ #### Direction & Wrapping
248
+
249
+ | Utility | CSS Property | Example | Usage |
250
+ | ---------- | --------------- | ------------------------------------ | ----------------------- |
251
+ | `flex-row` | `flexDirection` | `chai-flex-row` | Row direction (default) |
252
+ | `flex-col` | `flexDirection` | `chai-flex-col` | Column direction |
253
+ | `flex-row` | `flexDirection` | `chai-flex-row-reverse` | Row direction recerse |
254
+ | `flex-col` | `flexDirection` | `chai-flex-col-reverse` | Row direction recerse |
255
+ | `wrap` | `flexWrap` | `chai-wrap-wrap`, `chai-wrap-nowrap` | Wrapping behavior |
256
+
257
+ #### Alignment
258
+
259
+ | Utility | CSS Property | Example | Usage |
260
+ | --------- | ---------------- | --------------------------------------------- | ------------------------- |
261
+ | `justify` | `justifyContent` | `chai-justify-center`, `chai-justify-between` | Horizontal alignment |
262
+ | `items` | `alignItems` | `chai-items-center`, `chai-items-start` | Vertical alignment |
263
+ | `self` | `alignSelf` | `chai-self-end`, `chai-self-center` | Individual item alignment |
264
+
265
+ #### Sizing & Spacing
266
+
267
+ | Utility | CSS Property | Example | Usage |
268
+ | -------- | ------------ | ------------------------------------------ | ------------------------- |
269
+ | `flex` | `flex` | `chai-flex-1`, `chai-flex-auto` | Flex grow behavior |
270
+ | `grow` | `flexGrow` | `chai-grow-1`, `chai-grow-0` | Flex grow value |
271
+ | `shrink` | `flexShrink` | `chai-shrink-0`, `chai-shrink-1` | Flex shrink value |
272
+ | `gap` | `gap` | `chai-gap-4`, `chai-gap-16`, `chai-gap-32` | Gap between items (โ†’ REM) |
273
+
274
+ **Examples:**
275
+
276
+ ```html
277
+ <!-- Flex row with centered items -->
278
+ <div
279
+ class="chai-display-flex chai-flex-row chai-gap-16 chai-justify-center chai-items-center">
280
+ <div class="chai-flex-1">Item 1</div>
281
+ <div class="chai-flex-1">Item 2</div>
282
+ </div>
283
+
284
+ <!-- Flex column layout -->
285
+ <div class="chai-display-flex chai-flex-col chai-gap-8">
286
+ <div>Header</div>
287
+ <div>Content</div>
288
+ <div>Footer</div>
289
+ </div>
290
+
291
+ <!-- Space-between layout -->
292
+ <div
293
+ class="chai-display-flex chai-justify-between chai-items-center chai-gap-32">
294
+ <span>Left</span>
295
+ <span>Right</span>
296
+ </div>
297
+ ```
298
+
299
+ **Value Format:**
300
+
301
+ - `chai-gap-16` โ†’ `gap: 1rem` (16 รท 16)
302
+ - `chai-gap-32` โ†’ `gap: 2rem` (32 รท 16)
303
+ - `chai-justify-center` โ†’ `justifyContent: center` (string keyword)
304
+ - `chai-items-center` โ†’ `alignItems: center` (string keyword)
305
+
306
+ ---
307
+
308
+ ## ๐Ÿš€ Complete Usage Examples
309
+
310
+ ### Example 1: Card Component
311
+
312
+ ```html
313
+ <div
314
+ class="chai-bg-[#fff] chai-p-32 chai-rounded-16 chai-display-flex chai-flex-col chai-gap-16 chai-bw-1 chai-bc-[#ddd] chai-bs-solid">
315
+ <h2 class="chai-fs-24 chai-weight-bold chai-text-[#4a362c] chai-m-0">
316
+ Card Title
317
+ </h2>
318
+ <p class="chai-fs-14 chai-text-[#815c4d] chai-leading-[1.6] chai-m-0">
319
+ Card description with proper spacing and typography styling.
320
+ </p>
321
+ <button
322
+ class="chai-bg-[#4a362c] chai-text-[#fff] chai-p-12 chai-rounded-12 chai-fs-16 chai-weight-bold chai-bw-0">
323
+ Action Button
324
+ </button>
325
+ </div>
326
+ ```
327
+
328
+ **Resulting CSS:**
329
+
330
+ ```css
331
+ padding: 2rem; /* chai-p-32: 32 รท 16 */
332
+ borderradius: 1rem; /* chai-rounded-16: 16 รท 16 */
333
+ gap: 1rem; /* chai-gap-16: 16 รท 16 */
334
+ fontsize: 1.5rem; /* chai-fs-24: 24 รท 16 */
335
+ backgroundcolor: #4a362c; /* chai-bg-[#4a362c] */
336
+ ```
337
+
338
+ ### Example 2: Two-Column Layout
339
+
340
+ ```html
341
+ <div
342
+ class="chai-display-flex chai-flex-row chai-gap-32 chai-justify-center chai-items-start">
343
+ <div class="chai-w-350 chai-display-flex chai-flex-col chai-gap-16">
344
+ <!-- Left column: 350px (21.875rem) -->
345
+ </div>
346
+ <div class="chai-w-400 chai-display-flex chai-flex-col chai-gap-16">
347
+ <!-- Right column: 400px (25rem) -->
348
+ </div>
349
+ </div>
350
+ ```
351
+
352
+ **Resulting CSS:**
353
+
354
+ ```css
355
+ width: 21.875rem; /* chai-w-350: 350 รท 16 */
356
+ gap: 2rem; /* chai-gap-32: 32 รท 16 */
357
+ justifycontent: center;
358
+ ```
359
+
360
+ ### Example 3: Responsive Hero Section
361
+
362
+ ```html
363
+ <section
364
+ class="chai-bg-gradient chai-h-100vh chai-w-100p chai-display-flex chai-items-center chai-justify-center chai-flex-col chai-gap-24 chai-p-32">
365
+ <h1
366
+ class="chai-fs-48 chai-weight-bold chai-text-[#fff] chai-align-center chai-m-0">
367
+ Welcome to Chai Tailwind
368
+ </h1>
369
+ <p class="chai-fs-18 chai-text-[#f0f0f0] chai-align-center chai-max-w-600">
370
+ Lightweight utility-first CSS engine with 16px REM scaling
371
+ </p>
372
+ </section>
373
+ ```
374
+
375
+ **Value Conversions:**
376
+
377
+ - `chai-h-100vh` โ†’ `height: 100vh` (viewport unit)
378
+ - `chai-w-100p` โ†’ `width: 100%` (percentage with p suffix)
379
+ - `chai-gap-24` โ†’ `gap: 1.5rem` (24 รท 16)
380
+ - `chai-max-w-600` โ†’ `maxWidth: 37.5rem` (600 รท 16)
381
+
382
+ ---
383
+
384
+ ## ๐ŸŽฏ Value Formatting System
385
+
386
+ The Chai engine has smart value parsing that automatically converts values based on their format:
387
+
388
+ ### ๐Ÿ”ข **Numeric Values โ†’ REM Conversion**
389
+
390
+ Any numeric value in these properties gets converted from pixels to REM (base: 16px):
391
+
392
+ **Numeric-to-REM Properties:**
393
+
394
+ - Spacing: `p`, `m`, `pt`, `pb`, `pl`, `pr`, `px`, `py`, `mt`, `mb`, `ml`, `mr`, `my`, `mx`
395
+ - Sizing: `w`, `h`, `min-w`, `min-h`, `max-w`, `max-h`
396
+ - Typography: `fs` (fontSize)
397
+ - Border: `rounded` (borderRadius), `bw` (borderWidth)
398
+ - Flexbox: `gap`
399
+
400
+ **Conversion Formula:** `value รท 16 = rem`
401
+
402
+ Examples:
403
+
404
+ - `chai-p-16` โ†’ `padding: 1rem` (16 รท 16)
405
+ - `chai-fs-24` โ†’ `fontSize: 1.5rem` (24 รท 16)
406
+ - `chai-gap-32` โ†’ `gap: 2rem` (32 รท 16)
407
+ - `chai-w-100` โ†’ `width: 6.25rem` (100 รท 16)
408
+
409
+ ### ๐Ÿ“Š **Percentage Values (p suffix)**
410
+
411
+ Any value ending with `p` converts to a percentage:
412
+
413
+ Examples:
414
+
415
+ - `chai-w-50p` โ†’ `width: 50%`
416
+ - `chai-h-75p` โ†’ `height: 75%`
417
+ - `chai-rounded-50p` โ†’ `borderRadius: 50%`
418
+
419
+ ### ๐Ÿ“ฑ **Viewport Units (vh/vw)**
420
+
421
+ Viewport units pass through unchanged:
422
+
423
+ Examples:
424
+
425
+ - `chai-h-100vh` โ†’ `height: 100vh`
426
+ - `chai-w-50vw` โ†’ `width: 50vw`
427
+
428
+ ### ๐ŸŽจ **Hex Colors (brackets)**
429
+
430
+ Hex colors wrapped in brackets get brackets stripped:
431
+
432
+ Examples:
433
+
434
+ - `chai-bg-[#f5f1e9]` โ†’ `backgroundColor: #f5f1e9`
435
+ - `chai-text-[#4a362c]` โ†’ `color: #4a362c`
436
+ - `chai-bc-[#ccc]` โ†’ `borderColor: #ccc`
437
+
438
+ ### ๐Ÿท๏ธ **String Keywords**
439
+
440
+ String values pass through unchanged:
441
+
442
+ Examples:
443
+
444
+ - `chai-display-flex` โ†’ `display: flex`
445
+ - `chai-items-center` โ†’ `alignItems: center`
446
+ - `chai-justify-between` โ†’ `justifyContent: between`
447
+ - `chai-bs-solid` โ†’ `borderStyle: solid`
448
+
449
+ ### ๐Ÿ“ฆ **Custom Values (brackets)**
450
+
451
+ Any custom value in brackets passes through as-is:
452
+
453
+ Examples:
454
+
455
+ - `chai-min-w-[300px]` โ†’ `minWidth: 300px`
456
+ - `chai-p-[1.5em]` โ†’ `padding: 1.5em`
457
+ <!-- - `chai-top-[calc(100% - 20px)]` โ†’ `top: calc(100% - 20px)` -->
458
+
459
+ ---
460
+
461
+ ## ๐Ÿ“Š REM Scale Reference
462
+
463
+ **16px Base Scale** - All numeric values convert to REM:
464
+
465
+ | Value | REM | Actual | Example |
466
+ | ----- | ------- | ------ | ------------- |
467
+ | 4 | 0.25rem | 4px | `chai-gap-4` |
468
+ | 8 | 0.5rem | 8px | `chai-p-8` |
469
+ | 12 | 0.75rem | 12px | `chai-pl-12` |
470
+ | 16 | 1rem | 16px | `chai-fs-16` |
471
+ | 24 | 1.5rem | 24px | `chai-m-24` |
472
+ | 32 | 2rem | 32px | `chai-p-32` |
473
+ | 48 | 3rem | 48px | `chai-gap-48` |
474
+ | 64 | 4rem | 64px | `chai-p-64` |
475
+ | 80 | 5rem | 80px | `chai-w-80` |
476
+ | 96 | 6rem | 96px | `chai-h-96` |
477
+ | 100 | 6.25rem | 100px | `chai-w-100` |
478
+
479
+ ---
480
+
481
+ ## ๐ŸŽฏ Class Naming Convention
482
+
483
+ All utilities follow the pattern:
484
+
485
+ ```
486
+ chai-[property]-[value]
487
+ ```
488
+
489
+ Examples:
490
+
491
+ - `chai-p-24` โ†’ property: `p`, value: `24`
492
+ - `chai-text-[#4a362c]` โ†’ property: `text`, value: `[#4a362c]`
493
+ - `chai-display-flex` โ†’ property: `display`, value: `flex`
494
+ - `chai-w-100p` โ†’ property: `w`, value: `100p`
495
+
496
+ ---
497
+
498
+ ## โœจ Summary
499
+
500
+ ### ๐Ÿ“Š Statistics
501
+
502
+ - **Total Utilities**: 70+
503
+ - **Utility Categories**: 7
504
+ - **CSS Properties Mapped**: 40+
505
+ - **Base Scale**: 16px REM conversion
506
+ - **Value Types**: Numeric (REM), Percentage, Viewport, Hex Color, String Keyword, Custom
507
+
508
+ ### ๐ŸŽจ Categories
509
+
510
+ 1. **Typography** (12 utilities) - Text styling, colors, decoration
511
+ 2. **Sizing** (6 utilities) - Width, height, constraints
512
+ 3. **Layout** (12 utilities) - Display, positioning, overflow
513
+ 4. **Spacing** (14 utilities) - Padding and margin with directions
514
+ 5. **Background** (1 utility) - Background colors
515
+ 6. **Border** (4 utilities) - Width, color, style, radius
516
+ 7. **Flexbox** (11 utilities) - Direction, alignment, gap, flex sizing
517
+
518
+ ### ๐Ÿš€ Key Features
519
+
520
+ - โœ… **Automatic REM Scaling** - Numeric values auto-convert with 16px base
521
+ - โœ… **Smart Value Parsing** - Percentages (p suffix), viewport units (vh/vw), custom values (brackets)
522
+ - โœ… **Hex Color Support** - Direct bracket notation for colors: `[#4a362c]`
523
+ - โœ… **Responsive-First** - Built for fluid, accessible designs
524
+ - โœ… **Lightweight** - Minimal CSS footprint, utility-first approach
525
+ - โœ… **Accessibility** - Logical properties (start/end) support RTL/LTR
526
+
527
+ Perfect for rapid, utility-driven UI development! โ˜•
package/dist/chaitailwind.esm.js CHANGED
@@ -122,14 +122,33 @@ var e = {
122
122
  e.style[t] = i;
123
123
  });
124
124
  }
125
- }, y = { init() {
126
- document.querySelectorAll("[class*=\"chai-\"]").forEach((e) => {
127
- [...e.classList].filter((e) => e.startsWith("chai-")).forEach((t) => {
128
- let { propKey: n, propValue: r } = c(t);
129
- n && (v(e, n, r), e.classList.remove(t));
125
+ }, y = /* @__PURE__ */ new WeakSet(), b = null;
126
+ function x(e) {
127
+ function t(t) {
128
+ y.has(t) || (y.add(t), e(t));
129
+ }
130
+ document.querySelectorAll("[class*=\"chai-\"]").forEach(t), b = new MutationObserver((e) => {
131
+ for (let n of e) n.type === "attributes" && n.attributeName === "class" && t(n.target), n.type === "childList" && n.addedNodes.forEach((e) => {
132
+ e.nodeType === 1 && e.classList?.value.includes("chai-") && t(e);
130
133
  });
134
+ }), b.observe(document.body, {
135
+ childList: !0,
136
+ subtree: !0,
137
+ attributes: !0,
138
+ attributeFilter: ["class"]
139
+ });
140
+ }
141
+ //#endregion
142
+ //#region src/core/engine.js
143
+ function S(e) {
144
+ [...e.classList].filter((e) => e.startsWith("chai-")).forEach((t) => {
145
+ let { propKey: n, propValue: r } = c(t);
146
+ n && (v(e, n, r), e.classList.remove(t));
131
147
  });
132
- } }, b = y;
133
- typeof window < "u" && (document.readyState === "loading" ? window.addEventListener("DOMContentLoaded", () => y.init()) : y.init());
148
+ }
149
+ var C = { init() {
150
+ x(S);
151
+ } }, w = C;
152
+ typeof window < "u" && (document.readyState === "loading" ? window.addEventListener("DOMContentLoaded", () => C.init()) : C.init());
134
153
  //#endregion
135
- export { b as default };
154
+ export { w as default };
package/dist/chaitailwind.iife.js CHANGED
@@ -1 +1 @@
1
- var ChaiTailwind=(function(){var e={text:`color`,fs:`fontSize`,align:`textAlign`,weight:`fontWeight`,leading:`lineHeight`,tracking:`letterSpacing`,decoration:`textDecorationLine`,family:`fontFamily`,transform:`textTransform`,style:`fontStyle`},t={bg:`backgroundColor`},n={p:`padding`,pt:`paddingBlockStart`,pb:`paddingBlockEnd`,pl:`paddingInlineStart`,pr:`paddingInlineEnd`,px:`paddingInline`,py:`paddingBlock`,m:`margin`,mt:`marginBlockStart`,mb:`marginBlockEnd`,ml:`marginInlineStart`,mr:`marginInlineEnd`,mx:`marginInline`,my:`marginBlock`},r={bw:`borderWidth`,bc:`borderColor`,bs:`borderStyle`,bb:`borderBottom`,rounded:`borderRadius`,"border-collapse":`borderCollapse`},i={display:`display`,visibility:`visibility`,"box-sizing":`boxSizing`,pos:`position`,top:`top`,right:`right`,bottom:`bottom`,left:`left`,z:`zIndex`,overflow:`overflow`,"overflow-x":`overflowX`,"overflow-y":`overflowY`,object:`objectFit`,cursor:`cursor`,transition:`transition`},a={w:`width`,h:`height`,"min-w":`minWidth`,"min-h":`minHeight`,"max-w":`maxWidth`,"max-h":`maxHeight`},o={"flex-row":[`flexDirection`],"flex-col":[`flexDirection`],wrap:[`flexWrap`],justify:[`justifyContent`],items:[`alignItems`],self:[`alignSelf`],flex:[`flex`],grow:[`flexGrow`],shrink:[`flexShrink`],gap:[`gap`]},s={...i,...n,...a,...e,...t,...r,...o},c=e=>{let t=e.replace(`chai-`,``).split(`-`),n=`${t[0]}-${t[1]}`;return s[n]?{propKey:n,propValue:t.slice(2).join(`-`)||t[1]}:s[t[0]]?{propKey:t[0],propValue:t.slice(1).join(`-`)}:{propKey:null,propValue:null}},l=e=>typeof e==`string`?e.replace(/[\[\]]/g,``):e,u=(e,t=16)=>{let n=parseFloat(e);return isNaN(n)?e:`${n/t}rem`},d=e=>e.endsWith(`vh`)||e.endsWith(`vw`),f=e=>typeof e==`string`&&/^\d+p$/.test(e),p=e=>e.replace(/p$/,`%`),m=e=>e.startsWith(`#`)||e.startsWith(`[#`)&&e.endsWith(`]`),h=e=>typeof e==`string`&&e.startsWith(`[`)&&e.endsWith(`]`),g=e=>[`p`,`m`,`fs`,`rounded`,`gap`,`w`,`h`,`min-w`,`min-h`,`max-w`,`max-h`,`pt`,`pb`,`pl`,`pr`,`px`,`py`,`mt`,`mb`,`ml`,`mr`,`mx`,`my`,`bw`].includes(e),_=(e,t)=>e?m(e)?l(e):f(e)?p(e):d(e)?e:t===`flex-row`?e===`reverse`?`row-reverse`:`row`:t===`flex-col`?(e===`column`||e===`col`||e===`reverse`)&&e===`reverse`?`column-reverse`:`column`:!isNaN(e)&&g(t)?u(e):h(e)?l(e):e:``,v=(e,t,n)=>{let r=s[t];if(r){let i=_(n,t);(Array.isArray(r)?r:[r]).forEach(t=>{e.style[t]=i})}},y={init(){document.querySelectorAll(`[class*="chai-"]`).forEach(e=>{[...e.classList].filter(e=>e.startsWith(`chai-`)).forEach(t=>{let{propKey:n,propValue:r}=c(t);n&&(v(e,n,r),e.classList.remove(t))})})}},b=y;return typeof window<`u`&&(document.readyState===`loading`?window.addEventListener(`DOMContentLoaded`,()=>y.init()):y.init()),b})();
1
+ var ChaiTailwind=(function(){var e={text:`color`,fs:`fontSize`,align:`textAlign`,weight:`fontWeight`,leading:`lineHeight`,tracking:`letterSpacing`,decoration:`textDecorationLine`,family:`fontFamily`,transform:`textTransform`,style:`fontStyle`},t={bg:`backgroundColor`},n={p:`padding`,pt:`paddingBlockStart`,pb:`paddingBlockEnd`,pl:`paddingInlineStart`,pr:`paddingInlineEnd`,px:`paddingInline`,py:`paddingBlock`,m:`margin`,mt:`marginBlockStart`,mb:`marginBlockEnd`,ml:`marginInlineStart`,mr:`marginInlineEnd`,mx:`marginInline`,my:`marginBlock`},r={bw:`borderWidth`,bc:`borderColor`,bs:`borderStyle`,bb:`borderBottom`,rounded:`borderRadius`,"border-collapse":`borderCollapse`},i={display:`display`,visibility:`visibility`,"box-sizing":`boxSizing`,pos:`position`,top:`top`,right:`right`,bottom:`bottom`,left:`left`,z:`zIndex`,overflow:`overflow`,"overflow-x":`overflowX`,"overflow-y":`overflowY`,object:`objectFit`,cursor:`cursor`,transition:`transition`},a={w:`width`,h:`height`,"min-w":`minWidth`,"min-h":`minHeight`,"max-w":`maxWidth`,"max-h":`maxHeight`},o={"flex-row":[`flexDirection`],"flex-col":[`flexDirection`],wrap:[`flexWrap`],justify:[`justifyContent`],items:[`alignItems`],self:[`alignSelf`],flex:[`flex`],grow:[`flexGrow`],shrink:[`flexShrink`],gap:[`gap`]},s={...i,...n,...a,...e,...t,...r,...o},c=e=>{let t=e.replace(`chai-`,``).split(`-`),n=`${t[0]}-${t[1]}`;return s[n]?{propKey:n,propValue:t.slice(2).join(`-`)||t[1]}:s[t[0]]?{propKey:t[0],propValue:t.slice(1).join(`-`)}:{propKey:null,propValue:null}},l=e=>typeof e==`string`?e.replace(/[\[\]]/g,``):e,u=(e,t=16)=>{let n=parseFloat(e);return isNaN(n)?e:`${n/t}rem`},d=e=>e.endsWith(`vh`)||e.endsWith(`vw`),f=e=>typeof e==`string`&&/^\d+p$/.test(e),p=e=>e.replace(/p$/,`%`),m=e=>e.startsWith(`#`)||e.startsWith(`[#`)&&e.endsWith(`]`),h=e=>typeof e==`string`&&e.startsWith(`[`)&&e.endsWith(`]`),g=e=>[`p`,`m`,`fs`,`rounded`,`gap`,`w`,`h`,`min-w`,`min-h`,`max-w`,`max-h`,`pt`,`pb`,`pl`,`pr`,`px`,`py`,`mt`,`mb`,`ml`,`mr`,`mx`,`my`,`bw`].includes(e),_=(e,t)=>e?m(e)?l(e):f(e)?p(e):d(e)?e:t===`flex-row`?e===`reverse`?`row-reverse`:`row`:t===`flex-col`?(e===`column`||e===`col`||e===`reverse`)&&e===`reverse`?`column-reverse`:`column`:!isNaN(e)&&g(t)?u(e):h(e)?l(e):e:``,v=(e,t,n)=>{let r=s[t];if(r){let i=_(n,t);(Array.isArray(r)?r:[r]).forEach(t=>{e.style[t]=i})}},y=new WeakSet,b=null;function x(e){function t(t){y.has(t)||(y.add(t),e(t))}document.querySelectorAll(`[class*="chai-"]`).forEach(t),b=new MutationObserver(e=>{for(let n of e)n.type===`attributes`&&n.attributeName===`class`&&t(n.target),n.type===`childList`&&n.addedNodes.forEach(e=>{e.nodeType===1&&e.classList?.value.includes(`chai-`)&&t(e)})}),b.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[`class`]})}function S(e){[...e.classList].filter(e=>e.startsWith(`chai-`)).forEach(t=>{let{propKey:n,propValue:r}=c(t);n&&(v(e,n,r),e.classList.remove(t))})}var C={init(){x(S)}},w=C;return typeof window<`u`&&(document.readyState===`loading`?window.addEventListener(`DOMContentLoaded`,()=>C.init()):C.init()),w})();
package/dist/favicon.svg ADDED
@@ -0,0 +1,28 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
2
+ <defs>
3
+ <linearGradient id="chaiGradient" x1="0%" y1="0%" x2="100%" y2="100%">
4
+ <stop offset="0%" stop-color="#8b5cf6"/>
5
+ <stop offset="50%" stop-color="#ec4899"/>
6
+ <stop offset="100%" stop-color="#22c55e"/>
7
+ </linearGradient>
8
+ </defs>
9
+
10
+ <!-- Background -->
11
+ <rect width="100" height="100" rx="20" fill="#0a0a0a"/>
12
+
13
+ <!-- C Shape -->
14
+ <path
15
+ d="M70 30
16
+ A25 25 0 1 0 70 70"
17
+ fill="none"
18
+ stroke="url(#chaiGradient)"
19
+ stroke-width="12"
20
+ stroke-linecap="round"
21
+ />
22
+
23
+ <!-- Sparkle -->
24
+ <polygon
25
+ points="75,20 78,28 86,30 78,32 75,40 72,32 64,30 72,28"
26
+ fill="#ffffff"
27
+ />
28
+ </svg>
package/package.json CHANGED
@@ -1,40 +1,40 @@
1
- {
2
- "name": "@brewcodex/chai-css",
3
- "version": "1.0.4",
4
- "description": "A lightweight utility-first CSS engine with shorthand class names and 16px base scale",
5
- "type": "module",
6
- "main": "./dist/chaitailwind.esm.js",
7
- "module": "./dist/chaitailwind.esm.js",
8
- "exports": {
9
- ".": {
10
- "import": "./dist/chaitailwind.esm.js",
11
- "default": "./dist/chaitailwind.iife.js"
12
- }
13
- },
14
- "unpkg": "./dist/chaitailwind.iife.js",
15
- "jsdelivr": "./dist/chaitailwind.iife.js",
16
- "browser": "./dist/chaitailwind.iife.js",
17
- "files": [
18
- "dist"
19
- ],
20
- "scripts": {
21
- "dev": "vite",
22
- "build": "vite build && vite build --config vite.docs.config.js",
23
- "preview": "vite preview",
24
- "prepublishOnly": "npm run build"
25
- },
26
- "keywords": [
27
- "css",
28
- "utility-first",
29
- "tailwind-alternative",
30
- "css-engine",
31
- "atomic-css",
32
- "frontend",
33
- "brewcodex",
34
- "chai-css"
35
- ],
36
- "license": "MIT",
37
- "devDependencies": {
38
- "vite": "^8.0.1"
39
- }
40
- }
1
+ {
2
+ "name": "@brewcodex/chai-css",
3
+ "version": "1.1.4",
4
+ "description": "A lightweight utility-first CSS engine with shorthand class names and 16px base scale",
5
+ "type": "module",
6
+ "main": "./dist/chaitailwind.esm.js",
7
+ "module": "./dist/chaitailwind.esm.js",
8
+ "exports": {
9
+ ".": {
10
+ "import": "./dist/chaitailwind.esm.js",
11
+ "default": "./dist/chaitailwind.iife.js"
12
+ }
13
+ },
14
+ "unpkg": "./dist/chaitailwind.iife.js",
15
+ "jsdelivr": "./dist/chaitailwind.iife.js",
16
+ "browser": "./dist/chaitailwind.iife.js",
17
+ "files": [
18
+ "dist"
19
+ ],
20
+ "scripts": {
21
+ "dev": "vite",
22
+ "build": "vite build && vite build --config vite.docs.config.js",
23
+ "preview": "vite preview",
24
+ "prepublishOnly": "npm run build"
25
+ },
26
+ "keywords": [
27
+ "css",
28
+ "utility-first",
29
+ "tailwind-alternative",
30
+ "css-engine",
31
+ "atomic-css",
32
+ "frontend",
33
+ "brewcodex",
34
+ "chai-css"
35
+ ],
36
+ "license": "MIT",
37
+ "devDependencies": {
38
+ "vite": "^8.0.1"
39
+ }
40
+ }