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 variantes responsive completas

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-
  • 🚀 Responsive Completo - Variantes responsive (sm:, md:, lg:, xl:, 2xl:)
  • 📱 Mobile-first - Diseño responsive desde el inicio
  • ⚡ Ultra-ligero - Solo 87.8 KB minificado con todas las utilidades
  • 🎨 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.

📊 Tamaño del Framework

Versión Tamaño Gzipped (Estimado)
kardocss.css 108.0 KB ~20 KB
kardocss.min.css 87.8 KB ~15 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 utilities
  • Purge CSS automático (para producción)
  • CLI para compilación
  • 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

1.1.0

This version

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.0.0.tar.gz (67.2 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.0.0-py3-none-any.whl (31.3 kB view details)

Uploaded Python 3

File details

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

File metadata

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

File hashes

Hashes for kardocss-1.0.0.tar.gz
Algorithm Hash digest
SHA256 f06131814649f0ad7e7e830e3ada014af163249d16aa91e1b677cec2311ff72d
MD5 33f2d6162bdffcef5f10c036ef7a9159
BLAKE2b-256 1d2ac6879fd6199dc0cc292980f4812cf5de63c134ccae275a886e58260b5414

See more details on using hashes here.

File details

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

File metadata

  • Download URL: kardocss-1.0.0-py3-none-any.whl
  • Upload date:
  • Size: 31.3 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.0.0-py3-none-any.whl
Algorithm Hash digest
SHA256 2636ee26924174304a998224dabfe669b847a5125ba67fa92f962c7f33be98df
MD5 e21a5b6b42aaef57efdeb41d77d5220e
BLAKE2b-256 582be61c7de24068817768b5b90de5f3f2eab03d130ae6735aa60f9222f3b5f7

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