chaitail 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 +136 -0
- package/package.json +6 -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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "chaitail",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
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
|
}
|