Framework CSS 100% Mobile-First, Modular y Optimizado

Navigation

Verified details

These details have been verified by PyPI
Maintainers
Avatar for Kardo from gravatar.com Kardo

Unverified details

These details have not been verified by PyPI
Project links
Meta
  • License: MIT License
  • Author: Juan Quezada
  • Requires: Python >=3.10
  • Provides-Extra: dev
Classifiers
Report project as malware

Project description

KardoCSS

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

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.

🆕 Novedades en v1.1.0

  • 🌓 Dark Mode Nativo - Soporte completo para modo oscuro automático y manual
  • 🧹 PurgeCSS Integrado - Tree-shaking automático que reduce el CSS hasta 90%
  • ♿ Accesibilidad Mejorada - Soporte para prefers-reduced-motion
  • 📚 Documentación Expandida - Guías completas de Dark Mode y PurgeCSS

✨ Características

  • 🎯 Utility-first - Clases utilitarias con prefijo k-
  • 🚀 Responsive Completo - Variantes responsive (sm:, md:, lg:, xl:, 2xl:)
  • 📱 Mobile-first - Diseño responsive desde el inicio
  • ⚡ Ultra-ligero - 98.4 KB minificado completo, ~8-12 KB con PurgeCSS
  • 🌓 Dark Mode - Modo oscuro automático y manual integrado
  • 🧹 PurgeCSS - Tree-shaking automático para producción
  • 🎨 Personalizable - Configuración flexible vía Python
  • 🔧 Modular - Código Python organizado por utilidades
  • 🚀 Sin dependencias - CSS puro generado desde Python
  • 📦 Pre-compilado - Archivos CSS listos para usar
  • 💻 Dos formas de uso - Pre-compilado o generado con Python
  • 🌐 CDN disponible - Usa desde jsDelivr sin instalación

📦 Instalación

Opción 1: Uso Directo (Recomendado para HTML/CSS)

Desde CDN (jsDelivr)

<!-- Versión minificada (recomendado) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/webcien/KardoCSS@main/dist/kardocss.min.css">

<!-- Versión completa (para desarrollo) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/webcien/KardoCSS@main/dist/kardocss.css">

Descarga Manual

  1. Descarga el archivo CSS:

  2. Incluye en tu HTML:

<link rel="stylesheet" href="kardocss.min.css">

Opción 2: Instalación con Python (Para Personalización)

git clone https://github.com/webcien/KardoCSS.git
cd KardoCSS
pip install -e .

🚀 Uso Rápido

Uso Directo con HTML

Revisa el archivo examples/index.html para ver un ejemplo completo y profesional que demuestra todas las capacidades del framework.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Sitio con KardoCSS</title>
    
    <!-- Incluir KardoCSS desde archivo local -->
    <link rel="stylesheet" href="../dist/kardocss.css">
</head>
<body class="k-bg-gray-100">
    <!-- Header -->
    <header class="k-bg-primary k-text-white k-py-8 md:k-py-12">
        <div class="k-container k-text-center">
            <h1 class="k-text-3xl md:k-text-4xl k-font-bold">KardoCSS</h1>
            <p class="k-text-lg md:k-text-xl">Framework CSS Mobile-First</p>
        </div>
    </header>

    <!-- Contenido -->
    <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 k-p-6 k-rounded-lg k-shadow-md">
                    <h3 class="k-text-xl k-font-semibold k-mb-2">Feature 1</h3>
                    <p>Contenido de la tarjeta.</p>
                </div>
                <div class="k-bg-white k-p-6 k-rounded-lg k-shadow-md">
                    <h3 class="k-text-xl k-font-semibold k-mb-2">Feature 2</h3>
                    <p>Contenido de la tarjeta.</p>
                </div>
                <div class="k-bg-white k-p-6 k-rounded-lg k-shadow-md">
                    <h3 class="k-text-xl k-font-semibold k-mb-2">Feature 3</h3>
                    <p>Contenido de la tarjeta.</p>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

Compilar CSS con Python

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)

📱 Sistema Responsive

KardoCSS es mobile-first. Las utilidades sin prefijo se aplican a todos los tamaños de pantalla, y puedes agregar prefijos de breakpoint para aplicar estilos en pantallas más grandes.

Breakpoints

Prefijo Breakpoint Descripción
sm: 640px Teléfonos grandes / Tablets pequeñas
md: 768px Tablets
lg: 1024px Laptops
xl: 1280px Desktops
2xl: 1536px Desktops grandes

Ejemplo de Uso Responsive

<!-- Apilado en mobile, 2 columnas en tablet, 4 en desktop -->
<div class="k-grid k-grid-cols-1 md:k-grid-cols-2 lg:k-grid-cols-4 k-gap-4">
    <!-- ... -->
</div>

<!-- Padding pequeño en mobile, más grande en desktop -->
<div class="k-p-4 md:k-p-8"></div>

<!-- Texto centrado en mobile, a la izquierda en desktop -->
<p class="k-text-center lg:k-text-left">Contenido</p>

🎨 Utilidades Disponibles

Layout

  • Container: k-container
  • Display: k-block, k-inline-block, k-flex, k-grid, k-hidden
  • Position: k-static, k-relative, k-absolute, k-fixed, k-sticky
  • Flexbox: k-flex-row, k-flex-col, k-flex-wrap, k-justify-*, k-items-*
  • Grid: k-grid-cols-*, k-grid-rows-*, k-col-span-*, k-gap-*
  • Overflow: k-overflow-auto, k-overflow-hidden, k-overflow-scroll
  • Visibility: k-visible, k-invisible

Spacing

  • Padding: k-p-*, k-px-*, k-py-*, k-pt-*, k-pr-*, k-pb-*, k-pl-*
  • Margin: k-m-*, k-mx-*, k-my-*, k-mt-*, k-mr-*, k-mb-*, k-ml-*
  • Tamaños: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32

Sizing

  • Width: k-w-*, k-w-full, k-w-screen, k-w-1/2, k-w-1/3, etc.
  • Height: k-h-*, k-h-full, k-h-screen
  • Max-Width: k-max-w-*, k-max-w-screen-*
  • Min-Width: k-min-w-full, k-min-w-min

Colors

  • Text: k-text-{color}
  • Background: k-bg-{color}
  • Border: k-border-{color}
  • Colores: primary, secondary, success, danger, warning, info, light, dark, white, black, gray-100 a gray-900

Typography

  • Font Size: k-text-xs, k-text-sm, k-text-base, k-text-lg a k-text-5xl
  • Font Weight: k-font-thin, k-font-normal, k-font-bold, k-font-black
  • Font Family: k-font-sans, k-font-serif, k-font-mono
  • Text Align: k-text-left, k-text-center, k-text-right, k-text-justify
  • Line Height: k-leading-none, k-leading-normal, k-leading-loose

Borders

  • Border Radius: k-rounded-sm, k-rounded, k-rounded-md, k-rounded-lg, k-rounded-full
  • Border Width: k-border, k-border-2, k-border-4, k-border-8
  • Border Style: k-border-solid, k-border-dashed, k-border-dotted

Transiciones y Animaciones

  • Transiciones: k-transition, k-transition-all, k-transition-colors, k-transition-opacity, k-transition-shadow, k-transition-transform, k-transition-none
  • Duración: k-duration-75 a k-duration-1000
  • Easing: k-ease-linear, k-ease-in, k-ease-out, k-ease-in-out, k-ease-bounce, k-ease-back-in, k-ease-back-out, k-ease-back-in-out
  • Delay: k-delay-75 a k-delay-1000
  • Animaciones: k-animate-spin, k-animate-ping, k-animate-pulse, k-animate-bounce, k-animate-fade-in, k-animate-slide-in-up, k-animate-slide-in-down

📚 Guía completa: TRANSITIONS_GUIDE.md

Otros Efectos

  • Box Shadow: k-shadow-sm, k-shadow, k-shadow-md, k-shadow-lg, k-shadow-xl
  • Opacity: k-opacity-0, k-opacity-25, k-opacity-50, k-opacity-75, k-opacity-100
  • Transitions: k-transition, k-transition-all, k-duration-*, k-ease-*
  • Animations: k-animate-spin, k-animate-ping, k-animate-pulse, k-animate-bounce

Formularios Modernos

  • k-input, k-textarea, k-select, k-checkbox, k-radio, k-btn, k-btn-primary, etc.

Componentes

  • Badges: k-badge, k-badge-primary, k-badge-outline-*
  • Gradientes: k-gradient-primary, k-gradient-sunset, etc.

Todas las utilidades principales tienen variantes responsive y soporte para dark mode.

Dark Mode

  • Backgrounds: dark:k-bg-primary, dark:k-bg-gray-900, etc.
  • Text: dark:k-text-white, dark:k-text-gray-100, etc.
  • Borders: dark:k-border-gray-700, etc.
  • Modo automático: Respeta prefers-color-scheme
  • Modo manual: Toggle con clase .dark en <html>

Ejemplo:

<div class="k-bg-white dark:k-bg-gray-900 k-text-gray-900 dark:k-text-white">
  Contenido que se adapta automáticamente
</div>

📚 Guía completa: DARK_MODE_GUIDE.md

PurgeCSS

Reduce el tamaño del CSS en producción eliminando clases no utilizadas:

from kardocss.compiler import KardoCSSCompiler

compiler = KardoCSSCompiler()
css = compiler.compile(
    minify=True,
    purge=['**/*.html', '**/*.jsx']
)

Resultado: 98.4 KB → ~8-12 KB (reducción de 80-90%)

📚 Guía completa: PURGE_GUIDE.md

📊 Tamaño del Framework

Versión Tamaño Gzipped (Estimado) Con PurgeCSS
kardocss.css 120.9 KB ~22 KB N/A
kardocss.min.css 98.4 KB ~17 KB ~8-12 KB

🗺️ Roadmap

  • Utilidades básicas (spacing, colors, typography)
  • Sistema de layout (flex, grid)
  • Borders y sizing
  • Formularios modernos
  • Sistema de badges y gradientes
  • Archivos CSS pre-compilados y CDN
  • Sistema responsive completo
  • Utilidades de efectos (shadows, transitions, animations)
  • Clase k-container responsive
  • Utilidades de max-width
  • Dark mode nativo (v1.1.0)
  • PurgeCSS integrado (v1.1.0)
  • Soporte para prefers-reduced-motion (v1.1.0)
  • CLI mejorado para compilación
  • Container queries
  • Aspect ratio utilities
  • Plugin para PostCSS
  • Más animaciones y transiciones

🤝 Contribuir

Las contribuciones son bienvenidas. Por favor lee CONTRIBUTING.md para detalles.

📄 Licencia

MIT License - ver LICENSE para detalles.

KardoCSS - Framework CSS moderno y ultra-ligero 🎨

Project details

Verified details

These details have been verified by PyPI
Maintainers
Avatar for Kardo from gravatar.com Kardo

Unverified details

These details have not been verified by PyPI
Project links
Meta
  • License: MIT License
  • Author: Juan Quezada
  • Requires: Python >=3.10
  • Provides-Extra: dev
Classifiers

Release history Release notifications | RSS feed

1.2.0

1.1.4

1.1.3

1.1.2

This version

1.1.1

1.1.0

1.0.0

0.1.0a0 pre-release

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

kardocss-1.1.1.tar.gz (81.7 kB view details)

Uploaded Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

kardocss-1.1.1-py3-none-any.whl (37.1 kB view details)

Uploaded Python 3

File details

Details for the file kardocss-1.1.1.tar.gz.

File metadata

  • Download URL: kardocss-1.1.1.tar.gz
  • Upload date:
  • Size: 81.7 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/6.2.0 CPython/3.12.7

File hashes

Hashes for kardocss-1.1.1.tar.gz
Algorithm Hash digest
SHA256 b5390e77ae0dba087785ef3e40269f1a76baafecbe048731cebd1ebda9fa20ef
MD5 48a83017afbc34f71b679ea75a6271c5
BLAKE2b-256 cfa7089fd6dae0eebb25f864dbcbd94e098e309b5ab989cd9b76b1dd42c14454

See more details on using hashes here.

File details

Details for the file kardocss-1.1.1-py3-none-any.whl.

File metadata

  • Download URL: kardocss-1.1.1-py3-none-any.whl
  • Upload date:
  • Size: 37.1 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/6.2.0 CPython/3.12.7

File hashes

Hashes for kardocss-1.1.1-py3-none-any.whl
Algorithm Hash digest
SHA256 742312099ff8e8b0d4d49f589803ff0f1015c4cb11b32605bd8dc75e48ebd5f8
MD5 314b7434ae86ee9f95dbda160660efd3
BLAKE2b-256 ccd9287194360fd1391c40a9551e5c917b08a7afe8761699f0c87fd6c20203d4

See more details on using hashes here.

Supported by

AWS Cloud computing and Security Sponsor Datadog Monitoring Depot Continuous Integration Fastly CDN Google Download Analytics Pingdom Monitoring Sentry Error logging StatusPage Status page