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. Ensure the JavaScript file is loaded as a module for proper functionality.
<!-- KromaCSS Stylesheet -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/altxriainc/kromacss@latest/css/main.css">
<!-- KromaCSS JavaScript (Loaded as Module) -->
<script type="module" src="https://cdn.jsdelivr.net/gh/altxriainc/kromacss@latest/js/main.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.
📦 Latest Version
- Version: 1.0.2
- Release Date: November 15, 2024
🔍 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.
❤️ Support KromaCSS
If you find KromaCSS useful, consider sponsoring us to support ongoing development and new features!
