chi-css-engine 1.0.0 → 1.0.2
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 +136 -9
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -1,16 +1,143 @@
|
|
|
1
|
-
|
|
1
|
+
☕ Chai CSS Engine
|
|
2
2
|
|
|
3
|
-
A lightweight utility-first CSS engine
|
|
3
|
+
A lightweight utility-first CSS engine built with vanilla JavaScript.
|
|
4
|
+
It dynamically scans the DOM, parses chai-\* utility classes, and applies corresponding inline styles at runtime — inspired by utility-first CSS frameworks.
|
|
4
5
|
|
|
5
|
-
|
|
6
|
+
🚀 Features
|
|
7
|
+
No CSS files required
|
|
8
|
+
Pure JavaScript (no dependencies)
|
|
9
|
+
Utility-first class syntax
|
|
10
|
+
Automatic DOM scanning
|
|
6
11
|
|
|
7
|
-
|
|
12
|
+
Works via CDN or npm
|
|
8
13
|
|
|
9
|
-
|
|
14
|
+
Easy to extend and customize
|
|
15
|
+
📦 Installation (npm)
|
|
10
16
|
|
|
11
|
-
|
|
12
|
-
|
|
17
|
+
npm install chi-css-engine
|
|
18
|
+
🔧 Usage (npm / Vite / Bundlers)
|
|
19
|
+
1️⃣ Import the package
|
|
13
20
|
|
|
14
|
-
|
|
21
|
+
import "chi-css-engine";
|
|
15
22
|
|
|
16
|
-
|
|
23
|
+
⚠️ No function call is required.
|
|
24
|
+
The engine runs automatically after DOMContentLoaded.
|
|
25
|
+
|
|
26
|
+
2️⃣ Use utility classes in HTML
|
|
27
|
+
|
|
28
|
+
<div class="chai-p-3 chai-bg-blue chai-text-center chai-rounded-md">
|
|
29
|
+
Hello Chai CSS ☕
|
|
30
|
+
</div>
|
|
31
|
+
🌐 Usage via CDN (No Build Tools)
|
|
32
|
+
|
|
33
|
+
If you are not using npm or Vite, use the CDN directly:
|
|
34
|
+
|
|
35
|
+
<script src="https://unpkg.com/chi-css-engine@latest"></script>
|
|
36
|
+
|
|
37
|
+
Full CDN Example
|
|
38
|
+
|
|
39
|
+
<!DOCTYPE html>
|
|
40
|
+
<html>
|
|
41
|
+
<head>
|
|
42
|
+
<title>Chai CSS CDN Demo</title>
|
|
43
|
+
</head>
|
|
44
|
+
<body>
|
|
45
|
+
|
|
46
|
+
<div class="chai-p-3 chai-bg-blue chai-text-center chai-rounded-md">
|
|
47
|
+
Hello Chai CSS ☕
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<script src="https://unpkg.com/chi-css-engine@latest"></script>
|
|
51
|
+
</body>
|
|
52
|
+
</html>
|
|
53
|
+
|
|
54
|
+
✅ No Node.js
|
|
55
|
+
✅ No npm
|
|
56
|
+
✅ No bundler
|
|
57
|
+
|
|
58
|
+
🧠 How It Works
|
|
59
|
+
Waits for DOMContentLoaded
|
|
60
|
+
Traverses all DOM elements
|
|
61
|
+
Finds class names starting with chai-
|
|
62
|
+
Parses utility patterns
|
|
63
|
+
Applies inline styles dynamically
|
|
64
|
+
|
|
65
|
+
📐 Supported Utilities
|
|
66
|
+
|
|
67
|
+
🧱 Spacing
|
|
68
|
+
Class Effect
|
|
69
|
+
chai-p-0 padding: 0px
|
|
70
|
+
chai-p-1 padding: 4px
|
|
71
|
+
chai-p-2 padding: 8px
|
|
72
|
+
chai-p-3 padding: 12px
|
|
73
|
+
chai-p-4 padding: 16px
|
|
74
|
+
chai-m-2 margin: 8px
|
|
75
|
+
|
|
76
|
+
🎨 Colors
|
|
77
|
+
Class Effect
|
|
78
|
+
chai-bg-red background-color: red
|
|
79
|
+
chai-bg-blue background-color: blue
|
|
80
|
+
chai-text-black color: black
|
|
81
|
+
|
|
82
|
+
✔ Any valid CSS color value is supported.
|
|
83
|
+
|
|
84
|
+
✍ Typography
|
|
85
|
+
Text Alignment
|
|
86
|
+
Class Effect
|
|
87
|
+
chai-text-center text-align: center
|
|
88
|
+
chai-text-left text-align: left
|
|
89
|
+
chai-text-right text-align: right
|
|
90
|
+
Font Size
|
|
91
|
+
Class Font Size
|
|
92
|
+
chai-text-sm 12px
|
|
93
|
+
chai-text-md 16px
|
|
94
|
+
chai-text-lg 18px
|
|
95
|
+
chai-text-xl 24px
|
|
96
|
+
|
|
97
|
+
🧩 Borders
|
|
98
|
+
Class Effect
|
|
99
|
+
chai-border-1 1px solid black
|
|
100
|
+
chai-border-2 2px solid black
|
|
101
|
+
|
|
102
|
+
🔵 Border Radius
|
|
103
|
+
Class Radius
|
|
104
|
+
chai-rounded-sm 4px
|
|
105
|
+
chai-rounded-md 6px
|
|
106
|
+
chai-rounded-lg 12px
|
|
107
|
+
chai-rounded-10 10px
|
|
108
|
+
|
|
109
|
+
📦 Layout Utilities
|
|
110
|
+
Class Effect
|
|
111
|
+
chai-flex display: flex
|
|
112
|
+
chai-items-center align-items: center
|
|
113
|
+
chai-justify-center justify-content: center
|
|
114
|
+
|
|
115
|
+
🧪 Example Layout
|
|
116
|
+
|
|
117
|
+
<div class="chai-flex chai-justify-center chai-items-center chai-p-4 chai-bg-gray">
|
|
118
|
+
<p class="chai-text-lg chai-text-center">
|
|
119
|
+
Centered Content
|
|
120
|
+
</p>
|
|
121
|
+
</div>
|
|
122
|
+
|
|
123
|
+
🛠 Customization
|
|
124
|
+
|
|
125
|
+
You can extend utilities by modifying:
|
|
126
|
+
|
|
127
|
+
spacingScale
|
|
128
|
+
fontSizeMap
|
|
129
|
+
radiusMap
|
|
130
|
+
|
|
131
|
+
Add new rules inside the applyUtility() switch to support more utilities.
|
|
132
|
+
|
|
133
|
+
⚠️ Limitations
|
|
134
|
+
Uses inline styles (overrides external CSS)
|
|
135
|
+
No responsive utilities (yet)
|
|
136
|
+
No hover / pseudo-class support (yet)
|
|
137
|
+
📄 License
|
|
138
|
+
|
|
139
|
+
MIT License © 2026
|
|
140
|
+
|
|
141
|
+
⭐ Author
|
|
142
|
+
|
|
143
|
+
Built with ☕ by Nitesh Shedge
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "chi-css-engine",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "Lightweight utility-first CSS engine",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"\"css\"",
|
|
@@ -22,5 +22,6 @@
|
|
|
22
22
|
"main": "index.js",
|
|
23
23
|
"scripts": {
|
|
24
24
|
"test": "echo \"Error: no test specified\" && exit 1"
|
|
25
|
-
}
|
|
25
|
+
},
|
|
26
|
+
"dependencies": {}
|
|
26
27
|
}
|