🎨 HUHM Framework

Un framework CSS moderno con sintaxis intuitiva y compilación JIT (Just-In-Time).

✨ Características

- 🚀 Compilación JIT - Solo genera el CSS que usas
- 📱 Responsive Design - Sintaxis simple para breakpoints
- 🎯 Valores Arbitrarios - Usa cualquier valor CSS
- ⚡ Rápido - Compilación instantánea
- 🔧 Configurable - Personaliza todo según tus necesidades
- 🔌 Plugins - Integración con Vite y PostCSS
- 🆕 Sintaxis con Pipes - Usa | además de []
- 📐 Clamp Automático - Valores fluidos con arrays
- 📱 Media Queries @ - Sintaxis moderna con @mobile, @tablets, etc
- 🧮 Calc Automático - Operaciones matemáticas detectadas automáticamente
- 🔗 Referencias a Elementos - Usa propiedades de otros elementos en calc
- 📋 Copiar Clases - Hereda clases de otros elementos
- 🎨 Colores Mejorados - Soporte RGB sin paréntesis

📦 Instalación

``bash npm install flexcss-framework`

`🚀 Inicio Rápido`

`$3`

`bash npx flexcss init`

Esto crea un archivo flexcss.config.js con valores por defecto.

`$3`

`bash

`Compilación única`


npx flexcss build
Modo watch (desarrollo)

npx flexcss watch

$3

`html`

`$3`

`html


  ¡Hola HUHM Framework!


📖 Sintaxis
$3

`html

$3

#### 1. Clamp - Valores Fluidos`html


  Ancho responsive fluido

#### 2. Media Queries con @`html


  Ancho responsive

#### 3. Clamp + Media Queries`html


  Clamp responsive

#### 4. Calc Automático`html


  Ancho calculado

#### 5. Referencias a Elementos`html

Sidebar


Contenido

#### 6. Copiar Clases`html

Original


Copia + modificación

✅ Referencias y Copiar Clases están integradas en HUHM.js

#### 7. Colores RGB Simplificados`html


  Se convierte automáticamente en rgb()

$3

`html

$3

- Phone- Máximo 767px -Tablet- 768px a 1023px -Computer- Desde 1024px -Desktop - Desde 1440px

`⚙️ Configuración`

`$3`

`javascript module.exports = { // Archivos a escanear content: [ './src/*/.{html,js,jsx,ts,tsx,vue}', './index.html' ],

// Archivo de salida output: './dist/HUHM.css',

// Breakpoints personalizados breakpoints: { 'Phone': '(max-width: 767px)', 'Tablet': '(min-width: 768px) and (max-width: 1023px)', 'Computer': '(min-width: 1024px)', },

// Propiedades CSS abreviadas properties: { 'w': 'width', 'h': 'height', 'p': 'padding', 'm': 'margin', 'bg': 'background', 'text': 'color', // ... más propiedades },

// Opciones del compilador compiler: { minify: true, comments: false, autoprefixer: true } };`

`🔌 Integración`

`$3`

`javascript // vite.config.js import flexcss from 'flexcss-framework/plugins/vite'

export default { plugins: [ flexcss() ] }`

`$3`

`javascript // postcss.config.js module.exports = { plugins: [ require('flexcss-framework/plugins/postcss') ] }`

`📝 Propiedades Disponibles`

| Abreviación | Propiedad CSS | |-------------|---------------| |w| width | |h| height | |p| padding | |pt| padding-top | |pr| padding-right | |pb| padding-bottom | |pl| padding-left | |m| margin | |mt| margin-top | |mr| margin-right | |mb| margin-bottom | |ml| margin-left | |bg| background | |text| color | |rounded| border-radius | |border | border-width |

`🎯 Ejemplos`

`$3`

`html


  
    Título
  

  
    Contenido

$3

`html


📚 Documentación Completa
Para ver todas las nuevas características en detalle con ejemplos completos, consulta:
- COMANDOS-RAPIDOS.md - ⚡ Referencia rápida de comandos para todos los entornos
- GUIA-INTEGRACION.md - 🚀 Cómo integrar HUHM en Node.js, Angular, React, Vue, etc.
- USO-HUHM-JS.md - 📦 Guía completa de HUHM.js (CSS References y Copy Classes)
- NUEVAS-CARACTERISTICAS.md - Documentación completa de todas las sintaxis nuevas
- QUICK-START.md - Guía rápida de inicio
🧪 Probar el Framework

`bash

`Inicializar configuración`


npx huhm init
Compilar una vez

npx huhm build
Modo watch (desarrollo)

npx huhm watch

🤝 Contribuir

¡Las contribuciones son bienvenidas! Por favor abre un issue o pull request.

📄 Licencia

🔗 Links

- Documentación
- NPM
- Issues