chaitail 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.
Files changed (4) hide show
  1. package/README.md +136 -0
  2. package/demo/index.html +7 -4
  3. package/package.json +6 -2
  4. package/src/applyClass.js +8 -2
package/README.md ADDED
@@ -0,0 +1,136 @@
1
+ # ☕ ChaiTail
2
+
3
+ A lightweight utility-first CSS engine built with JavaScript.
4
+
5
+ ChaiTail allows you to style your HTML using simple class names like Tailwind — but instead of precompiled CSS, it dynamically converts classes into inline styles at runtime.
6
+
7
+ ---
8
+
9
+ ## Features
10
+
11
+ * Utility-first styling (`chai-p-20`, `chai-bg-red`)
12
+ * Dynamic class parsing (no need to predefine all classes)
13
+ * Lightweight and fast
14
+ * Works as an npm package
15
+ * Built using plain JavaScript (no frameworks)
16
+
17
+ ---
18
+
19
+ ## Installation
20
+
21
+ ```bash
22
+ npm install chaitail
23
+ ```
24
+
25
+ ---
26
+
27
+ ## Usage
28
+
29
+ ### 1. Import in your project
30
+
31
+ ```js
32
+ import { initChai } from "chaitail";
33
+
34
+ initChai();
35
+ ```
36
+
37
+ ---
38
+
39
+ ### 2. Use classes in HTML
40
+
41
+ ```html
42
+ <div class="chai-p-20 chai-bg-blue chai-text-white chai-flex chai-justify-center">
43
+ Hello ChaiTail!
44
+ </div>
45
+ ```
46
+
47
+ ---
48
+
49
+ ## How it Works
50
+
51
+ * Scans the DOM for class names
52
+ * Detects classes starting with `chai-`
53
+ * Parses the class name
54
+ * Converts it into inline CSS styles
55
+ * Applies styles dynamically
56
+
57
+ ---
58
+
59
+ ## Supported Utilities
60
+
61
+ ### Spacing
62
+
63
+ * `chai-p-20` → `padding: 20px`
64
+ * `chai-m-10` → `margin: 10px`
65
+
66
+ ### Colors
67
+
68
+ * `chai-bg-red` → `background-color: red`
69
+ * `chai-text-white` → `color: white`
70
+
71
+ ### Layout
72
+
73
+ * `chai-flex` → `display: flex`
74
+ * `chai-justify-center` → `justify-content: center`
75
+ * `chai-items-center` → `align-items: center`
76
+
77
+ ### Typography
78
+
79
+ * `chai-text-center` → `text-align: center`
80
+
81
+ ### Borders
82
+
83
+ * `chai-rounded-10` → `border-radius: 10px`
84
+
85
+ ---
86
+
87
+ ## Notes
88
+
89
+ * Works best with modern browsers (ES Modules support required)
90
+ * For best results, use with bundlers like Vite or Webpack
91
+ * In plain HTML, use relative imports
92
+
93
+ ---
94
+
95
+ ## Example
96
+
97
+ ```html
98
+ <div class="chai-p-30 chai-bg-black chai-text-white chai-flex chai-center">
99
+ Welcome to ChaiTail ☕
100
+ </div>
101
+ ```
102
+
103
+ ---
104
+
105
+ ## Project Structure
106
+
107
+ ```
108
+ chaitail/
109
+ ├── src/
110
+ │ ├── index.js
111
+ │ ├── applyClass.js
112
+ │ └── ChaiCSS.js
113
+ ├── demo/
114
+ └── package.json
115
+ ```
116
+
117
+ ---
118
+
119
+ ## Future Improvements
120
+
121
+ * Support for `px`, `py`, `mx`, `my`
122
+ * Custom color palette
123
+ * Responsive utilities
124
+ * CDN support
125
+
126
+ ---
127
+
128
+ ## Author
129
+
130
+ **Vishal Patil**
131
+
132
+ ---
133
+
134
+ ## Support
135
+
136
+ If you like this project, give it a ⭐ on GitHub!
package/demo/index.html CHANGED
@@ -5,11 +5,14 @@
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
  <title>ChaiTail</title>
7
7
  </head>
8
- <body class="chai-bg-black">
9
- <div class="chai-p-20 chai-bg-red chai-text-white chai-rounded-10">
10
- <h1 class="chai-bg-blue chai-p-10 chai-text-yellow">Welcome To ChaiTail</h1>
11
- <p class="chai-text-red">Try it</p>
8
+ <body>
9
+ <div
10
+ class="chai-p-20 chai-bg-blue chai-text-white chai-flex chai-justify-center"
11
+ style="background-color: blue;"
12
+ >
13
+ Hello ChaiTail
12
14
  </div>
15
+
13
16
  <script type="module" src="./script.js"></script>
14
17
  </body>
15
18
  </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "chaitail",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "description": "A lightweight utility first CSS framework",
5
5
  "main": "src/index.js",
6
6
  "scripts": {
@@ -13,5 +13,9 @@
13
13
  ],
14
14
  "author": "Vishal Patil",
15
15
  "license": "MIT",
16
- "type": "module"
16
+ "type": "module",
17
+ "repository": {
18
+ "type": "git",
19
+ "url": "https://github.com/CodeX047/ChaiTail.git"
20
+ }
17
21
  }
package/src/applyClass.js CHANGED
@@ -6,7 +6,7 @@ function parseChaiClass(cls) {
6
6
  if (parts[0] !== "chai") return null;
7
7
 
8
8
  const type = parts[1];
9
- const value = parts[2];
9
+ const value = parts.slice(2).join("-");
10
10
 
11
11
  switch (type) {
12
12
  case "p":
@@ -25,6 +25,12 @@ function parseChaiClass(cls) {
25
25
  case "flex":
26
26
  return { display: "flex" };
27
27
 
28
+ case "justify":
29
+ return { justifyContent: value };
30
+
31
+ case "items":
32
+ return { alignItems: value };
33
+
28
34
  case "rounded":
29
35
  return { borderRadius: value + "px" };
30
36
 
@@ -34,7 +40,7 @@ function parseChaiClass(cls) {
34
40
  }
35
41
 
36
42
  export function applyClasses(element) {
37
- element.classList.forEach((cls) => {
43
+ [...element.classList].forEach((cls) => {
38
44
  let style = ChaiCSS[cls];
39
45
 
40
46
  if (!style) {