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.

<!-- 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:

npm install kromacss

Then import KromaCSS into your JavaScript or CSS project:

Import CSS and JavaScript in Your JavaScript File

// 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:

<!-- 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:

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

Explore more components and utilities in the Documentation.

🧩 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

❤️ Support KromaCSS

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