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

Effects

  • 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

1.1.1

This version

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.0.tar.gz (78.4 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.0-py3-none-any.whl (36.8 kB view details)

Uploaded Python 3

File details

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

File metadata

  • Download URL: kardocss-1.1.0.tar.gz
  • Upload date:
  • Size: 78.4 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.0.tar.gz
Algorithm Hash digest
SHA256 bed6c0690d79b18e6d7213f0b90bf287b64b35748defb83732fcce5dd057c223
MD5 855782ad0268f5775e5e5a5428340542
BLAKE2b-256 ead733e35c542c43afc5a7b9dbf3a8b923b438c5fab8596da08e58109a674dd0

See more details on using hashes here.

File details

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

File metadata

  • Download URL: kardocss-1.1.0-py3-none-any.whl
  • Upload date:
  • Size: 36.8 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.0-py3-none-any.whl
Algorithm Hash digest
SHA256 2c36446335a424c7c677b988804a02f3611074a1d267cf0f117256dfafac96a4
MD5 90cac49434ca14d3f025452e7e42808c
BLAKE2b-256 85dbd14c740255e474873a3387a8f5be69e990b3d68fd1fdea5c96cb513b57bc

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