Framework CSS 100% Mobile-First, Modular y Optimizado
Project description
KardoCSS
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
🚀 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.
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Filter files by name, interpreter, ABI, and platform.
If you're not sure about the file name format, learn more about wheel file names.
Copy a direct link to the current filters
File details
Details for the file kardocss-1.2.0.tar.gz.
File metadata
- Download URL: kardocss-1.2.0.tar.gz
- Upload date:
- Size: 84.2 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.2.0 CPython/3.11.0rc1
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
6f2a14238fe1c0d5807469fa21223401c1e58af8642ddd7319181b2700ddd46e
|
|
| MD5 |
5999c352efe417137e5e188b668f5ecb
|
|
| BLAKE2b-256 |
fe7453b4d473458afe3e3812a787f32b68ed5ab4e00fe75d6a51263fb70b682b
|
File details
Details for the file kardocss-1.2.0-py3-none-any.whl.
File metadata
- Download URL: kardocss-1.2.0-py3-none-any.whl
- Upload date:
- Size: 38.4 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.2.0 CPython/3.11.0rc1
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
9d139befffec01ec0e78c6f18770e68c0b10d8969f45698ce6d8971282d91e61
|
|
| MD5 |
5c543a6dc395af3f6d7b84f0a2852313
|
|
| BLAKE2b-256 |
fb4580c4111584f9d52c10691ba88732de89fbab773992dfbb4140d5644af294
|
