CSS Fusion G

A lightweight, global CSS & JavaScript utility framework for building modern UI components.
Authored with SCSS and TypeScript, and distributed as plain CSS and JavaScript — no runtime dependencies, no required frameworks.

CSS Fusion G is framework-agnostic and can be used in plain HTML projects or integrated into any modern frontend framework.

📘 Documentation: https://sid-devspot.github.io/cssfusion/#/Home

✨ Features

• Prebuilt UI components (Accordion, Tabs, Dropdown, Navbar, etc.)
• Global CSS utility and layout classes
• Framework-agnostic vanilla JavaScript
• Authored with SCSS and TypeScript, shipped as compiled assets
• Supports UMD & ES modules
• Works with CDN, npm, or local files
• Ideal for static sites and custom JavaScript projects

📦 Installation

Using npm

npm install @dev.spot/css-fusion-g

Using CDN (CSS only)

<link
  rel="stylesheet"
  href="https://unpkg.com/@dev.spot/css-fusion-g/dist/cssfusion-g/css/cssfusion-g.min.css"
/>

🚀 Usage

Include CSS

<link
  rel="stylesheet"
  href="node_modules/@dev.spot/css-fusion-g/dist/cssfusion-g/css/cssfusion-g.min.css"
/>

Include JavaScript (UMD – Browser)

<script src="node_modules/@dev.spot/css-fusion-g/dist/cssfusion-g/js/cssfusion-g.umd.js"></script>

After loading, the library is available globally:

console.log(window["cssfusion-g"]);

ES Module Usage (Bundlers)

import { Accordion, Tabs, Dropdown } from "@dev.spot/css-fusion-g";

🧱 Components

Accordion

<div class="accordion-main">
  <div class="acc-head acc-static">
    <h2 class="acc-title">Accordion Title</h2>
  </div>
  <div class="acc-body">
    <div class="acc-content">
      Accordion content goes here
    </div>
  </div>
</div>

new cssfusion.Accordion(
  document.querySelectorAll(".accordion-main")
);

🎨 Themes & Utilities

CSS Fusion G includes predefined theme and utility classes:

<div class="theme-ocean"></div>
<div class="theme-sunrise"></div>
<div class="theme-emerald"></div>
<div class="theme-royal"></div>
<div class="theme-midnight"></div>
<div class="theme-dark"></div>

All styles can be extended or overridden using your own SCSS.

🛠 Build & Development

Built using Vite + SCSS.

npm run dev
npm run build

📚 Documentation

Full documentation with examples and component usage:

https://sid-devspot.github.io/cssfusion/#/Home

🧑‍💻 Author

Siddarth G

• GitHub: https://github.com/sid-devspot
• npm: https://www.npmjs.com/~dev.spot

📄 License

MIT License © Siddarth G