Framework CSS 100% Mobile-First, Modular y Optimizado
Project description
KardoCSS
Framework CSS moderno, mobile-first y ultra-ligero
KardoCSS es un framework CSS utility-first inspirado en Tailwind, pero diseñado para ser más ligero, modular y fácil de personalizar. Perfecto para proyectos que necesitan un CSS minimalista sin sacrificar funcionalidad.
✨ Características
- 🎯 Utility-first - Clases utilitarias con prefijo
k- - 📱 Mobile-first - Diseño responsive desde el inicio
- ⚡ Ultra-ligero - Solo 24.7 KB minificado con todas las utilidades
- 🎨 Personalizable - Configuración flexible vía Python
- 🔧 Modular - Importa solo lo que necesitas
- 🚀 Sin dependencias - CSS puro generado desde Python
- 📦 50+ utilidades de formularios - Inputs, selects, checkboxes modernos
- 🎨 Sistema de badges - Badges con 8 variantes de color
- 🌈 Gradientes predefinidos - 12 gradientes listos para usar
📦 Instalación
pip install kardocss
O desde el código fuente:
git clone https://github.com/webcien/KardoCSS.git
cd KardoCSS
pip install -e .
🚀 Uso Rápido
Compilar CSS
from kardocss.compiler import KardoCSSCompiler
compiler = KardoCSSCompiler()
# Compilar CSS completo
css = compiler.compile()
# Compilar y minificar
css_min = compiler.compile(minify=True)
# Guardar en archivo
with open('kardocss.min.css', 'w') as f:
f.write(css_min)
Usar en HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="kardocss.min.css">
</head>
<body>
<!-- Spacing -->
<div class="k-p-4 k-m-2">
<h1 class="k-text-3xl k-font-bold k-text-blue">KardoCSS</h1>
</div>
<!-- Formularios modernos -->
<form class="k-p-4">
<input type="text" class="k-input" placeholder="Tu nombre">
<select class="k-select">
<option>Opción 1</option>
<option>Opción 2</option>
</select>
<button class="k-btn k-btn-primary">Enviar</button>
</form>
<!-- Badges -->
<span class="k-badge k-badge-primary">Nuevo</span>
<span class="k-badge k-badge-success">Activo</span>
<span class="k-badge k-badge-warning">Pendiente</span>
<!-- Gradientes -->
<div class="k-gradient-sunset k-p-8 k-rounded-lg">
<h2 class="k-text-white">Hermoso gradiente</h2>
</div>
<!-- Layout -->
<div class="k-flex k-justify-between k-items-center">
<div class="k-w-1/2">Columna 1</div>
<div class="k-w-1/2">Columna 2</div>
</div>
</body>
</html>
🎨 Utilidades Disponibles
Spacing (Margin y Padding)
k-p-{size} /* padding en todos los lados */
k-px-{size} /* padding horizontal */
k-py-{size} /* padding vertical */
k-pt-{size} /* padding-top */
k-pr-{size} /* padding-right */
k-pb-{size} /* padding-bottom */
k-pl-{size} /* padding-left */
k-m-{size} /* margin en todos los lados */
k-mx-{size} /* margin horizontal */
k-my-{size} /* margin vertical */
k-mt-{size} /* margin-top */
k-mr-{size} /* margin-right */
k-mb-{size} /* margin-bottom */
k-ml-{size} /* margin-left */
k-mx-auto /* margin horizontal auto (centrar) */
Tamaños disponibles: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64
Colors
k-text-{color} /* color de texto */
k-bg-{color} /* color de fondo */
k-border-{color} /* color de borde */
Colores disponibles: primary, secondary, success, danger, warning, info, light, dark, white, black, gray, blue, red, green, yellow
Typography
k-text-{size} /* tamaño de fuente */
k-font-{weight} /* peso de fuente */
k-font-{family} /* familia de fuente */
k-text-{align} /* alineación de texto */
k-leading-{value} /* line-height */
Layout
k-flex /* display: flex */
k-grid /* display: grid */
k-block /* display: block */
k-inline-block /* display: inline-block */
k-hidden /* display: none */
k-justify-{value} /* justify-content */
k-items-{value} /* align-items */
k-flex-{direction} /* flex-direction */
k-gap-{size} /* gap */
Formularios Modernos (Nuevo en v0.1.0)
k-input /* Input moderno con focus states */
k-textarea /* Textarea con auto-resize */
k-select /* Select estilizado */
k-checkbox /* Checkbox personalizado */
k-radio /* Radio button personalizado */
k-switch /* Toggle switch */
k-input-group /* Grupo de inputs */
k-form-label /* Label de formulario */
k-form-error /* Mensaje de error */
k-form-help /* Texto de ayuda */
k-input-icon /* Input con icono */
k-input-loading /* Estado de carga */
Badges (Nuevo en v0.1.0)
k-badge /* Badge base */
k-badge-primary /* Badge azul */
k-badge-secondary /* Badge gris */
k-badge-success /* Badge verde */
k-badge-danger /* Badge rojo */
k-badge-warning /* Badge amarillo */
k-badge-info /* Badge cyan */
k-badge-light /* Badge claro */
k-badge-dark /* Badge oscuro */
k-badge-outline-{color} /* Badge con borde */
Gradientes (Nuevo en v0.1.0)
k-gradient-primary /* Azul a índigo */
k-gradient-sunset /* Naranja a rosa */
k-gradient-ocean /* Azul a verde */
k-gradient-fire /* Rojo a naranja */
k-gradient-purple /* Púrpura a rosa */
k-gradient-green /* Verde a cyan */
k-gradient-warm /* Amarillo a rojo */
k-gradient-cool /* Azul a púrpura */
k-gradient-night /* Oscuro a azul */
k-gradient-dawn /* Rosa a amarillo */
k-gradient-forest /* Verde oscuro a claro */
k-gradient-sky /* Azul claro a blanco */
Borders
k-border /* border: 1px solid */
k-border-{side} /* border en un lado */
k-border-{width} /* grosor de borde */
k-rounded-{size} /* border-radius */
Sizing
k-w-{size} /* width */
k-h-{size} /* height */
k-w-full /* width: 100% */
k-h-full /* height: 100% */
k-w-screen /* width: 100vw */
k-h-screen /* height: 100vh */
⚙️ Configuración Personalizada
from kardocss.core.config import KardoCSSConfig
from kardocss.compiler import KardoCSSCompiler
# Crear configuración personalizada
config = KardoCSSConfig()
config.set('prefix', 'mi-') # Cambiar prefijo de k- a mi-
config.set('colors.primary', '#ff6b6b') # Color primario personalizado
# Compilar con configuración personalizada
compiler = KardoCSSCompiler(config)
css = compiler.compile()
📊 Tamaño del Framework
| Versión | Tamaño | Gzipped |
|---|---|---|
| kardocss.css | 32 KB | ~6 KB |
| kardocss.min.css | 24.7 KB | ~5 KB |
🗺️ Roadmap
- Utilidades básicas (spacing, colors, typography)
- Sistema de layout (flex, grid)
- Borders y sizing
- Utilidades de formularios modernos
- Sistema de badges
- Gradientes predefinidos
- Animaciones y transiciones
- Utilidades de shadow y effects
- Sistema de grid avanzado
- Dark mode utilities
- Purge CSS automático
- CLI para compilación
- Plugin para PostCSS
🤝 Contribuir
Las contribuciones son bienvenidas. Por favor lee CONTRIBUTING.md para detalles.
📄 Licencia
MIT License - ver LICENSE para detalles.
👥 Autor
WebCien Team
- GitHub: @webcien
🌟 Inspiración
Inspirado por Tailwind CSS, pero diseñado para ser más ligero y fácil de personalizar desde Python.
KardoCSS - Framework CSS moderno y ultra-ligero 🎨
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
kardocss-0.1.0a0.tar.gz
(23.5 kB
view details)
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-0.1.0a0.tar.gz.
File metadata
- Download URL: kardocss-0.1.0a0.tar.gz
- Upload date:
- Size: 23.5 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.2.0 CPython/3.12.7
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
35c79a6a49eb5d26f25ec4034504e19bacff4969856ab3e1ac4b93b77deb4c0d
|
|
| MD5 |
2a9fa5831a31ae25f7105d79e9cb0a3d
|
|
| BLAKE2b-256 |
33cec72be9c8953e2c8207ca594fcb20c05863993556458abb96a85aba93cc40
|
File details
Details for the file kardocss-0.1.0a0-py3-none-any.whl.
File metadata
- Download URL: kardocss-0.1.0a0-py3-none-any.whl
- Upload date:
- Size: 26.6 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.2.0 CPython/3.12.7
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
8f074c5eeab01dafa9db780be81be9d36b7e0fbdd63ba4a89dc188bab666fc50
|
|
| MD5 |
1ce60930622ece488299fcb665c9d5f6
|
|
| BLAKE2b-256 |
0da36f36352e02439538459bc282fbf9505282e7b930b0d184b5108c8ac46a91
|
