https://github.com/altxriainc/kromacss
KromaCSS is a modern, lightweight CSS framework built for speed, simplicity, and adaptability. Utilizing the latest CSS features, KromaCSS empowers developers with a robust set of fully responsive, modular components that require no dependencies—just pure CSS and vanilla JavaScript.
https://github.com/altxriainc/kromacss
accessibility adaptive-layout aria-support css-framework customizable-variables kromacss lightweight-css modern-css modular-components pure-css responsive-design semantic-html ui-components vanilla-javascript
Last synced: about 2 months ago
JSON representation
KromaCSS is a modern, lightweight CSS framework built for speed, simplicity, and adaptability. Utilizing the latest CSS features, KromaCSS empowers developers with a robust set of fully responsive, modular components that require no dependencies—just pure CSS and vanilla JavaScript.
- Host: GitHub
- URL: https://github.com/altxriainc/kromacss
- Owner: altxriainc
- License: other
- Created: 2024-11-01T11:38:44.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-30T15:23:46.000Z (over 1 year ago)
- Last Synced: 2025-09-19T03:06:55.028Z (8 months ago)
- Topics: accessibility, adaptive-layout, aria-support, css-framework, customizable-variables, kromacss, lightweight-css, modern-css, modular-components, pure-css, responsive-design, semantic-html, ui-components, vanilla-javascript
- Language: CSS
- Homepage:
- Size: 626 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# KromaCSS
**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
```
### 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
```
### Step 2: Add Components
KromaCSS provides ready-to-use components. For example, to create a button:
```html
Click Me
```
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
---
## 📜 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.
[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!
[](https://github.com/sponsors/altxriainc)
[](https://ko-fi.com/N4N516SMZ6)