PHPackages webcien/kardocss - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Framework](/categories/framework) 4. / 5. webcien/kardocss ActiveLibrary[Framework](/categories/framework) webcien/kardocss ================ Framework CSS moderno, mobile-first y ultra-ligero con Dark Mode y PurgeCSS integrados v1.2.0(6mo ago)01MITPHPPHP >=7.4CI passing Since Nov 7Pushed 6mo agoCompare [ Source](https://github.com/webcien/KardoCSS)[ Packagist](https://packagist.org/packages/webcien/kardocss)[ Docs](https://github.com/webcien/KardoCSS)[ RSS](/packages/webcien-kardocss/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependencies (1)Versions (5)Used By (0) KardoCSS ======== [](#kardocss) [![KardoCSS Logo](https://raw.githubusercontent.com/webcien/KardoCSS/main/assets/KardoCSS.png)](https://raw.githubusercontent.com/webcien/KardoCSS/main/assets/KardoCSS.png) **Modern, mobile-first, and ultra-lightweight CSS framework with built-in Dark Mode and PurgeCSS.** KardoCSS is a utility-first CSS framework inspired by Tailwind, but designed to be lighter, more modular, and easier to customize. Perfect for projects that need a minimalist CSS without sacrificing functionality. --- 🌍 Translations -------------- [](#-translations) - [EspaΓ±ol](./docs/es/README.es.md) --- ### πŸš€ What's New in v1.2.0 [](#-whats-new-in-v120) - ✨ **Optional Modules System** - Keep the core lightweight and opt-in to advanced features. - ✨ **Container Queries** - Now an optional module, enabled by default. - βš™οΈ **CI/CD Size Check** - Automatic size verification to keep the framework lightweight. - πŸ“Ί **KardoTV Ready** - Architecture prepared for the upcoming TV breakpoints module (v1.3.0). ### Previous Updates [](#previous-updates) - ✨ **npm Support** - KardoCSS is now available on npm! - πŸ‡¬πŸ‡§ **English Documentation** - All documentation is now primarily in English. - ✨ **Enhanced Transitions** - New utilities: `k-transition-none`, `k-delay-*`, `k-ease-bounce`, `k-ease-back-*` (from [Issue #1](https://github.com/webcien/KardoCSS/issues/1)) - πŸ“¦ **Composer Support** - Install KardoCSS in PHP projects with `composer require webcien/kardocss` - ✨ **npm Support** - KardoCSS is now available on npm! - πŸ‡¬πŸ‡§ **English Documentation** - All documentation is now primarily in English. - ✨ **Enhanced Transitions** - New utilities: `k-transition-none`, `k-delay-*`, `k-ease-bounce`, `k-ease-back-*` (from [Issue #1](https://github.com/webcien/KardoCSS/issues/1)) - πŸ“¦ **Composer Support** - Install KardoCSS in PHP projects with `composer require webcien/kardocss` --- ✨ Features ---------- [](#-features) - 🎯 **Utility-First** - Utility classes with a `k-` prefix - πŸš€ **Fully Responsive** - Responsive variants (`sm:`, `md:`, `lg:`, `xl:`, `2xl:`) - πŸ“± **Mobile-First** - Responsive design from the ground up - ⚑ **Ultra-Lightweight** - 99.0 KB minified, ~8-12 KB with PurgeCSS - πŸŒ“ **Dark Mode** - Built-in automatic and manual dark mode - 🧹 **PurgeCSS** - Automatic tree-shaking for production - 🎨 **Customizable** - Flexible configuration via Python - πŸ”§ **Modular** - Python code organized by utilities - πŸš€ **No Dependencies** - Pure CSS generated from Python - πŸ“¦ **Pre-compiled** - Ready-to-use CSS files - πŸ’» **Multiple Installation Methods** - npm, Composer, PyPI, CDN, or direct download - 🌐 **CDN Available** - Use from jsDelivr without installation --- πŸ“¦ Installation -------------- [](#-installation) ### Option 1: npm (Recommended for JS Projects) [](#option-1-npm-recommended-for-js-projects) ``` npm install kardocss ``` **Usage in your project:** ``` // main.js or index.js import 'kardocss/dist/kardocss.min.css'; ``` πŸ“š **Full Guide**: [NPM\_GUIDE.md](./NPM_GUIDE.md) ### Option 2: Composer (For PHP Projects) [](#option-2-composer-for-php-projects) ``` composer require webcien/kardocss ``` **Usage in PHP:** ``` ``` πŸ“š **Full Guide**: [COMPOSER\_GUIDE.md](./COMPOSER_GUIDE.md) ### Option 3: CDN (For HTML/CSS) [](#option-3-cdn-for-htmlcss) ``` ``` ### Option 4: PyPI (For Python Customization) [](#option-4-pypi-for-python-customization) ``` pip install kardocss ``` --- πŸš€ Quick Start ------------- [](#-quick-start) Check out the `examples/index.html` file for a complete, professional example that demonstrates the framework's capabilities. ``` > My Site with KardoCSS KardoCSS Modern CSS Framework Feature 1 Card content. ``` --- 🎨 Available Utilities --------------------- [](#-available-utilities) KardoCSS includes a wide range of utilities for layout, spacing, colors, typography, and more. - **Layout**: Container, Display, Position, Flexbox, Grid - **Spacing**: Padding, Margin - **Sizing**: Width, Height, Max-Width, Min-Width - **Colors**: Text, Background, Border (with a default palette) - **Typography**: Font Size, Weight, Family, Text Align, Line Height - **Borders**: Radius, Width, Style - **Transitions & Animations**: Transition, Duration, Easing, Delay, Animations - **Effects**: Box Shadow, Opacity - **Forms**: Modern styles for inputs, buttons, selects, etc. - **Components**: Badges, Gradients *All major utilities are responsive and support dark mode.* --- πŸ—ΊοΈ Roadmap ---------- [](#️-roadmap) - Core utilities (spacing, colors, typography) - Layout system (flex, grid) - Responsive system - Dark mode - PurgeCSS integration - Composer support - **npm support** - Improved CLI - Container queries - Aspect ratio utilities - PostCSS plugin --- 🀝 Contributing -------------- [](#-contributing) Contributions are welcome! Please read [CONTRIBUTING.md](./CONTRIBUTING.md) for details. πŸ“„ License --------- [](#-license) MIT License - see [LICENSE](./LICENSE) for details. ### Health Score 31 β€” LowBetter than 68% of packages Maintenance73 Regular maintenance activity Popularity1 Limited adoption so far Community6 Small or concentrated contributor base Maturity38 Early-stage or recently created project Bus Factor1 Top contributor holds 100% of commits β€” single point of failure How is this calculated?**Maintenance (25%)** β€” Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** β€” Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** β€” Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** β€” Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~1 days Total 4 Last Release 180d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/edfdff3a42abef6d464c3dd32548c8c6d4d862f3ff25c8bf8ace10ce89d77d87?d=identicon)[Webcien](/maintainers/Webcien) --- Top Contributors [![webcien](https://avatars.githubusercontent.com/u/239297980?v=4)](https://github.com/webcien "webcien (4 commits)") --- Tags frameworkcssresponsivefrontendcss frameworkdark-modemobile-firstutility-firsttailwind-alternativekardocss ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/webcien-kardocss/health.svg) ``` [![Health](https://phpackages.com/badges/webcien-kardocss/health.svg)](https://phpackages.com/packages/webcien-kardocss) ``` ### Alternatives [twbs/bootstrap The most popular front-end framework for developing responsive, mobile first projects on the web. 174.1k17.6M325](/packages/twbs-bootstrap)[twitter/bootstrap The most popular front-end framework for developing responsive, mobile first projects on the web. 174.1k1.7M27](/packages/twitter-bootstrap)[zurb/foundation The most advanced responsive front-end framework in the world. 29.8k380.2k15](/packages/zurb-foundation)[foundation/foundation-sites The most advanced responsive front-end framework in the world. 29.8k8.4k](/packages/foundation-foundation-sites)[coreui/coreui The most popular front-end framework for developing responsive, mobile-first projects on the web rewritten and maintain by the CoreUI Team 873111.6k4](/packages/coreui-coreui)[components/bootstrap The most popular front-end framework for developing responsive, mobile first projects on the web. 932.8M62](/packages/components-bootstrap) PHPackages Β© 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)