☕ Chai CSS Engine

A lightweight utility-first CSS engine built with vanilla JavaScript.

Chai CSS dynamically scans the DOM, parses chai-* utility classes, and applies corresponding inline styles at runtime — inspired by utility-first CSS frameworks.

🚀 Features No CSS files required Pure JavaScript (no dependencies) Utility-first class syntax Automatic DOM scanning Works with npm and CDN Easy to extend and customize

📦 Installation (npm)

npm install chi-css-engine

🔧 Usage (npm / Vite / Bundlers) 1️⃣ Import the package import "chi-css-engine";

⚠️ No function call required The engine runs automatically after DOMContentLoaded.

2️⃣ Use utility classes in HTML

🌐 Usage via CDN (No Build Tools)

Full CDN Example

<div class="chai-p-3 chai-bg-blue chai-text-center chai-rounded-md">
  Hello Chai CSS ☕
</div>

<script src="https://unpkg.com/chi-css-engine@latest"></script>

✅ No Node.js ✅ No npm ✅ No bundler

🧠 How It Works Waits for DOMContentLoaded Traverses all DOM elements Detects class names starting with chai- Parses utility patterns Applies inline styles dynamically

📐 Supported Utilities 🧱 Spacing

| Class | Effect | | -------- | ------------- | | chai-p-0 | padding: 0px | | chai-p-1 | padding: 4px | | chai-p-2 | padding: 8px | | chai-p-3 | padding: 12px | | chai-p-4 | padding: 16px | | chai-m-2 | margin: 8px |

🎨 Colors

| Class | Effect | | --------------- | ---------------------- | | chai-bg-red | background-color: red | | chai-bg-blue | background-color: blue | | chai-text-black | color: black |

✔ Any valid CSS color value is supported.

✍ Typography Text Alignment

| Class | Effect | | ---------------- | ------------------ | | chai-text-center | text-align: center | | chai-text-left | text-align: left | | chai-text-right | text-align: right |

Font Size

| Class | Font Size | | ------------ | --------- | | chai-text-sm | 12px | | chai-text-md | 16px | | chai-text-lg | 18px | | chai-text-xl | 24px |

🧩 Borders

| Class | Effect | | ------------- | --------------- | | chai-border-1 | 1px solid black | | chai-border-2 | 2px solid black |

🔵 Border Radius | Class | Radius | | --------------- | ------ | | chai-rounded-sm | 4px | | chai-rounded-md | 6px | | chai-rounded-lg | 12px | | chai-rounded-10 | 10px |

📦 Layout Utilities

| Class | Effect | | ------------------- | ----------------------- | | chai-flex | display: flex | | chai-items-center | align-items: center | | chai-justify-center | justify-content: center |

🧪 Example Layout

🛠 Customization

You can extend utilities by editing:

spacingScale fontSizeMap radiusMap

Add new rules inside the applyUtility() switch to support more utilities.

⚠️ Limitations Uses inline styles (overrides external CSS) No responsive utilities (yet) No hover / pseudo-class support (yet) 📄 License

MIT License © 2026

⭐ Author

Built with ☕ by Nitesh Shedge