🛠️ JugaduCSS Engine (JACE)

The Ultimate Jugaad Spec

🔗 Live Demo & Docs: https://jugad-aur-css.vercel.app/

"Jab code fatt jaye, toh Jugaad lagao!"

JugaduCSS Engine (JACE) is a massive, highly dynamic, utility-first CSS rendering engine built entirely in JavaScript. Inspired by the "Desi-Developer" flavor and built for enterprise scale, this framework provides an exhaustive Hinglish style dictionary that mirrors Tailwind CSS.

The "Lightweight" Promise: JACE operates entirely AOT/JIT. It scans your source code and generates only the CSS you use. Even with thousands of potential classes, your production CSS size can stay under 5KB.

🚀 Installation & Setup

1. Install the package (via NPM/Yarn):

   npm install -D jugad-aur-css

   (Note: For local usage in this repo, use node bin/jace.js build)

2. Initialize Configuration: Create a jugadu.config.js at the root of your project:

   module.exports = {
     content: ["./src/**/*.{html,js,jsx,tsx,svelte,vue}"],
     theme: {
       extend: {
         colors: {
           'tapri-tea': '#c67b36',
         }
       }
     }
   }

3. Build the CSS:

   npx pace build -c jugadu.config.js -o ./dist/output.css

   Or use the JIT watcher for development:

   npx pace watch -c jugadu.config.js -o ./dist/output.css

📖 The Exhaustive "Hinglish" Style Dictionary

The core philosophy of JACE is Jugaad—doing maximum work with minimal overhead, using familiar Hindi/Hinglish terms mapping directly to standard CSS concepts.

📐 Layout, Flexbox & Grid (Jugaad Layouts)

| Hinglish Class | Equivalent CSS | | :--- | :--- | | jugadu-jugaad-flex | display: flex; | | jugadu-jugaad-grid | display: grid; | | jugadu-dikha | display: block; | | jugadu-dikh-mat | display: none; | | jugadu-saath-mein | display: inline-block; | | jugadu-row / jugadu-col | flex-direction: row; / column; | | jugadu-row-ulta / jugadu-col-ulta | flex-direction: row-reverse; / column-reverse; | | jugadu-beech-bajaar | justify-content: center; align-items: center; | | jugadu-failao | justify-content: space-between; | | jugadu-aaspas | justify-content: space-around; | | jugadu-line-me-lao | align-items: center; | | jugadu-upar-rakh | align-items: flex-start; | | jugadu-chipkao | position: absolute; | | jugadu-chipkao-pakka | position: fixed; | | jugadu-hoga-to | position: relative; | | jugadu-bahar-chupao | overflow: hidden; | | jugadu-bahar-dikhao | overflow: visible; | | jugadu-scroll-maar | overflow: auto; | | jugadu-jaali-cols-{n} | grid-template-columns: repeat({n}, minmax(0,1fr)) | | jugadu-jaali-rows-{n} | grid-template-rows: repeat({n}, minmax(0,1fr)) |

↔️ Spacing: Dabao (Padding) & Khisko (Margin)

Follows standard 0-96 scale (e.g., 4 = 1rem, 8 = 2rem). You can use arbitrary values too e.g., jugadu-dabao-[13px].

• Padding: jugadu-dabao-{n} (all), jugadu-dabao-x-{n} (left/right), jugadu-dabao-y-{n} (top/bottom), jugadu-dabao-t-{n} (top), jugadu-dabao-r-{n} (right), jugadu-dabao-b-{n} (bottom), jugadu-dabao-l-{n} (left).
• Margin: jugadu-khisko-{n}, jugadu-khisko-x-{n}, jugadu-khisko-t-{n}, etc.
• Gap: jugadu-fasla-{n}, jugadu-fasla-x-{n}, jugadu-fasla-y-{n}.
• Auto Margin Center: jugadu-beech-mein -> margin: 0 auto;

📏 Sizing: Choda (Width) & Lamba (Height)

• Width: jugadu-choda-{scale}, jugadu-choda-full (100%), jugadu-choda-screen (100vw), jugadu-choda-1/2 (50%), jugadu-choda-min, jugadu-choda-max.
• Height: jugadu-lamba-{scale}, jugadu-lamba-full, jugadu-lamba-screen.

✏️ Typography (Likhawat)

• Size: jugadu-akshar-{xs|sm|base|lg|xl|2xl...9xl}
• Weight (Mota): jugadu-mota-patla (100), jugadu-mota-halka (300), jugadu-mota-normal (400), jugadu-mota-bold (700), jugadu-mota-bawaal (900).
• Tracking: jugadu-khulla-khulla (wide), jugadu-chipka-chipka (tight).
• Alignment: jugadu-center-kar, jugadu-left-kar, jugadu-right-kar, jugadu-baraabar-kar.
• Transform: jugadu-bada-akshar (uppercase), jugadu-chota-akshar (lowercase), jugadu-pehla-bada (capitalize).

🎨 Colors, Backgrounds & Opacity

Extensive pre-defined scales from 50 to 950 for standard colors (laal, hara, nila, pila, narangi, gulabi, baingani), along with standard kaala, safed, parchai (transparent).

• Text Color: jugadu-rang-laal-500, jugadu-rang-safed, jugadu-rang-[#ff0000]
• Background: jugadu-piche-nila-300, jugadu-piche-[#123456]
• Opacity: jugadu-halka-{0-100} (e.g., jugadu-halka-50 -> 0.5)

🔲 Borders & Shadows (Kinaara & Parchai)

• Radius (Gol): jugadu-gol-sm, jugadu-gol, jugadu-gol-md, jugadu-gol-lg, jugadu-gol-pura (full circle), or arbitrary jugadu-gol-[3px].
• Border Width: jugadu-kinaara, jugadu-kinaara-{val}, jugadu-kinaara-[3px].
• Border Type: jugadu-kinaara-dashed, jugadu-kinaara-dotted, jugadu-kinaara-thos (solid).
• Box Shadow: jugadu-parjugadu-sm, jugadu-parchai, jugadu-parjugadu-lg, jugadu-parjugadu-bawaal (2xl), jugadu-parjugadu-gayab (none).

🎬 Interactivity & Effects (Mahaul Modifiers)

• Transitions: jugadu-badlaav, jugadu-badlaav-all, jugadu-badlaav-rang.
• Cursors: jugadu-haath (pointer), jugadu-na-bhai (not-allowed), jugadu-text-cursor.
• Z-Index: jugadu-upar-aao-{val} (z-index).
• Selection: jugadu-select-na-kar (none), jugadu-select-sab (all).
• Transform: jugadu-khicho-{0-150} (Scale example mappings possible via arb).

🛠️ Modifiers & Pseudo-Classes

JACE uses an elegant prefix system connected by colons : to handle states and media queries. These can be combined! Example: jugadu-lap:raat:chuaa:piche-laal-600.

State Modifiers

• Hover: chuaa:jugadu-...
• Active: dabaaya:jugadu-...
• Focus: focus:jugadu-...
• Disabled: disabled:jugadu-...
• First/Last Child: pehla:jugadu-..., aakhri:jugadu-...
• Odd/Even: odd:jugadu-..., even:jugadu-...

Parent Group Modifiers

Style children based on parent state using bada-bhai.

<div class="bada-bhai">
  <p class="jugadu-bada-bhai-chuaa:rang-laal-500">I turn red when the parent is hovered!</p>
</div>

Responsive Design Modifiers

Mobile-first media queries!

• phone:jugadu-... (> 640px)
• tab:jugadu-... (> 768px)
• lap:jugadu-... (> 1024px)
• bada-lap:jugadu-... (> 1280px)

Dark Mode (Raat-Mode)

Use the raat: prefix to define styles for dark environments.

<div class="jugadu-piche-safed jugadu-raat:piche-kaala">...</div>

🧨 Arbitrary Values (The Escaper)

If you need absolute precision, JACE supports one-off bracket values that avoid CSS injection vulnerabilities automatically.

<div class="jugadu-choda-[23.5px] jugadu-piche-[#00bfff]"></div>

Built with ❤️ via the Bawaal philosophy.