包简介

Framework CSS moderno, mobile-first y ultra-ligero con Dark Mode y PurgeCSS integrados

README 文档

README

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

Español

🚀 What's New in v1.2.0

✨ 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

✨ 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)
📦 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)
📦 Composer Support - Install KardoCSS in PHP projects with composer require webcien/kardocss

✨ 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

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

Option 2: Composer (For PHP Projects)

composer require webcien/kardocss

Usage in PHP:

<?php
require_once __DIR__ . '/vendor/autoload.php';
use WebCien\KardoCSS\KardoCSS;
?>
<head>
    <?php echo KardoCSS::link(); ?>
</head>

📚 Full Guide: COMPOSER_GUIDE.md

Option 3: CDN (For HTML/CSS)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kardocss@latest/dist/kardocss.min.css">

Option 4: PyPI (For Python Customization)

pip install kardocss

🚀 Quick Start

Check out the examples/index.html file for a complete, professional example that demonstrates the framework's capabilities.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Site with KardoCSS</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kardocss@latest/dist/kardocss.min.css">
</head>
<body class="k-bg-gray-100 dark:k-bg-gray-900">
    <!-- Header -->
    <header class="k-bg-primary k-text-white k-py-8">
        <div class="k-container k-text-center">
            <h1 class="k-text-4xl k-font-bold">KardoCSS</h1>
            <p class="k-text-xl">Modern CSS Framework</p>
        </div>
    </header>

    <!-- Content -->
    <section class="k-py-12">
        <div class="k-container">
            <div class="k-grid k-grid-cols-1 md:k-grid-cols-3 k-gap-6">
                <div class="k-bg-white dark:k-bg-gray-800 k-p-6 k-rounded-lg k-shadow-md">
                    <h3 class="k-text-xl k-font-semibold k-mb-2 dark:k-text-white">Feature 1</h3>
                    <p class="k-text-gray-600 dark:k-text-gray-300">Card content.</p>
                </div>
                <!-- More cards... -->
            </div>
        </div>
    </section>
</body>
</html>

🎨 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

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

Contributions are welcome! Please read CONTRIBUTING.md for details.

📄 License

MIT License - see LICENSE for details.

webcien/kardocss 适用场景与选型建议

webcien/kardocss 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 1 次下载、GitHub Stars 达 0，最近一次更新时间为 2025 年 11 月 07 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「framework」「css」「responsive」「frontend」「mobile-first」「CSS-Framework」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 webcien/kardocss 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 webcien/kardocss 我们能提供哪些服务？

定制开发 / 二次开发

基于 webcien/kardocss 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 webcien/kardocss 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

phphleb/hleb 292

PHP Framework HLEB2 is the foundation of the web application. Provides ease of development and application performance.

nerds-and-company/css-to-inline-styles-twig-extension 3

A Twig extension to insert css as inline styles with a tag

odan/twig-assets 22

Caching and compression for Twig assets (JavaScript and CSS).

offline/responsiveimages-plugin 44

ResponsiveImages Plugin for October CMS

blueways/bw-email 0

TYPO3 extension for sending responsive email templates

codefareith/cf-beskin 0

Define your own css rule-sets for the TYPO3 CMS backend.

webcien/kardocss

包简介

关键字：