chi-css-engine 1.0.2 → 1.0.3
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 +14 -24
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,26 +1,24 @@
|
|
|
1
1
|
☕ Chai CSS Engine
|
|
2
2
|
|
|
3
3
|
A lightweight utility-first CSS engine built with vanilla JavaScript.
|
|
4
|
-
|
|
4
|
+
Chai CSS dynamically scans the DOM, parses chai-\* utility classes, and applies corresponding inline styles at runtime — inspired by utility-first CSS frameworks.
|
|
5
5
|
|
|
6
6
|
🚀 Features
|
|
7
|
-
No CSS files required
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
Easy to extend and customize
|
|
7
|
+
❌ No CSS files required
|
|
8
|
+
❌ No build step
|
|
9
|
+
❌ No dependencies
|
|
10
|
+
✅ Pure JavaScript
|
|
11
|
+
✅ Utility-first class syntax
|
|
12
|
+
✅ Automatic DOM scanning
|
|
13
|
+
✅ Works with npm and CDN
|
|
14
|
+
✅ Easy to extend and customize
|
|
15
15
|
📦 Installation (npm)
|
|
16
|
-
|
|
17
16
|
npm install chi-css-engine
|
|
18
17
|
🔧 Usage (npm / Vite / Bundlers)
|
|
19
18
|
1️⃣ Import the package
|
|
20
|
-
|
|
21
19
|
import "chi-css-engine";
|
|
22
20
|
|
|
23
|
-
⚠️ No function call
|
|
21
|
+
⚠️ No function call required.
|
|
24
22
|
The engine runs automatically after DOMContentLoaded.
|
|
25
23
|
|
|
26
24
|
2️⃣ Use utility classes in HTML
|
|
@@ -30,7 +28,7 @@ The engine runs automatically after DOMContentLoaded.
|
|
|
30
28
|
</div>
|
|
31
29
|
🌐 Usage via CDN (No Build Tools)
|
|
32
30
|
|
|
33
|
-
If you are not using npm or
|
|
31
|
+
If you are not using npm or a bundler, include the CDN directly:
|
|
34
32
|
|
|
35
33
|
<script src="https://unpkg.com/chi-css-engine@latest"></script>
|
|
36
34
|
|
|
@@ -58,12 +56,10 @@ Full CDN Example
|
|
|
58
56
|
🧠 How It Works
|
|
59
57
|
Waits for DOMContentLoaded
|
|
60
58
|
Traverses all DOM elements
|
|
61
|
-
|
|
59
|
+
Detects class names starting with chai-
|
|
62
60
|
Parses utility patterns
|
|
63
61
|
Applies inline styles dynamically
|
|
64
|
-
|
|
65
62
|
📐 Supported Utilities
|
|
66
|
-
|
|
67
63
|
🧱 Spacing
|
|
68
64
|
Class Effect
|
|
69
65
|
chai-p-0 padding: 0px
|
|
@@ -72,7 +68,6 @@ chai-p-2 padding: 8px
|
|
|
72
68
|
chai-p-3 padding: 12px
|
|
73
69
|
chai-p-4 padding: 16px
|
|
74
70
|
chai-m-2 margin: 8px
|
|
75
|
-
|
|
76
71
|
🎨 Colors
|
|
77
72
|
Class Effect
|
|
78
73
|
chai-bg-red background-color: red
|
|
@@ -93,25 +88,21 @@ chai-text-sm 12px
|
|
|
93
88
|
chai-text-md 16px
|
|
94
89
|
chai-text-lg 18px
|
|
95
90
|
chai-text-xl 24px
|
|
96
|
-
|
|
97
91
|
🧩 Borders
|
|
98
92
|
Class Effect
|
|
99
93
|
chai-border-1 1px solid black
|
|
100
94
|
chai-border-2 2px solid black
|
|
101
|
-
|
|
102
95
|
🔵 Border Radius
|
|
103
96
|
Class Radius
|
|
104
97
|
chai-rounded-sm 4px
|
|
105
98
|
chai-rounded-md 6px
|
|
106
99
|
chai-rounded-lg 12px
|
|
107
100
|
chai-rounded-10 10px
|
|
108
|
-
|
|
109
101
|
📦 Layout Utilities
|
|
110
102
|
Class Effect
|
|
111
103
|
chai-flex display: flex
|
|
112
104
|
chai-items-center align-items: center
|
|
113
105
|
chai-justify-center justify-content: center
|
|
114
|
-
|
|
115
106
|
🧪 Example Layout
|
|
116
107
|
|
|
117
108
|
<div class="chai-flex chai-justify-center chai-items-center chai-p-4 chai-bg-gray">
|
|
@@ -119,16 +110,15 @@ chai-justify-center justify-content: center
|
|
|
119
110
|
Centered Content
|
|
120
111
|
</p>
|
|
121
112
|
</div>
|
|
122
|
-
|
|
123
113
|
🛠 Customization
|
|
124
114
|
|
|
125
|
-
You can extend
|
|
115
|
+
You can extend Chai CSS by modifying:
|
|
126
116
|
|
|
127
117
|
spacingScale
|
|
128
118
|
fontSizeMap
|
|
129
119
|
radiusMap
|
|
130
120
|
|
|
131
|
-
Add new rules inside the applyUtility() switch to support
|
|
121
|
+
Add new rules inside the applyUtility() switch to support additional utilities.
|
|
132
122
|
|
|
133
123
|
⚠️ Limitations
|
|
134
124
|
Uses inline styles (overrides external CSS)
|