kulhadcss 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/demo/index.html +17 -0
- package/package.json +8 -3
- package/readme.md +71 -0
package/demo/index.html
CHANGED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<title>KulhadCSS Test</title>
|
|
6
|
+
<script type="module">
|
|
7
|
+
import { scanDom } from 'https://cdn.jsdelivr.net/npm/kulhadcss/src/index.js';
|
|
8
|
+
</script>
|
|
9
|
+
</head>
|
|
10
|
+
<body style="background: #fdf5e6; ">
|
|
11
|
+
|
|
12
|
+
<div class="milkar beech malai-10 ghumaav-5" style="background: #8b4513; color: white;"">
|
|
13
|
+
<h1 class="doori-2">🏺 KulhadCSS is Live!</h1>
|
|
14
|
+
</div>
|
|
15
|
+
|
|
16
|
+
</body>
|
|
17
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,13 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "kulhadcss",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "A Kadak utility-first CSS engine brewed with Vanilla JS.",
|
|
5
5
|
"main": "src/index.js",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"scripts": {
|
|
8
8
|
"test": "echo \"Error: no test specified\" && exit 1"
|
|
9
9
|
},
|
|
10
|
-
"keywords": [
|
|
10
|
+
"keywords": [
|
|
11
|
+
"css",
|
|
12
|
+
"utility",
|
|
13
|
+
"desi",
|
|
14
|
+
"kulhad"
|
|
15
|
+
],
|
|
11
16
|
"author": "Rachit",
|
|
12
17
|
"license": "ISC"
|
|
13
|
-
}
|
|
18
|
+
}
|
package/readme.md
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
# 🏺 KulhadCSS
|
|
2
|
+
|
|
3
|
+
A **Kadak** utility-first CSS engine brewed with pure Vanilla JS.
|
|
4
|
+
|
|
5
|
+
Apply layout, spacing, and styling beautifully using intuitive Indian terminology! KulhadCSS traverses your DOM, parsing classnames like `malai-10` and `ghumaav-5` and rendering them instantly—without any CSS file or preprocessors.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
**Via NPM:**
|
|
10
|
+
```bash
|
|
11
|
+
npm install kulhadcss
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
**Via CDN (JSDelivr) in browser:**
|
|
15
|
+
```html
|
|
16
|
+
<script type="module">
|
|
17
|
+
import { scanDom } from 'https://cdn.jsdelivr.net/npm/kulhadcss/src/index.js';
|
|
18
|
+
</script>
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## How It Works
|
|
22
|
+
|
|
23
|
+
KulhadCSS runs naturally in the browser without any bundler overhead:
|
|
24
|
+
1. **Parser:** Deconstructs unique class names (e.g., `malai-10` into `padding: 40px`).
|
|
25
|
+
2. **Applier:** Scans through the DOM elements and applies the generated inline styles to the `style` object directly.
|
|
26
|
+
3. **Auto-Initialization:** It automatically listens to the `DOMContentLoaded` event, so all your styled elements are beautifully rendered once HTML is loaded.
|
|
27
|
+
|
|
28
|
+
## The Desi Dictionary
|
|
29
|
+
|
|
30
|
+
All dynamic utilities in KulhadCSS follow a strict 4-pixel base scale:
|
|
31
|
+
> **1 unit = 4px**
|
|
32
|
+
|
|
33
|
+
### Layout Utilities (Static)
|
|
34
|
+
|
|
35
|
+
| Class Name | CSS Property | Description |
|
|
36
|
+
|---|---|---|
|
|
37
|
+
| `milkar` | `display: flex;` | Initializes a flex container |
|
|
38
|
+
| `beech` | `display: flex; justify-content: center; align-items: center;` | Perfectly centers the content |
|
|
39
|
+
|
|
40
|
+
### Spacing & Visual Utilities (Dynamic)
|
|
41
|
+
|
|
42
|
+
| Class Prefix | CSS Property | Example | Calculation |
|
|
43
|
+
|---|---|---|---|
|
|
44
|
+
| `malai-{n}` | `padding` | `malai-4` | 4 × 4 = **16px** |
|
|
45
|
+
| `doori-{n}` | `margin` | `doori-8` | 8 × 4 = **32px** |
|
|
46
|
+
| `ghumaav-{n}` | `border-radius` | `ghumaav-5` | 5 × 4 = **20px** |
|
|
47
|
+
|
|
48
|
+
## Example Usage
|
|
49
|
+
|
|
50
|
+
Here is a quick example showcasing how you can build UIs with KulhadCSS!
|
|
51
|
+
|
|
52
|
+
```html
|
|
53
|
+
<!DOCTYPE html>
|
|
54
|
+
<html lang="en">
|
|
55
|
+
<head>
|
|
56
|
+
<meta charset="UTF-8">
|
|
57
|
+
<title>KulhadCSS Demo</title>
|
|
58
|
+
<script type="module">
|
|
59
|
+
import { scanDom } from 'https://cdn.jsdelivr.net/npm/kulhadcss/src/index.js';
|
|
60
|
+
</script>
|
|
61
|
+
</head>
|
|
62
|
+
<body style="background: #fdf5e6; margin: 0; min-height: 100vh;" class="beech">
|
|
63
|
+
<div class="milkar beech malai-10 ghumaav-5" style="background: #8b4513; color: white;">
|
|
64
|
+
<h1 class="doori-2">🏺 KulhadCSS is Live!</h1>
|
|
65
|
+
</div>
|
|
66
|
+
</body>
|
|
67
|
+
</html>
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
## License
|
|
71
|
+
[ISC](https://opensource.org/licenses/ISC) © Rachit
|