kulhadcss 1.0.1 → 1.0.3

package/README.md

@@ -0,0 +1,159 @@
+# 🏺 KulhadCSS
+
+A **Kadak** utility-first CSS engine brewed with pure Vanilla JS.
+
+Apply layout, spacing, and styling beautifully using intuitive Indian terminology (Desi CSS)! KulhadCSS traverses your DOM, parsing classnames like `ghera-10` and `ghumaav-5` and rendering them instantly—without any CSS file or preprocessors.
+
+## Installation
+
+**Via NPM:**
+```bash
+npm install kulhadcss
+```
+
+**Via CDN (JSDelivr) in browser:**
+```html
+<script type="module">
+  import { scanDom } from 'https://cdn.jsdelivr.net/npm/kulhadcss/src/index.js';
+</script>
+```
+
+## How It Works
+
+KulhadCSS runs naturally in the browser without any bundler overhead:
+1. **Parser:** Deconstructs unique class names (e.g., `ghera-10` into `padding: 40px`).
+2. **Applier:** Scans through the DOM elements and applies the generated inline styles to the `style` object directly.
+3. **Auto-Initialization:** It automatically listens to the `DOMContentLoaded` event, so all your styled elements are beautifully rendered once HTML is loaded.
+
+---
+
+## The Desi Dictionary
+
+All dynamic utilities in KulhadCSS follow a strict 4-pixel base scale:
+> **1 unit = 4px**
+
+### Layout & Display Utilities (Static)
+
+| Class Name | Equivalent CSS | Description |
+|---|---|---|
+| `milkar` | `display: flex;` | Initializes a flex container |
+| `jaali-hai` | `display: grid;` | Initializes a grid container |
+| `beech` | `display: flex; justify-content: center; align-items: center;` | Perfectly centers the content |
+| `gayab` | `display: none;` | Hides the element |
+| `block` | `display: block;` | Block level element |
+| `inline` | `display: inline;` | Inline element |
+| `poora-parda` | `width: 100vw; height: 100vh;` | Takes the full viewport |
+| `chipka-hua` | `position: sticky; top: 0;` | Sticky header |
+| `shish-mahal` | `backdrop-filter: blur(12px)...` | Glassmorphism effect |
+
+### Typography (Likhai)
+
+| Class Prefix | Example | CSS Result | Support Values / Calculation |
+|---|---|---|---|
+| `likhai-size-{n}` | `likhai-size-16` | `font-size: 16px;` | Font size in px |
+| `likhai-vazan-{v}` | `likhai-vazan-bhaari` | `font-weight: 700;` | `halka` (300), `theek` (400), `bhaari` (700), `zyada` (900) |
+| `likhai-rang-{v}` | `likhai-rang-red` | `color: red;` | Any valid CSS color |
+| `likhai-rukh-{v}` | `likhai-rukh-beech` | `text-align: center;` | `baayein` (left), `beech` (center), `daayein` (right), `patt-se` (justify) |
+| `likhai-line-{n}` | `likhai-line-2` | `line-height: 2;` | Line height |
+| `likhai-badi` | `likhai-badi` | `text-transform: uppercase;` | Uppercase |
+| `likhai-choti`| `likhai-choti`| `text-transform: lowercase;` | Lowercase |
+| `likhai-neeche`| `likhai-neeche`| `text-decoration: underline;`| Underline text |
+| `likhai-kaato`| `likhai-kaato`| `text-decoration: line-through;`| Strikethrough text |
+| `likhai-itallic`| `likhai-itallic`| `font-style: italic;`| Italic text |
+| `likhai-seedhi`| `likhai-seedhi`| `font-style: normal;`| Normal text |
+
+### Spacing (Ghera & Doori)
+
+Padding (`ghera`) and Margin (`doori`) use the 1 unit = 4px multiplier.
+
+| Feature | Prefix | Example | Calculation | CSS Result |
+|---|---|---|---|---|
+| Padding | `ghera-{n}` | `ghera-4` | 4 × 4px | `padding: 16px;` |
+| Padding Top | `ghera-upar-{n}` | `ghera-upar-2` | 2 × 4px | `padding-top: 8px;` |
+| Padding X | `ghera-x-{n}` | `ghera-x-5` | 5 × 4px | `padding-left: 20px; padding-right: 20px;` |
+| Margin | `doori-{n}` | `doori-8` | 8 × 4px | `margin: 32px;` |
+| Margin Auto | `doori-auto` | `doori-auto` | - | `margin: auto;` |
+
+*(Available directional prefixes: `upar` (top), `neeche` (bottom), `baayein` (left), `daayein` (right), `x` (horizontal), `y` (vertical))*
+
+### Backgrounds & Borders
+
+| Class Prefix | Example | CSS Result | Note |
+|---|---|---|---|
+| `rang-piche-{v}` | `rang-piche-blue` | `background-color: blue;` | Any valid color |
+| `ghumaav-{n}` | `ghumaav-5` | `border-radius: 20px;` | 5 × 4px. Use `gol` for fully rounded (`9999px`) |
+| `lakheer-{n}` | `lakheer-2` | `border: 2px solid;` | Sets solid border with width |
+| `lakheer-rang-{v}`| `lakheer-rang-red` | `border-color: red;` | Sets border color |
+| `lakheer-style-{v}`| `lakheer-style-dashed`| `border-style: dashed;` | Sets border style |
+
+### Flexbox & Grid
+
+| Class Prefix | Example | CSS Result | Support Values |
+|---|---|---|---|
+| `dhancha-{v}` | `dhancha-khada` | `flex-direction: column;` | `khada` (column), row (default) |
+| `faasla-{n}` | `faasla-4` | `gap: 16px;` | 4 × 4px |
+| `milap-kaise-{v}`| `milap-kaise-beech` | `justify-content: center;`| `beech`, `door`, `aas-paas`, `chipak-ke`, `ant-mein` |
+| `khada-milap-{v}`| `khada-milap-fail-ke`| `align-items: stretch;` | `beech`, `chipak-ke`, `neeche`, `fail-ke` |
+| `lapait-{v}` | `lapait-haan` | `flex-wrap: wrap;` | `haan` (wrap), nowrap |
+| `khali-jagah-{n}`| `khali-jagah-1`| `flex-grow: 1;` | Flex grow value |
+| `dabna-{n}`| `dabna-0`| `flex-shrink: 0;` | Flex shrink value |
+| `jaali-cols-{n}` | `jaali-cols-3` | `grid-template-columns: repeat(3, ...)`| Grid columns |
+| `jaali-rows-{n}` | `jaali-rows-2` | `grid-template-rows: repeat(2, ...)`| Grid rows |
+
+### Sizing
+
+| Class Prefix | Example | CSS Result | Note |
+|---|---|---|---|
+| `chaudaai-{n}` | `chaudaai-10` | `width: 40px;` | Multiply by 4px. Use `poora` (100%) or `parda` (100vw) |
+| `chaudaai-max-{n}`| `chaudaai-max-poora`| `max-width: 100%;`| Max Width |
+| `lambai-{n}` | `lambai-20` | `height: 80px;` | Multiply by 4px. Use `poora` (100%) or `parda` (100vh) |
+| `lambai-max-{n}` | `lambai-max-poora` | `max-height: 100%;` | Max Height |
+
+### Effects & Interactive
+
+| Class Prefix | Example | CSS Result | Explanation |
+|---|---|---|---|
+| `parchaayi-{n}` | `parchaayi-4` | `box-shadow: ...` | Box shadow. Append `-halki` for light shadow. |
+| `dhundhla-{n}` | `dhundhla-5` | `opacity: 0.5;` | Divides n by 10 for opacity |
+| `saaf-saaf-{n}`| `saaf-saaf-10` | `filter: blur(10px);`| Blur effect |
+| `pakaayi-{n}`| `pakaayi-15` | `filter: brightness(1.5);`| Brightness effect |
+| `shakal-{v}` | `shakal-video` | `aspect-ratio: 16/9;` | Aspect ratio: `square` (1/1), `video` (16/9), `khada` (9/16), `photo` (4/3) |
+| `fit-kaise-{v}`| `fit-kaise-kheench-ke`| `object-fit: fill;`| Object fit: `bhar-do` (cover), `beech-mein` (contain), `kheench-ke` (fill) |
+| `ungli-{v}` | `ungli-haan` | `cursor: pointer;` | Cursors: `haan`, `na`, `likhai`, `rok-do`, `khisko` |
+| `raftaar-{v}` | `raftaar-tez` | `transition: all 150ms...`| Transition speeds: `tez` (150ms), `theek` (350ms), `haule` (800ms), `ekdum-slow` (2s) |
+| `had-se-bahar-{v}`| `had-se-bahar-chupao`| `overflow: hidden;` | Overflow: `chupao` (hidden), `ghumaao` (auto) |
+| `tikaana-{v}` | `tikaana-absolute` | `position: absolute;` | Position (absolute, relative, fixed, etc.) |
+| `uunchai-{n}` | `uunchai-50` | `z-index: 50;` | Specifies z-index |
+
+*(Position directions supported: `upar` (top), `neeche` (bottom), `baayein` (left), `daayein` (right))*
+
+---
+
+## Example Usage
+
+Here is a quick example showcasing how you can build UIs with KulhadCSS!
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>KulhadCSS Demo</title>
+    <script type="module">
+        import { scanDom } from 'https://cdn.jsdelivr.net/npm/kulhadcss/src/index.js';
+    </script>
+</head>
+<body style="background: #fdf5e6; margin: 0; min-height: 100vh;" class="beech">
+    <div class="milkar dhancha-khada beech ghera-10 ghumaav-5 parchaayi-2" style="background: #8b4513; color: white;">
+        <h1 class="doori-neeche-2 likhai-vazan-bhaari">🏺 KulhadCSS is Kadak!</h1>
+        <p class="likhai-size-14 dhundhla-8">Styling is now desi & simple.</p>
+        <button class="doori-upar-4 ghera-x-6 ghera-y-2 ghumaav-gol rang-piche-white likhai-rang-black ungli-haan raftaar-tez">
+            Piyo!
+        </button>
+    </div>
+</body>
+</html>
+```
+
+## License
+[ISC](https://opensource.org/licenses/ISC) © Rachit

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kulhadcss",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "A Kadak utility-first CSS engine brewed with Vanilla JS.",
   "main": "src/index.js",
   "type": "module",

package/src/parser.js

@@ -1,36 +1,109 @@
 const SCALE = 4;
 
-const staticStyles = {
-    "milkar": { "display": "flex" },
-    "beech": { 
-        "display": "flex", 
-        "justifyContent": "center", 
-        "alignItems": "center" 
-    }
+const PARDAS = {
+    mobile: "(min-width: 640px)",
+    tab: "(min-width: 1024px)",
+    bade: "(min-width: 1280px)"
 };
 
-export function parseClass(className) {
+export function parseKulhadClass(className) {
+    const staticStyles = {
+        "milkar": { display: "flex" },
+        "jaali-hai": { display: "grid" },
+        "beech": { display: "flex", justifyContent: "center", alignItems: "center" },
+        "gayab": { display: "none" },
+        "block": { display: "block" },
+        "inline": { display: "inline" },
+        "ungli-haan": { cursor: "pointer" },
+        "chuna-mana": { pointerEvents: "none" },
+        "likhai-neeche": { textDecoration: "underline" },
+        "likhai-kaato": { textDecoration: "line-through" },
+        "likhai-itallic": { fontStyle: "italic" },
+        "likhai-seedhi": { fontStyle: "normal" },
+        "chipka-hua": { position: "sticky", top: 0 },
+        "poora-parda": { width: "100vw", height: "100vh" },
+        "shish-mahal": { backdropFilter: "blur(12px)", backgroundColor: "rgba(255,255,255,0.1)" }
+    };
+
     if (staticStyles[className]) return staticStyles[className];
     const parts = className.split("-");
-    if (parts.length !== 2) return null;
-    let [prefix, value] = parts;
-    let numValue = Number(value);
-    if (isNaN(numValue)) return null;
-    prefix = prefix.toLowerCase();
+    const prefix = parts.slice(0, -1).join("-").toLowerCase();
+    const value = parts[parts.length - 1];
+    if (!prefix || !value) return null;
+    const numValue = Number(value);
+    const v = value.toLowerCase();
+    const rukhMap = { "baayein": "left", "beech": "center", "daayein": "right", "patt-se": "justify" };
+    const vazanMap = { "halka": "300", "theek": "400", "bhaari": "700", "zyada": "900" };
+    const milapMap = { "beech": "center", "door": "space-between", "aas-paas": "space-around", "chipak-ke": "flex-start", "ant-mein": "flex-end" };
+    const khadaMilapMap = { "beech": "center", "chipak-ke": "flex-start", "neeche": "flex-end", "fail-ke": "stretch" };
+    const raftaarMap = { "tez": "150ms", "theek": "350ms", "haule": "800ms", "ekdum-slow": "2000ms" };
+    const ungliMap = { "haan": "pointer", "na": "not-allowed", "likhai": "text", "rok-do": "wait", "khisko": "move" };
+    const shakalMap = { "square": "1/1", "video": "16/9", "khada": "9/16", "photo": "4/3" };
+    const fitMap = { "bhar-do": "cover", "beech-mein": "contain", "kheench-ke": "fill" };
+
     switch (prefix) {
-        case "malai": 
-            return { 
-                "padding": `${numValue * SCALE}px`
-            };
-        case "doori": 
-            return { 
-                "margin": `${numValue * SCALE}px`
-            };
-        case "ghumaav": 
-            return {
-                 "borderRadius": `${numValue * SCALE}px`
-             };
-        default:
-            return null;
+        case "likhai-size": return { fontSize: isNaN(numValue) ? v : `${numValue}px` };
+        case "likhai-vazan": return { fontWeight: vazanMap[v] || v };
+        case "likhai-rang": return { color: v };
+        case "likhai-rukh": return { textAlign: rukhMap[v] || v };
+        case "likhai-line": return { lineHeight: isNaN(numValue) ? v : numValue };
+        case "likhai-space": return { letterSpacing: `${numValue}px` };
+        case "likhai-badi": return { textTransform: "uppercase" };
+        case "likhai-choti": return { textTransform: "lowercase" };
+        case "ghera": return { padding: `${numValue * SCALE}px` };
+        case "ghera-upar": return { paddingTop: `${numValue * SCALE}px` };
+        case "ghera-neeche": return { paddingBottom: `${numValue * SCALE}px` };
+        case "ghera-baayein": return { paddingLeft: `${numValue * SCALE}px` };
+        case "ghera-daayein": return { paddingRight: `${numValue * SCALE}px` };
+        case "ghera-x": return { paddingLeft: `${numValue * SCALE}px`, paddingRight: `${numValue * SCALE}px` };
+        case "ghera-y": return { paddingTop: `${numValue * SCALE}px`, paddingBottom: `${numValue * SCALE}px` };
+        case "doori": return { margin: `${numValue * SCALE}px` };
+        case "doori-upar": return { marginTop: `${numValue * SCALE}px` };
+        case "doori-neeche": return { marginBottom: `${numValue * SCALE}px` };
+        case "doori-baayein": return { marginLeft: `${numValue * SCALE}px` };
+        case "doori-daayein": return { marginRight: `${numValue * SCALE}px` };
+        case "doori-x": return { marginLeft: `${numValue * SCALE}px`, marginRight: `${numValue * SCALE}px` };
+        case "doori-y": return { marginTop: `${numValue * SCALE}px`, marginBottom: `${numValue * SCALE}px` };
+        case "doori-auto": return { margin: "auto" };
+        case "rang-piche": return { backgroundColor: v };
+        case "lakheer": return { borderWidth: `${numValue}px`, borderStyle: "solid" };
+        case "lakheer-rang": return { borderColor: v };
+        case "lakheer-style": return { borderStyle: v };
+        case "ghumaav": return { borderRadius: v === "gol" ? "9999px" : `${numValue * SCALE}px` };
+        case "ghumaav-upar": return { borderTopLeftRadius: `${numValue * SCALE}px`, borderTopRightRadius: `${numValue * SCALE}px` };
+        case "ghumaav-neeche": return { borderBottomLeftRadius: `${numValue * SCALE}px`, borderBottomRightRadius: `${numValue * SCALE}px` };
+        case "faasla": return { gap: `${numValue * SCALE}px` };
+        case "faasla-x": return { columnGap: `${numValue * SCALE}px` };
+        case "faasla-y": return { rowGap: `${numValue * SCALE}px` };
+        case "dhancha": return { flexDirection: v === "khada" ? "column" : "row" };
+        case "milap-kaise": return { justifyContent: milapMap[v] || v };
+        case "khada-milap": return { alignItems: khadaMilapMap[v] || v };
+        case "lapait": return { flexWrap: v === "haan" ? "wrap" : "nowrap" };
+        case "khali-jagah": return { flexGrow: numValue };
+        case "dabna": return { flexShrink: numValue };
+        case "jaali-cols": return { gridTemplateColumns: `repeat(${numValue}, minmax(0, 1fr))` };
+        case "jaali-rows": return { gridTemplateRows: `repeat(${numValue}, minmax(0, 1fr))` };
+        case "chaudaai": return { width: v === "poora" ? "100%" : (v === "parda" ? "100vw" : `${numValue * SCALE}px`) };
+        case "chaudaai-max": return { maxWidth: v === "poora" ? "100%" : `${numValue * SCALE}px` };
+        case "lambai": return { height: v === "poora" ? "100%" : (v === "parda" ? "100vh" : `${numValue * SCALE}px`) };
+        case "lambai-max": return { maxHeight: v === "poora" ? "100%" : `${numValue * SCALE}px` };
+        case "tikaana": return { position: v };
+        case "upar": return { top: `${numValue * SCALE}px` };
+        case "neeche": return { bottom: `${numValue * SCALE}px` };
+        case "baayein": return { left: `${numValue * SCALE}px` };
+        case "daayein": return { right: `${numValue * SCALE}px` };
+        case "uunchai": return { zIndex: numValue };
+        case "parchaayi": return { boxShadow: `0px ${numValue}px ${numValue * 3}px rgba(0,0,0,${v === "halki" ? 0.1 : 0.25})` };
+        case "dhundhla": return { opacity: numValue / 10 };
+        case "saaf-saaf": return { filter: `blur(${numValue}px)` };
+        case "pakaayi": return { filter: `brightness(${numValue / 10})` };
+        case "shakal": return { aspectRatio: shakalMap[v] || v };
+        case "fit-kaise": return { objectFit: fitMap[v] || v };
+        case "ungli": return { cursor: ungliMap[v] || v };
+        case "raftaar": return { transition: `all ${raftaarMap[v] || v} ease-in-out` };
+        case "had-se-bahar": return { overflow: v === "chupao" ? "hidden" : (v === "ghumaao" ? "auto" : v) };
+        case "had-se-bahar-x": return { overflowX: v === "chupao" ? "hidden" : "auto" };
+        case "had-se-bahar-y": return { overflowY: v === "chupao" ? "hidden" : "auto" };
+        default: return null;
     }
 }

package/demo/index.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>KulhadCSS Test</title>
-    <script type="module">
-                import { scanDom } from 'https://cdn.jsdelivr.net/npm/kulhadcss/src/index.js';
-    </script>
-</head>
-<body style="background: #fdf5e6; ">
-
-    <div class="milkar beech malai-10 ghumaav-5" style="background: #8b4513; color: white;"">
-        <h1 class="doori-2">🏺 KulhadCSS is Live!</h1>
-    </div>
-
-</body>
-</html>

package/readme.md

@@ -1,71 +0,0 @@
-# 🏺 KulhadCSS
-
-A **Kadak** utility-first CSS engine brewed with pure Vanilla JS. 
-
-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.
-
-## Installation
-
-**Via NPM:**
-```bash
-npm install kulhadcss
-```
-
-**Via CDN (JSDelivr) in browser:**
-```html
-<script type="module">
-  import { scanDom } from 'https://cdn.jsdelivr.net/npm/kulhadcss/src/index.js';
-</script>
-```
-
-##  How It Works
-
-KulhadCSS runs naturally in the browser without any bundler overhead:
-1. **Parser:** Deconstructs unique class names (e.g., `malai-10` into `padding: 40px`).
-2. **Applier:** Scans through the DOM elements and applies the generated inline styles to the `style` object directly.
-3. **Auto-Initialization:** It automatically listens to the `DOMContentLoaded` event, so all your styled elements are beautifully rendered once HTML is loaded.
-
-## The Desi Dictionary
-
-All dynamic utilities in KulhadCSS follow a strict 4-pixel base scale:
-> **1 unit = 4px**
-
-### Layout Utilities (Static)
-
-| Class Name | CSS Property | Description |
-|---|---|---|
-| `milkar` | `display: flex;` | Initializes a flex container |
-| `beech` | `display: flex; justify-content: center; align-items: center;` | Perfectly centers the content |
-
-### Spacing & Visual Utilities (Dynamic)
-
-| Class Prefix | CSS Property | Example | Calculation |
-|---|---|---|---|
-| `malai-{n}` | `padding` | `malai-4` | 4 × 4 = **16px** |
-| `doori-{n}` | `margin` | `doori-8` | 8 × 4 = **32px** |
-| `ghumaav-{n}` | `border-radius` | `ghumaav-5` | 5 × 4 = **20px** |
-
-## Example Usage
-
-Here is a quick example showcasing how you can build UIs with KulhadCSS!
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>KulhadCSS Demo</title>
-    <script type="module">
-        import { scanDom } from 'https://cdn.jsdelivr.net/npm/kulhadcss/src/index.js';
-    </script>
-</head>
-<body style="background: #fdf5e6; margin: 0; min-height: 100vh;" class="beech">
-    <div class="milkar beech malai-10 ghumaav-5" style="background: #8b4513; color: white;">
-        <h1 class="doori-2">🏺 KulhadCSS is Live!</h1>
-    </div>
-</body>
-</html>
-```
-
-## License
-[ISC](https://opensource.org/licenses/ISC) © Rachit