{"id":48399003,"url":"https://github.com/altxriainc/kromacss","last_synced_at":"2026-04-06T01:38:01.586Z","repository":{"id":261072578,"uuid":"881854780","full_name":"altxriainc/kromacss","owner":"altxriainc","description":"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.","archived":false,"fork":false,"pushed_at":"2024-11-30T15:23:46.000Z","size":641,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-19T03:06:55.028Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/altxriainc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-01T11:38:44.000Z","updated_at":"2024-11-30T15:23:49.000Z","dependencies_parsed_at":"2024-11-19T05:52:38.404Z","dependency_job_id":null,"html_url":"https://github.com/altxriainc/kromacss","commit_stats":null,"previous_names":["altxriainc/kromacss"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/altxriainc/kromacss","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/altxriainc%2Fkromacss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/altxriainc%2Fkromacss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/altxriainc%2Fkromacss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/altxriainc%2Fkromacss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/altxriainc","download_url":"https://codeload.github.com/altxriainc/kromacss/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/altxriainc%2Fkromacss/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31456663,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-05T21:22:52.476Z","status":"ssl_error","status_checked_at":"2026-04-05T21:22:51.943Z","response_time":75,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2026-04-06T01:38:01.528Z","updated_at":"2026-04-06T01:38:01.575Z","avatar_url":"https://github.com/altxriainc.png","language":"CSS","funding_links":["https://github.com/sponsors/altxriainc","https://ko-fi.com/N4N516SMZ6"],"categories":[],"sub_categories":[],"readme":"# KromaCSS\n\n![Latest Version](https://img.shields.io/github/v/release/altxriainc/kromacss)\n![Downloads](https://img.shields.io/github/downloads/altxriainc/kromacss/total)\n![Status](https://img.shields.io/badge/status-stable-green)\n![CodeQL](https://github.com/altxriainc/kromacss/workflows/CodeQL/badge.svg)\n![npm version](https://img.shields.io/npm/v/kromacss)\n![npm downloads](https://img.shields.io/npm/dt/kromacss)\n![License: CC BY-ND 4.0](https://img.shields.io/badge/License-CC%20BY--ND%204.0-lightgrey.svg)\n\n**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.\n\n---\n\n## 🚀 Key Features\n\n- **Pure CSS \u0026 JavaScript**: No external dependencies—just plug in and start building.\n- **Responsive \u0026 Adaptive**: Automatically adjusts layouts and components to fit any screen size or device.\n- **Customizable Variables**: Effortlessly theme your project with global root variables for colors, typography, shadows, spacing, and more.\n- **Comprehensive Component Library**: Comes with a wide array of ready-to-use, fully accessible UI components.\n- **Accessibility First**: Built with ARIA support and keyboard navigation to ensure a great experience for all users.\n- **Open for Personal \u0026 Commercial Use**: Use KromaCSS freely in personal and commercial projects (not for resale as a standalone product).\n\n---\n\n## 🛠️ How to Use KromaCSS\n\n### Step 1: Add the CDN Links\n\nInclude the following lines in your HTML file to load KromaCSS.\n\n```html\n\u003c!-- KromaCSS Stylesheet --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/altxriainc/kromacss@latest/src/css/bundle.css\"\u003e\n\n\u003c!-- KromaCSS JavaScript --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/altxriainc/kromacss@latest/src/js/bundle.js\"\u003e\u003c/script\u003e\n```\n\n### Step 2: Install via NPM\n\nYou can also install KromaCSS via npm:\n\n```bash\nnpm install kromacss\n```\n\nThen import KromaCSS into your JavaScript or CSS project:\n\n#### Import CSS and JavaScript in Your JavaScript File\n\n```javascript\n// Import KromaCSS styles\nimport 'kromacss/src/css/bundle.css';\n\n// Import KromaCSS functionality\nimport 'kromacss/src/js/bundle.js';\n```\n\n#### Directly Include Files in HTML (Post npm Install)\n\nIf not using a bundler, link the installed files directly in your HTML:\n\n```html\n\u003c!-- KromaCSS Stylesheet --\u003e\n\u003clink rel=\"stylesheet\" href=\"node_modules/kromacss/src/css/bundle.css\"\u003e\n\n\u003c!-- KromaCSS JavaScript --\u003e\n\u003cscript src=\"node_modules/kromacss/src/js/bundle.js\"\u003e\u003c/script\u003e\n```\n\n### Step 2: Add Components\n\nKromaCSS provides ready-to-use components. For example, to create a button:\n\n```html\n\u003cbutton class=\"btn\" data-variant=\"secondary\"\u003eClick Me\u003c/button\u003e\n```\n\nExplore more components and utilities in the [Documentation](https://github.com/altxriainc/kromacss/wiki).\n\n---\n\n## 🧩 Supported Components\n\n### Layout \u0026 Structure\n- Accordion, Card, Hero, Separator, Table, Timeline, Breadcrumbs\n\n### Inputs \u0026 Forms\n- Form, MultiSelect, Toggle, DateTime Picker\n\n### Feedback \u0026 Indicators\n- Alert, Badge, Progress, Skeleton, Rating, Toast\n\n### Interactive Elements\n- Button, Tabs, Tooltip, Modal, Dropdown, Pagination, Slideshow, Calendar, Command Palette\n\n### Media \u0026 Visuals\n- Avatar, Hologram, Stat Metrics, Floating Action Button (FAB)\n\nEach component is designed to be adaptive and responsive, ensuring a seamless experience across all devices.\n\n---\n\n## 🔍 Project Status\n\n![Closed Issues](https://img.shields.io/github/issues-closed/altxriainc/kromacss)\n![Addon Issues](https://img.shields.io/github/issues/altxriainc/kromacss/addon)\n![Enhancement Issues](https://img.shields.io/github/issues/altxriainc/kromacss/enhancement)\n![Bug Issues](https://img.shields.io/github/issues/altxriainc/kromacss/bug)\n\n---\n\n## 📜 License and Usage\n\nKromaCSS is free to use for both personal and commercial projects. However, KromaCSS itself cannot be resold or distributed as a standalone product.\n\n---\n\n## 🤝 Contributors\n\nDeveloped and maintained by **Altxria Inc.** with contributions from a growing community of passionate developers.\n\n![Contributors](https://contrib.rocks/image?repo=altxriainc/kromacss)\n\n[See All Contributors](https://github.com/altxriainc/kromacss/graphs/contributors)\n\n---\n\n## ❤️ Support KromaCSS\n\nIf you find KromaCSS useful, consider sponsoring us to support ongoing development and new features!\n\n[![Sponsor KromaCSS](https://img.shields.io/badge/Sponsor-KromaCSS-blue?logo=github-sponsors)](https://github.com/sponsors/altxriainc)\n\n[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/N4N516SMZ6)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faltxriainc%2Fkromacss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faltxriainc%2Fkromacss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faltxriainc%2Fkromacss/lists"}