# KromaCSS

![Latest Version](https://img.shields.io/github/v/release/altxriainc/kromacss)
![Downloads](https://img.shields.io/github/downloads/altxriainc/kromacss/total)
![Status](https://img.shields.io/badge/status-stable-green)
![CodeQL](https://github.com/altxriainc/kromacss/workflows/CodeQL/badge.svg)
![npm version](https://img.shields.io/npm/v/kromacss)
![npm downloads](https://img.shields.io/npm/dt/kromacss)
![License: CC BY-ND 4.0](https://img.shields.io/badge/License-CC%20BY--ND%204.0-lightgrey.svg)

**KromaCSS** is a modern, lightweight, and dependency-free CSS framework designed for simplicity, speed, and adaptability. Built with the latest CSS features and enhanced by vanilla JavaScript, KromaCSS offers a robust collection of responsive, modular components. Ideal for developers who want efficient, adaptable styling for both personal and commercial projects without the need for any extra requirements.

---

## 🚀 Key Features

- **Pure CSS & JavaScript**: No external dependencies—just plug in and start building.
- **Responsive & Adaptive**: Automatically adjusts layouts and components to fit any screen size or device.
- **Customizable Variables**: Effortlessly theme your project with global root variables for colors, typography, shadows, spacing, and more.
- **Comprehensive Component Library**: Comes with a wide array of ready-to-use, fully accessible UI components.
- **Accessibility First**: Built with ARIA support and keyboard navigation to ensure a great experience for all users.
- **Open for Personal & Commercial Use**: Use KromaCSS freely in personal and commercial projects (not for resale as a standalone product).

---

## 🛠️ How to Use KromaCSS

### Step 1: Add the CDN Links

Include the following lines in your HTML file to load KromaCSS.

```html
<!-- KromaCSS Stylesheet -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/altxriainc/kromacss@latest/src/css/bundle.css">

<!-- KromaCSS JavaScript -->
<script src="https://cdn.jsdelivr.net/gh/altxriainc/kromacss@latest/src/js/bundle.js"></script>
```

### Step 2: Install via NPM

You can also install KromaCSS via npm:

```bash
npm install kromacss
```

Then import KromaCSS into your JavaScript or CSS project:

#### Import CSS and JavaScript in Your JavaScript File

```javascript
// Import KromaCSS styles
import 'kromacss/src/css/bundle.css';

// Import KromaCSS functionality
import 'kromacss/src/js/bundle.js';
```

#### Directly Include Files in HTML (Post npm Install)

If not using a bundler, link the installed files directly in your HTML:

```html
<!-- KromaCSS Stylesheet -->
<link rel="stylesheet" href="node_modules/kromacss/src/css/bundle.css">

<!-- KromaCSS JavaScript -->
<script src="node_modules/kromacss/src/js/bundle.js"></script>
```

### Step 2: Add Components

KromaCSS provides ready-to-use components. For example, to create a button:

```html
<button class="btn" data-variant="secondary">Click Me</button>
```

Explore more components and utilities in the [Documentation](https://github.com/altxriainc/kromacss/wiki).

---

## 🧩 Supported Components

### Layout & Structure
- Accordion, Card, Hero, Separator, Table, Timeline, Breadcrumbs

### Inputs & Forms
- Form, MultiSelect, Toggle, DateTime Picker

### Feedback & Indicators
- Alert, Badge, Progress, Skeleton, Rating, Toast

### Interactive Elements
- Button, Tabs, Tooltip, Modal, Dropdown, Pagination, Slideshow, Calendar, Command Palette

### Media & Visuals
- Avatar, Hologram, Stat Metrics, Floating Action Button (FAB)

Each component is designed to be adaptive and responsive, ensuring a seamless experience across all devices.

---

## 🔍 Project Status

![Closed Issues](https://img.shields.io/github/issues-closed/altxriainc/kromacss)
![Addon Issues](https://img.shields.io/github/issues/altxriainc/kromacss/addon)
![Enhancement Issues](https://img.shields.io/github/issues/altxriainc/kromacss/enhancement)
![Bug Issues](https://img.shields.io/github/issues/altxriainc/kromacss/bug)

---

## 📜 License and Usage

KromaCSS is free to use for both personal and commercial projects. However, KromaCSS itself cannot be resold or distributed as a standalone product.

---

## 🤝 Contributors

Developed and maintained by **Altxria Inc.** with contributions from a growing community of passionate developers.

![Contributors](https://contrib.rocks/image?repo=altxriainc/kromacss)

[See All Contributors](https://github.com/altxriainc/kromacss/graphs/contributors)

---

## ❤️ Support KromaCSS

If you find KromaCSS useful, consider sponsoring us to support ongoing development and new features!

[![Sponsor KromaCSS](https://img.shields.io/badge/Sponsor-KromaCSS-blue?logo=github-sponsors)](https://github.com/sponsors/altxriainc)

[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/N4N516SMZ6)