Framework CSS moderno con sintaxis intuitiva y compilación JIT
npm install huhmUn framework CSS moderno con sintaxis intuitiva y compilación JIT (Just-In-Time).
- 🚀 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
``bash`
npm install flexcss-framework
`bash`
npx flexcss init
Esto crea un archivo flexcss.config.js con valores por defecto.
`bashCompilación única
npx flexcss build
$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
`#### 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 initCompilar una vez
npx huhm buildModo watch (desarrollo)
npx huhm watch
``🤝 Contribuir
¡Las contribuciones son bienvenidas! Por favor abre un issue o pull request.
📄 Licencia
MIT © Hugo Ubaldo Hernández Murillo
🔗 Links
- Documentación
- NPM
- Issues