holygrail5 1.0.5 → 1.0.6

package/README.md

@@ -578,4 +578,471 @@ Para desplegar en GitHub Pages, puedes:
 
 ---
 
+## 🚀 ¿Por qué HolyGrail5? Evolución desde HolyGrail CSS (SASS)
+
+### El Problema con SASS
+
+HolyGrail CSS original se basaba en **SASS/SCSS**, lo que presentaba varios desafíos:
+
+#### Limitaciones de SASS
+
+1. **Dependencia de compilación**: Requiere herramientas de build (Gulp, Webpack, etc.) y procesos de compilación
+2. **Curva de aprendizaje**: Necesitas conocer SASS/SCSS para personalizar
+3. **Configuración compleja**: Variables SASS dispersas en múltiples archivos
+4. **Sin documentación automática**: No genera guías visuales de las clases disponibles
+5. **Mantenimiento manual**: Cambios en variables requieren editar código SASS directamente
+6. **Sin historial**: No hay gestión automática de variables no usadas
+7. **Menos portable**: Depende del ecosistema SASS y sus herramientas
+
+### La Solución: HolyGrail5
+
+HolyGrail5 nace de la necesidad de **simplificar, modernizar y potenciar** el framework original.
+
+#### Ventajas Clave de HolyGrail5
+
+##### 1. **Configuración Declarativa con JSON**
+
+**Antes (SASS):**
+```scss
+// Variables dispersas en múltiples archivos
+$font-size-mobile: 18px;
+$font-size-desktop: 24px;
+$spacing-16: 16px;
+// ... más variables en diferentes archivos
+```
+
+**Ahora (JSON):**
+```json
+{
+  "classes": {
+    "h2": {
+      "mobile": { "fontSize": "18px" },
+      "desktop": { "fontSize": "24px" }
+    }
+  },
+  "spacingMap": { "16": "16px" }
+}
+```
+
+✅ **Ventaja**: Todo en un solo archivo, fácil de entender y modificar
+
+##### 2. **Sin Dependencias de Build Complejas**
+
+**Antes (SASS):**
+- Requiere Gulp/Webpack/Grunt
+- Configuración de compilación
+- Dependencias de Node.js específicas
+- Procesos de build complejos
+
+**Ahora (HolyGrail5):**
+```bash
+npm run generate
+# ¡Listo! CSS generado
+```
+
+✅ **Ventaja**: Un solo comando, sin configuración de build
+
+##### 3. **Guía Interactiva Automática**
+
+**Antes (SASS):**
+- Documentación manual
+- Sin preview visual
+- Difícil saber qué clases están disponibles
+
+**Ahora (HolyGrail5):**
+- Guía HTML generada automáticamente
+- Preview visual de todas las clases
+- Búsqueda en tiempo real
+- Detección de cambios
+
+✅ **Ventaja**: Documentación siempre actualizada y visual
+
+##### 4. **Gestión Inteligente de Variables**
+
+**Antes (SASS):**
+- Variables se eliminan si no se usan
+- Puede romper CSS personalizado
+- Sin historial
+
+**Ahora (HolyGrail5):**
+- Historial persistente de variables
+- Nunca se eliminan automáticamente
+- Comandos para gestionar variables no usadas
+- Protege tu CSS personalizado
+
+✅ **Ventaja**: Seguridad y control total sobre las variables
+
+##### 5. **Variables CSS Nativas (No SASS)**
+
+**Antes (SASS):**
+```scss
+// Variables SASS (solo en compilación)
+$primary-color: #000000;
+.my-class {
+  color: $primary-color; // Compilado a CSS estático
+}
+```
+
+**Ahora (HolyGrail5):**
+```css
+/* Variables CSS nativas (runtime) */
+:root {
+  --hg-color-primary: #000000;
+}
+.my-class {
+  color: var(--hg-color-primary); // Cambiable en runtime
+}
+```
+
+✅ **Ventaja**: Variables CSS nativas, modificables en runtime, mejor rendimiento
+
+##### 6. **Optimización Automática**
+
+**Antes (SASS):**
+- Duplicación de valores en múltiples lugares
+- CSS más pesado
+- Sin deduplicación automática
+
+**Ahora (HolyGrail5):**
+- Variables compartidas automáticamente
+- Un valor único → una variable CSS
+- CSS más pequeño y eficiente
+
+✅ **Ventaja**: CSS optimizado automáticamente, menos código
+
+##### 7. **Modo Watch Integrado**
+
+**Antes (SASS):**
+- Requiere configurar watch en Gulp/Webpack
+- Configuración adicional necesaria
+
+**Ahora (HolyGrail5):**
+```bash
+npm run watch
+# Regenera automáticamente al cambiar config.json
+```
+
+✅ **Ventaja**: Watch listo para usar, sin configuración
+
+##### 8. **Portabilidad y Simplicidad**
+
+**Antes (SASS):**
+- Múltiples archivos SASS
+- Estructura compleja
+- Dependencias de herramientas de build
+
+**Ahora (HolyGrail5):**
+- Un solo archivo JSON de configuración
+- Estructura simple y clara
+- Solo Node.js (sin SASS, Gulp, etc.)
+
+✅ **Ventaja**: Más fácil de entender, mantener y compartir
+
+##### 9. **Mejor para Equipos**
+
+**Antes (SASS):**
+- Solo desarrolladores que conocen SASS pueden modificar
+- Cambios requieren conocimiento técnico
+
+**Ahora (HolyGrail5):**
+- Cualquiera puede editar JSON
+- Cambios visibles inmediatamente
+- Menos barrera de entrada
+
+✅ **Ventaja**: Colaboración más fácil, menos dependencia de desarrolladores
+
+##### 10. **Ecosistema Moderno**
+
+**Antes (SASS):**
+- Tecnología más antigua
+- Menos integración con herramientas modernas
+- Ecosistema SASS en declive
+
+**Ahora (HolyGrail5):**
+- Tecnología moderna (Node.js, JSON, CSS Variables)
+- Mejor integración con herramientas actuales
+- Alineado con estándares web modernos
+
+✅ **Ventaja**: Framework preparado para el futuro
+
+##### 11. **Separación de Componentes y Flexibilidad**
+
+**Antes (HolyGrail CSS con Angular):**
+- Framework acoplado a Angular
+- Componentes incluidos (botones, cards, etc.) que aumentaban el peso
+- CSS pesado con estilos de componentes que no siempre se usaban
+- Difícil integrar otras librerías de componentes
+- Dependencia de Angular y sus componentes
+
+**Ahora (HolyGrail5):**
+- **Solo CSS puro**: Sin dependencias de frameworks
+- **Sin componentes incluidos**: Solo clases de utilidad y layout
+- **CSS ligero**: Solo lo esencial (tipografía, spacing, layout, grid)
+- **Integración flexible**: Puedes usar cualquier librería de componentes
+- **Compatible con MDS de Inditex**: Diseñado para trabajar junto con sistemas de componentes externos
+
+✅ **Ventaja**: Framework ligero, flexible y compatible con cualquier librería de componentes
+
+##### 12. **Maquetación con IA**
+
+**Antes (SASS + Angular):**
+- Estructura compleja difícil de entender para IA
+- Código SASS disperso
+- Componentes acoplados
+- Difícil generar código automáticamente
+
+**Ahora (HolyGrail5):**
+- **Configuración JSON clara**: Fácil de entender y generar por IA
+- **Clases semánticas**: Nomenclatura clara y predecible
+- **Superprompt disponible**: Guía completa para que IA genere código correcto
+- **Estructura simple**: Patrones claros y repetibles
+
+✅ **Ventaja**: Perfecto para maquetación asistida por IA, generación automática de código
+
+### Separación de Responsabilidades
+
+HolyGrail5 adopta una **filosofía de separación de responsabilidades**:
+
+#### Lo que INCLUYE HolyGrail5:
+- ✅ Sistema de tipografía
+- ✅ Helpers de spacing (padding, margin)
+- ✅ Helpers de layout (flexbox, grid)
+- ✅ Sistema de grid responsive
+- ✅ Variables CSS para colores
+- ✅ Reset CSS mínimo
+
+#### Lo que NO incluye (y por qué es mejor):
+- ❌ Componentes UI (botones, cards, modales, etc.)
+- ❌ Estilos de formularios
+- ❌ Estilos de navegación
+- ❌ Estilos específicos de Angular/React/Vue
+
+**Razón**: Esto permite:
+1. **Usar MDS de Inditex** u otras librerías de componentes sin conflictos
+2. **CSS más ligero**: Solo lo esencial
+3. **Flexibilidad total**: Eliges tus propios componentes
+4. **Mejor mantenimiento**: Cada cosa en su lugar
+
+### Integración con MDS de Inditex
+
+HolyGrail5 está diseñado para trabajar **perfectamente** junto con MDS (Massimo Dutti System) de Inditex:
+
+```html
+<!-- Usa HolyGrail5 para layout y spacing -->
+<div class="row">
+  <div class="col-xs-12 col-md-6">
+    <!-- Usa componentes MDS para UI -->
+    <mds-button variant="primary">Botón MDS</mds-button>
+  </div>
+</div>
+```
+
+**Ventajas de esta combinación:**
+- ✅ HolyGrail5 maneja el layout y estructura
+- ✅ MDS proporciona los componentes UI
+- ✅ Sin conflictos de estilos
+- ✅ Mejor de ambos mundos
+
+### Maquetación con IA
+
+HolyGrail5 es **ideal para maquetación asistida por IA** gracias a:
+
+1. **Superprompt disponible**: Guía completa (`SUPERPROMPT.md`) que permite a la IA entender el sistema
+2. **Nomenclatura clara**: Clases predecibles y semánticas
+3. **Patrones simples**: Estructura fácil de seguir
+4. **Configuración JSON**: Fácil de generar y modificar automáticamente
+
+**Ejemplo de uso con IA:**
+```
+Prompt: "Crea una página de restaurante con header, hero, menú de platos y footer usando HolyGrail5"
+
+La IA puede:
+- Consultar SUPERPROMPT.md para entender las clases
+- Generar HTML con las clases correctas
+- Usar el grid system apropiado
+- Aplicar spacing y layout helpers correctamente
+```
+
+✅ **Ventaja**: Acelera el desarrollo con generación automática de código
+
+### Comparación Directa
+
+| Característica | HolyGrail CSS (SASS) | HolyGrail5 | ¿Por qué HolyGrail5 es mejor? |
+|----------------|----------------------|------------|------------------------------|
+| **Configuración** | Múltiples archivos SASS dispersos | Un solo archivo JSON (`config.json`) | ✅ **Simplicidad**: Todo en un lugar, fácil de entender y modificar |
+| **Compilación** | Requiere Gulp/Webpack y configuración compleja | `npm run generate` (comando simple) | ✅ **Sin complejidad**: No necesitas configurar build tools |
+| **Variables** | Variables SASS (compiladas, estáticas) | Variables CSS nativas (runtime, dinámicas) | ✅ **Flexibilidad**: Puedes cambiar valores en runtime con JavaScript |
+| **Documentación** | Manual, requiere mantenimiento | Automática (HTML interactivo generado) | ✅ **Siempre actualizada**: Se genera automáticamente desde la configuración |
+| **Gestión de variables** | Manual, propenso a errores | Automática con historial y herramientas CLI | ✅ **Seguridad**: Herramientas para detectar y eliminar variables no usadas |
+| **Curva de aprendizaje** | Media-Alta (requiere conocer SASS) | Baja (solo JSON, fácil de entender) | ✅ **Accesibilidad**: Cualquiera puede editar sin conocimientos técnicos avanzados |
+| **Portabilidad** | Media (depende de SASS y build tools) | Alta (solo Node.js, sin dependencias complejas) | ✅ **Fácil de mover**: Menos dependencias, más portable |
+| **Optimización** | Manual (debes optimizar tú mismo) | Automática (elimina código no usado) | ✅ **Rendimiento**: CSS más pequeño automáticamente |
+| **Watch mode** | Requiere configuración en Gulp/Webpack | Integrado (`npm run watch`) | ✅ **Desarrollo rápido**: Watch mode listo para usar |
+| **Accesibilidad** | Solo desarrolladores con conocimientos SASS | Cualquiera puede editar (diseñadores, PMs, etc.) | ✅ **Colaboración**: Más personas pueden contribuir |
+| **Componentes** | Incluidos (botones, cards, modales, etc.) | Separados (solo utilidades) | ✅ **Ligereza**: No incluye código que no uses |
+| **Peso CSS** | Pesado (cientos de clases de componentes) | Ligero (solo utilidades esenciales) | ✅ **Rendimiento**: CSS más pequeño = páginas más rápidas |
+| **Integración** | Acoplado a Angular | Compatible con cualquier librería | ✅ **Flexibilidad**: Puedes usar MDS, Material, Bootstrap, etc. |
+| **Maquetación IA** | Difícil (estructura compleja) | Optimizado (JSON claro, superprompt) | ✅ **Futuro**: Perfecto para generación automática de código |
+
+### Casos de Uso Ideales para HolyGrail5
+
+✅ **Perfecto para:**
+- Proyectos que buscan simplicidad
+- Equipos con diferentes niveles técnicos
+- Proyectos que necesitan documentación automática
+- Aplicaciones que requieren variables CSS en runtime
+- Proyectos que quieren evitar dependencias de build complejas
+- Design systems que necesitan mantenimiento fácil
+- **Proyectos que usan MDS de Inditex u otras librerías de componentes**
+- **Maquetación asistida por IA**
+- **Proyectos que necesitan CSS ligero sin componentes incluidos**
+
+### Migración desde HolyGrail CSS (SASS)
+
+Si vienes de HolyGrail CSS (SASS), la migración es sencilla:
+
+1. **Extrae tus variables SASS** → Conviértelas a `config.json`
+2. **Mantén tus clases HTML** → Son compatibles
+3. **Regenera el CSS** → `npm run generate`
+4. **Disfruta de las nuevas características** → Guía interactiva, watch mode, etc.
+
+### Arquitectura Ligera y Flexible
+
+#### El Problema del Framework Anterior
+
+El framework original (HolyGrail CSS) incluía:
+- **Componentes de Angular**: Botones, cards, modales, etc.
+- **CSS pesado**: Estilos de componentes que no siempre se necesitaban
+- **Acoplamiento**: Dependencia de Angular y sus componentes
+- **Poco flexible**: Difícil usar otras librerías de componentes
+
+**Ejemplos de clases incluidas en el framework antiguo (que aumentaban el peso):**
+```css
+/* Formularios acoplados a Angular */
+.form-input-label-2
+.form-input-label-2.has-ico-pre
+.form-input-label-2.has-ico-post
+.validation-error-messages
+
+/* Botones y links específicos */
+.btn
+.link-line
+.link-svg-pre
+.link-svg-post
+
+/* Componentes de navegación */
+.header-account-back
+.mn-mainmenu
+.mn-mainbar
+.tabs-mini
+
+/* Componentes UI */
+.tooltip-sm
+.toast
+.md-accordion
+.md-toggle
+.bottom-sheet
+.tag-product
+.list-state
+
+/* Soporte RTL específico */
+.is-rtl .form-input-label-2
+.is-rtl .btn
+.is-rtl .tooltip-sm
+/* ... y cientos más */
+```
+
+**Problema**: Estas clases ocupaban espacio en el CSS final aunque no se usaran, y creaban conflictos al intentar usar otras librerías de componentes como MDS.
+
+#### La Solución: Separación de Responsabilidades
+
+HolyGrail5 adopta el principio de **"hacer una cosa y hacerla bien"**:
+
+**HolyGrail5 se enfoca en:**
+- Layout y estructura (grid, flexbox)
+- Spacing y tipografía
+- Variables CSS compartidas
+- Helpers de utilidad
+
+**NO incluye:**
+- Componentes UI (botones, cards, etc.)
+- Estilos de formularios
+- Estilos específicos de frameworks
+
+**Resultado:**
+- ✅ CSS más ligero (solo lo esencial)
+- ✅ Compatible con MDS de Inditex
+- ✅ Compatible con cualquier librería de componentes
+- ✅ Flexibilidad total para elegir tus componentes
+
+### Integración con MDS de Inditex
+
+HolyGrail5 está diseñado específicamente para trabajar junto con **MDS (Massimo Dutti System)** de Inditex:
+
+```html
+<!-- Layout con HolyGrail5 -->
+<div class="row">
+  <div class="col-xs-12 col-md-6 p-16">
+    <!-- Componentes de MDS -->
+    <mds-button variant="primary">Reservar Mesa</mds-button>
+    <mds-card>
+      <mds-card-header>Título</mds-card-header>
+      <mds-card-content>Contenido</mds-card-content>
+    </mds-card>
+  </div>
+</div>
+```
+
+**Ventajas:**
+- ✅ Sin conflictos de estilos
+- ✅ HolyGrail5 maneja layout, MDS maneja componentes
+- ✅ Mejor de ambos mundos
+- ✅ CSS optimizado y ligero
+
+### Maquetación con IA
+
+HolyGrail5 es **perfecto para maquetación asistida por IA**:
+
+#### ¿Por qué funciona tan bien con IA?
+
+1. **Superprompt disponible**: `SUPERPROMPT.md` contiene toda la información necesaria
+2. **Nomenclatura clara**: Clases predecibles y semánticas
+3. **Patrones simples**: Estructura fácil de seguir
+4. **Configuración JSON**: Fácil de generar automáticamente
+5. **Sin complejidad**: No hay componentes acoplados que confundan a la IA
+
+#### Ejemplo de Uso con IA
+
+```
+Prompt para IA:
+"Crea una página de restaurante con header sticky, hero section, 
+grid de 6 platos destacados, sección sobre nosotros y footer, 
+usando HolyGrail5 según SUPERPROMPT.md"
+
+La IA puede:
+✅ Generar HTML con las clases correctas
+✅ Usar el grid system apropiado
+✅ Aplicar spacing helpers correctamente
+✅ Crear layouts responsive
+✅ Integrar con componentes MDS si es necesario
+```
+
+**Resultado**: Desarrollo más rápido y código consistente generado automáticamente.
+
+### Conclusión
+
+HolyGrail5 representa la **evolución natural** del framework original, eliminando las complejidades de SASS, separando los componentes pesados de Angular, y aprovechando las capacidades modernas de CSS y JavaScript. 
+
+**Es más simple, más ligero, más potente y más accesible**, manteniendo la filosofía de diseño que hizo grande a HolyGrail CSS, pero adaptado a las necesidades actuales:
+
+- ✅ **Sin dependencias pesadas**: No incluye componentes Angular
+- ✅ **CSS ligero**: Solo utilidades esenciales
+- ✅ **Flexible**: Compatible con MDS de Inditex y cualquier librería
+- ✅ **IA-friendly**: Optimizado para maquetación asistida por IA
+- ✅ **Moderno**: Variables CSS nativas, JSON, Node.js
+
+**En resumen**: HolyGrail5 es HolyGrail CSS **mejorado, simplificado, modernizado y optimizado** para el desarrollo web actual, con especial atención a la flexibilidad, ligereza y compatibilidad con sistemas de componentes externos.
+
+---
+
 **Hecho con ❤️ por HolyGrail CSS**

package/config.json

@@ -6,7 +6,7 @@
     "secondary": "\"ms-serif\", serif"
   },
   "breakpoints": {
-    "mobile": "0px",
+    "mobile": "1px",
     "desktop": "992px"
   },
   "spacingMap": {
@@ -235,7 +235,174 @@
       "responsive": true,
       "description": "Espacio entre filas y columnas",
       "useSpacing": true
+    },
+    "text-align": {
+      "property": "text-align",
+      "class": "text",
+      "responsive": true,
+      "description": "Alineación del texto",
+      "values": {
+        "left": "left",
+        "center": "center",
+        "right": "right",
+        "justify": "justify"
+      }
+    },
+    "position": {
+      "property": "position",
+      "class": "position",
+      "responsive": true,
+      "description": "Tipo de posicionamiento",
+      "values": {
+        "static": "static",
+        "relative": "relative",
+        "absolute": "absolute",
+        "fixed": "fixed",
+        "sticky": "sticky"
+      }
+    },
+    "overflow": {
+      "property": "overflow",
+      "class": "overflow",
+      "responsive": true,
+      "description": "Control de desbordamiento",
+      "values": {
+        "auto": "auto",
+        "hidden": "hidden",
+        "visible": "visible",
+        "scroll": "scroll"
+      }
+    },
+    "overflow-x": {
+      "property": "overflow-x",
+      "class": "overflow-x",
+      "responsive": true,
+      "description": "Control de desbordamiento horizontal",
+      "values": {
+        "auto": "auto",
+        "hidden": "hidden",
+        "visible": "visible",
+        "scroll": "scroll"
+      }
+    },
+    "overflow-y": {
+      "property": "overflow-y",
+      "class": "overflow-y",
+      "responsive": true,
+      "description": "Control de desbordamiento vertical",
+      "values": {
+        "auto": "auto",
+        "hidden": "hidden",
+        "visible": "visible",
+        "scroll": "scroll"
+      }
+    },
+    "visibility": {
+      "property": "visibility",
+      "class": "visibility",
+      "responsive": true,
+      "description": "Visibilidad del elemento",
+      "values": {
+        "visible": "visible",
+        "hidden": "hidden",
+        "collapse": "collapse"
+      }
+    },
+    "opacity": {
+      "property": "opacity",
+      "class": "opacity",
+      "responsive": true,
+      "description": "Transparencia del elemento",
+      "values": {
+        "0": "0",
+        "25": "0.25",
+        "50": "0.5",
+        "75": "0.75",
+        "100": "1"
+      }
+    },
+    "z-index": {
+      "property": "z-index",
+      "class": "z",
+      "responsive": true,
+      "description": "Nivel de apilamiento",
+      "values": {
+        "0": "0",
+        "10": "10",
+        "20": "20",
+        "30": "30",
+        "40": "40",
+        "50": "50",
+        "auto": "auto"
+      }
+    },
+    "cursor": {
+      "property": "cursor",
+      "class": "cursor",
+      "responsive": false,
+      "description": "Tipo de cursor",
+      "values": {
+        "auto": "auto",
+        "default": "default",
+        "pointer": "pointer",
+        "not-allowed": "not-allowed",
+        "wait": "wait",
+        "text": "text",
+        "move": "move",
+        "grab": "grab",
+        "grabbing": "grabbing"
+      }
+    },
+    "object-fit": {
+      "property": "object-fit",
+      "class": "object",
+      "responsive": true,
+      "description": "Ajuste de objeto (imágenes)",
+      "values": {
+        "contain": "contain",
+        "cover": "cover",
+        "fill": "fill",
+        "none": "none",
+        "scale-down": "scale-down"
+      }
+    },
+    "height": {
+      "property": "height",
+      "class": "h",
+      "responsive": true,
+      "description": "Altura del elemento",
+      "values": {
+        "auto": "auto",
+        "100-percent": "100%",
+        "100vh": "100vh",
+        "100svh": "100svh",
+        "100lvh": "100lvh",
+        "100dvh": "100dvh",
+        "50-percent": "50%",
+        "75-percent": "75%",
+        "fit-content": "fit-content",
+        "min-content": "min-content",
+        "max-content": "max-content"
+      }
+    },
+
+
+    "min-height": {
+      "property": "min-height",
+      "class": "min-h",
+      "responsive": true,
+      "description": "Altura mínima del elemento",
+      "values": {
+        "0": "0",
+        "100-percent": "100%",
+        "100vh": "100vh",
+        "100svh": "100svh",
+        "100lvh": "100lvh",
+        "100dvh": "100dvh",
+        "fit-content": "fit-content"
+      }
     }
+
   },
   "classes": {
     "h2": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "holygrail5",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Framework CSS generator con Node.js - Genera CSS optimizado con variables CSS desde un archivo JSON de configuración",
   "main": "generator.js",
   "bin": {
@@ -8,10 +8,11 @@
   },
   "scripts": {
     "generate": "node generator.js",
-    "start": "node generator.js && NODE_NO_WARNINGS=1 npx http-server dist -p 3000 -o index.html",
+    "build": "node generator.js",
+    "start": "node generator.js && NODE_NO_WARNINGS=1 npx http-server dist -p ${PORT:-5001} -o index.html",
     "dev": "node src/dev.js",
     "watch": "node src/watch.js",
-    "serve": "NODE_NO_WARNINGS=1 npx http-server dist -p 3000 -o index.html",
+    "serve": "NODE_NO_WARNINGS=1 npx http-server dist -p ${PORT:-5000} -o index.html",
     "test": "node tests/run-all.js",
     "prepublishOnly": "npm run generate",
     "vars:list": "node src/cli-variables.js list",
@@ -19,6 +20,7 @@
     "vars:remove": "node src/cli-variables.js remove",
     "vars:remove-all-unused": "node src/cli-variables.js remove-all-unused",
     "vars:show-all": "node src/cli-variables.js show-all"
+    
   },
   "keywords": [
     "css",

package/src/dev.js

@@ -13,14 +13,15 @@ const watchProcess = spawn('node', [path.join(__dirname, 'watch.js')], {
 
 // Esperar un momento para que watch genere los archivos inicialmente
 setTimeout(() => {
-  console.log('\n🌐 Iniciando servidor HTTP en http://localhost:3000\n');
+  const port = process.env.PORT || '5000';
+  console.log(`\n🌐 Iniciando servidor HTTP en http://localhost:${port}\n`);
   console.log('💡 Los archivos se regenerarán automáticamente cuando cambies config.json\n');
   console.log('💡 Recarga el navegador (Cmd+Shift+R o Ctrl+Shift+R) para ver los cambios\n');
   
   // Iniciar servidor HTTP
   // Suprimir warnings de deprecación de http-server
   // Servir desde dist/ como raíz, así la URL será /index.html sin mostrar "dist"
-  const serverProcess = spawn('npx', ['http-server', 'dist', '-p', '3000', '-o', 'index.html'], {
+  const serverProcess = spawn('npx', ['http-server', 'dist', '-p', port, '-o', 'index.html'], {
     stdio: 'inherit',
     shell: true,
     env: { ...process.env, NODE_NO_WARNINGS: '1' }

package/src/guide.js

@@ -36,48 +36,9 @@ function saveCurrentValues(currentValues, previousValuesPath) {
 function getChangedValues(currentValues, previousValues) {
   const changes = new Set();
   
-  // Si no hay valores previos, marca todo como nuevo (primera ejecución)
+  // Si no hay valores previos, no marca nada como cambiado (primera ejecución o build limpio)
+  // Solo se marcarán cambios cuando haya valores previos para comparar
   if (!previousValues) {
-    // Marca todas las variables como nuevas
-    if (currentValues.variables) {
-      Object.keys(currentValues.variables).forEach(varName => {
-        changes.add(`variable.${varName}`);
-      });
-    }
-    // Marca todos los breakpoints como nuevos
-    if (currentValues.breakpoints) {
-      changes.add('breakpoints.mobile');
-      changes.add('breakpoints.desktop');
-    }
-    // Marca todas las fuentes como nuevas
-    if (currentValues.fontFamilyMap) {
-      Object.keys(currentValues.fontFamilyMap).forEach(fontName => {
-        changes.add(`fontFamilyMap.${fontName}`);
-      });
-    }
-    // Marca todos los colores como nuevos
-    if (currentValues.colors) {
-      Object.keys(currentValues.colors).forEach(colorName => {
-        changes.add(`colors.${colorName}`);
-      });
-    }
-    // Marca todas las clases como nuevas
-    if (currentValues.classes) {
-      Object.keys(currentValues.classes).forEach(className => {
-        const cls = currentValues.classes[className];
-        ['fontFamily', 'fontWeight', 'letterSpacing', 'textTransform'].forEach(prop => {
-          if (cls[prop] !== undefined) {
-            changes.add(`${className}.${prop}`);
-          }
-        });
-        ['mobile', 'desktop'].forEach(bp => {
-          if (cls[bp]) {
-            if (cls[bp].fontSize) changes.add(`${className}.${bp}.fontSize`);
-            if (cls[bp].lineHeight) changes.add(`${className}.${bp}.lineHeight`);
-          }
-        });
-      });
-    }
     return changes;
   }
   
@@ -1661,6 +1622,12 @@ function generateHTML(configData, previousValuesPath = null) {
             <li class="text-m guide-info-box-list-item">
               <strong>.col-xl-*</strong> - Columnas para pantallas desde ${configData.grid.breakpoints.xl} (24 columnas)
             </li>
+            <li class="text-m guide-info-box-list-item">
+              <strong>.bleed</strong> - Permite que las columnas vayan a sangre (full bleed), eliminando los márgenes laterales del gutter
+            </li>
+            <li class="text-m guide-info-box-list-item">
+              <strong>.bleed-0</strong> - Elimina completamente el padding y márgenes, útil para contenido que debe ocupar todo el ancho sin espacios
+            </li>
           </ul>
           <p class="text-m guide-info-box-text">
             <strong>Gutter:</strong> ${configData.grid.gutter} (padding horizontal en cada columna)
@@ -1719,7 +1686,7 @@ function generateHTML(configData, previousValuesPath = null) {
         </div>
 
         <div class="guide-info-box guide-info-box-info guide-info-box-margin-top">
-          <h3 class="guide-info-box-title guide-info-box-title-info">Ejemplo de uso</h3>
+          <h3 class="guide-info-box-title guide-info-box-title-info">Ejemplo de uso básico</h3>
           <p class="text-m guide-info-box-text">
             <strong>HTML:</strong>
           </p>
@@ -1749,6 +1716,33 @@ function generateHTML(configData, previousValuesPath = null) {
             </li>
           </ul>
         </div>
+
+        
+
+        <div class="guide-info-box guide-info-box-info guide-info-box-margin-top">
+          <h3 class="guide-info-box-title guide-info-box-title-info">Columnas a sangre (Bleed)</h3>
+          <p class="text-m guide-info-box-text">
+            Cuando necesitas que las columnas vayan a sangre (full bleed), eliminando los márgenes laterales del gutter, usa la clase <code class="guide-info-box-code-info">.bleed</code>:
+          </p>
+          <pre class="guide-code-example"><code>&lt;div class="row"&gt;
+  &lt;div class="col-xs-12 bleed"&gt;
+    Contenido que va a sangre (sin márgenes laterales)
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+          <p class="text-m guide-info-box-text">
+            Para eliminar completamente el padding y márgenes, usa <code class="guide-info-box-code-info">.bleed-0</code>:
+          </p>
+          <pre class="guide-code-example"><code>&lt;div class="bleed-0"&gt;
+  &lt;div class="row"&gt;
+    &lt;div class="col-xs-12"&gt;
+      Contenido sin padding ni márgenes
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+          <p class="text-m guide-info-box-text-small">
+            <strong>Nota:</strong> <code class="guide-info-box-code-info">.bleed</code> aplica márgenes negativos iguales al gutter (${configData.grid.gutter}) para que el contenido llegue hasta los bordes. <code class="guide-info-box-code-info">.bleed-0</code> elimina todo el padding y márgenes, útil para imágenes o contenido que debe ocupar todo el ancho disponible.
+          </p>
+        </div>
       </div>
     </div>
     ` : ''}

package/src/parser.js

@@ -329,7 +329,10 @@ function generateClassCSS(className, cls, breakpointName, valueMap, prefix, cate
 // Genera una media query con todas las clases para un breakpoint
 // Convierte el breakpoint a rem y genera el CSS de todas las clases
 function generateMediaQuery(breakpointName, minWidth, classes, valueMap, prefix, category, baseFontSize, fontFamilyMap) {
-  const minWidthRem = pxToRem(minWidth, baseFontSize);
+  // Convertir breakpoint a rem de forma consistente
+  const minWidthRem = typeof minWidth === 'string' && minWidth.includes('px')
+    ? pxToRem(minWidth, baseFontSize)
+    : minWidth;
   
   const cssClasses = Object.entries(classes)
     .map(([className, cls]) => generateClassCSS(className, cls, breakpointName, valueMap, prefix, category, baseFontSize, fontFamilyMap))
@@ -341,7 +344,10 @@ function generateMediaQuery(breakpointName, minWidth, classes, valueMap, prefix,
 // Genera un bloque de tipografías para un breakpoint específico con comentario descriptivo
 // Incluye un comentario que indica qué breakpoint es y el min-width
 function generateTypographyBlock(breakpointName, minWidth, classes, valueMap, prefix, category, baseFontSize, fontFamilyMap) {
-  const minWidthRem = pxToRem(minWidth, baseFontSize);
+  // Convertir breakpoint a rem de forma consistente
+  const minWidthRem = typeof minWidth === 'string' && minWidth.includes('px')
+    ? pxToRem(minWidth, baseFontSize)
+    : minWidth;
   const breakpointLabel = breakpointName === 'mobile' ? 'Mobile' : 'Desktop';
   
   const cssClasses = Object.entries(classes)
@@ -430,77 +436,80 @@ function generateSpacingHelpers(spacingMap, prefix, desktopBreakpoint, baseFontS
   
   const helpers = [];
   const desktopHelpers = [];
-  const desktopBreakpointRem = pxToRem(desktopBreakpoint, baseFontSize);
+  // Convertir breakpoint a rem de forma consistente
+  const desktopBreakpointRem = typeof desktopBreakpoint === 'string' && desktopBreakpoint.includes('px')
+    ? pxToRem(desktopBreakpoint, baseFontSize)
+    : desktopBreakpoint;
   
-      // Generar helpers para cada valor en spacingMap
-      Object.entries(spacingMap).forEach(([key, value]) => {
+  // Generar helpers para cada valor en spacingMap
+  Object.entries(spacingMap).forEach(([key, value]) => {
+    const varName = `--${prefix}-spacing-${key}`;
+    
+    // Padding helpers base (mobile) usando variables CSS con propiedades lógicas para RTL
+    helpers.push(`  .p-${key} { padding: var(${varName}); }`);
+    helpers.push(`  .pr-${key} { padding-inline-end: var(${varName}); }`);
+    helpers.push(`  .pl-${key} { padding-inline-start: var(${varName}); }`);
+    helpers.push(`  .pb-${key} { padding-bottom: var(${varName}); }`);
+    helpers.push(`  .pt-${key} { padding-top: var(${varName}); }`);
+    
+    // Margin helpers base (mobile) usando variables CSS con propiedades lógicas para RTL
+    helpers.push(`  .m-${key} { margin: var(${varName}); }`);
+    helpers.push(`  .mr-${key} { margin-inline-end: var(${varName}); }`);
+    helpers.push(`  .ml-${key} { margin-inline-start: var(${varName}); }`);
+    helpers.push(`  .mb-${key} { margin-bottom: var(${varName}); }`);
+    helpers.push(`  .mt-${key} { margin-top: var(${varName}); }`);
+    
+    // Padding helpers con prefijo md: (desktop) usando variables CSS con propiedades lógicas para RTL
+    desktopHelpers.push(`    .md\\:p-${key} { padding: var(${varName}); }`);
+    desktopHelpers.push(`    .md\\:pr-${key} { padding-inline-end: var(${varName}); }`);
+    desktopHelpers.push(`    .md\\:pl-${key} { padding-inline-start: var(${varName}); }`);
+    desktopHelpers.push(`    .md\\:pb-${key} { padding-bottom: var(${varName}); }`);
+    desktopHelpers.push(`    .md\\:pt-${key} { padding-top: var(${varName}); }`);
+    
+    // Margin helpers con prefijo md: (desktop) usando variables CSS con propiedades lógicas para RTL
+    desktopHelpers.push(`    .md\\:m-${key} { margin: var(${varName}); }`);
+    desktopHelpers.push(`    .md\\:mr-${key} { margin-inline-end: var(${varName}); }`);
+    desktopHelpers.push(`    .md\\:ml-${key} { margin-inline-start: var(${varName}); }`);
+    desktopHelpers.push(`    .md\\:mb-${key} { margin-bottom: var(${varName}); }`);
+    desktopHelpers.push(`    .md\\:mt-${key} { margin-top: var(${varName}); }`);
+  });
+  
+  // Generar helpers con !important para los valores especificados en spacingImportant
+  if (spacingImportant && Array.isArray(spacingImportant)) {
+    spacingImportant.forEach(key => {
+      if (spacingMap[key]) {
         const varName = `--${prefix}-spacing-${key}`;
         
-        // Padding helpers base (mobile) usando variables CSS con propiedades lógicas para RTL
-        helpers.push(`  .p-${key} { padding: var(${varName}); }`);
-        helpers.push(`  .pr-${key} { padding-inline-end: var(${varName}); }`);
-        helpers.push(`  .pl-${key} { padding-inline-start: var(${varName}); }`);
-        helpers.push(`  .pb-${key} { padding-bottom: var(${varName}); }`);
-        helpers.push(`  .pt-${key} { padding-top: var(${varName}); }`);
+        // Padding helpers con !important (mobile)
+        helpers.push(`  .p-${key}\\! { padding: var(${varName}) !important; }`);
+        helpers.push(`  .pr-${key}\\! { padding-inline-end: var(${varName}) !important; }`);
+        helpers.push(`  .pl-${key}\\! { padding-inline-start: var(${varName}) !important; }`);
+        helpers.push(`  .pb-${key}\\! { padding-bottom: var(${varName}) !important; }`);
+        helpers.push(`  .pt-${key}\\! { padding-top: var(${varName}) !important; }`);
         
-        // Margin helpers base (mobile) usando variables CSS con propiedades lógicas para RTL
-        helpers.push(`  .m-${key} { margin: var(${varName}); }`);
-        helpers.push(`  .mr-${key} { margin-inline-end: var(${varName}); }`);
-        helpers.push(`  .ml-${key} { margin-inline-start: var(${varName}); }`);
-        helpers.push(`  .mb-${key} { margin-bottom: var(${varName}); }`);
-        helpers.push(`  .mt-${key} { margin-top: var(${varName}); }`);
+        // Margin helpers con !important (mobile)
+        helpers.push(`  .m-${key}\\! { margin: var(${varName}) !important; }`);
+        helpers.push(`  .mr-${key}\\! { margin-inline-end: var(${varName}) !important; }`);
+        helpers.push(`  .ml-${key}\\! { margin-inline-start: var(${varName}) !important; }`);
+        helpers.push(`  .mb-${key}\\! { margin-bottom: var(${varName}) !important; }`);
+        helpers.push(`  .mt-${key}\\! { margin-top: var(${varName}) !important; }`);
         
-        // Padding helpers con prefijo md: (desktop) usando variables CSS con propiedades lógicas para RTL
-        desktopHelpers.push(`    .md\\:p-${key} { padding: var(${varName}); }`);
-        desktopHelpers.push(`    .md\\:pr-${key} { padding-inline-end: var(${varName}); }`);
-        desktopHelpers.push(`    .md\\:pl-${key} { padding-inline-start: var(${varName}); }`);
-        desktopHelpers.push(`    .md\\:pb-${key} { padding-bottom: var(${varName}); }`);
-        desktopHelpers.push(`    .md\\:pt-${key} { padding-top: var(${varName}); }`);
+        // Padding helpers con !important y prefijo md: (desktop)
+        desktopHelpers.push(`    .md\\:p-${key}\\! { padding: var(${varName}) !important; }`);
+        desktopHelpers.push(`    .md\\:pr-${key}\\! { padding-inline-end: var(${varName}) !important; }`);
+        desktopHelpers.push(`    .md\\:pl-${key}\\! { padding-inline-start: var(${varName}) !important; }`);
+        desktopHelpers.push(`    .md\\:pb-${key}\\! { padding-bottom: var(${varName}) !important; }`);
+        desktopHelpers.push(`    .md\\:pt-${key}\\! { padding-top: var(${varName}) !important; }`);
         
-        // Margin helpers con prefijo md: (desktop) usando variables CSS con propiedades lógicas para RTL
-        desktopHelpers.push(`    .md\\:m-${key} { margin: var(${varName}); }`);
-        desktopHelpers.push(`    .md\\:mr-${key} { margin-inline-end: var(${varName}); }`);
-        desktopHelpers.push(`    .md\\:ml-${key} { margin-inline-start: var(${varName}); }`);
-        desktopHelpers.push(`    .md\\:mb-${key} { margin-bottom: var(${varName}); }`);
-        desktopHelpers.push(`    .md\\:mt-${key} { margin-top: var(${varName}); }`);
-      });
-      
-      // Generar helpers con !important para los valores especificados en spacingImportant
-      if (spacingImportant && Array.isArray(spacingImportant)) {
-        spacingImportant.forEach(key => {
-          if (spacingMap[key]) {
-            const varName = `--${prefix}-spacing-${key}`;
-            
-            // Padding helpers con !important (mobile)
-            helpers.push(`  .p-${key}\\! { padding: var(${varName}) !important; }`);
-            helpers.push(`  .pr-${key}\\! { padding-inline-end: var(${varName}) !important; }`);
-            helpers.push(`  .pl-${key}\\! { padding-inline-start: var(${varName}) !important; }`);
-            helpers.push(`  .pb-${key}\\! { padding-bottom: var(${varName}) !important; }`);
-            helpers.push(`  .pt-${key}\\! { padding-top: var(${varName}) !important; }`);
-            
-            // Margin helpers con !important (mobile)
-            helpers.push(`  .m-${key}\\! { margin: var(${varName}) !important; }`);
-            helpers.push(`  .mr-${key}\\! { margin-inline-end: var(${varName}) !important; }`);
-            helpers.push(`  .ml-${key}\\! { margin-inline-start: var(${varName}) !important; }`);
-            helpers.push(`  .mb-${key}\\! { margin-bottom: var(${varName}) !important; }`);
-            helpers.push(`  .mt-${key}\\! { margin-top: var(${varName}) !important; }`);
-            
-            // Padding helpers con !important y prefijo md: (desktop)
-            desktopHelpers.push(`    .md\\:p-${key}\\! { padding: var(${varName}) !important; }`);
-            desktopHelpers.push(`    .md\\:pr-${key}\\! { padding-inline-end: var(${varName}) !important; }`);
-            desktopHelpers.push(`    .md\\:pl-${key}\\! { padding-inline-start: var(${varName}) !important; }`);
-            desktopHelpers.push(`    .md\\:pb-${key}\\! { padding-bottom: var(${varName}) !important; }`);
-            desktopHelpers.push(`    .md\\:pt-${key}\\! { padding-top: var(${varName}) !important; }`);
-            
-            // Margin helpers con !important y prefijo md: (desktop)
-            desktopHelpers.push(`    .md\\:m-${key}\\! { margin: var(${varName}) !important; }`);
-            desktopHelpers.push(`    .md\\:mr-${key}\\! { margin-inline-end: var(${varName}) !important; }`);
-            desktopHelpers.push(`    .md\\:ml-${key}\\! { margin-inline-start: var(${varName}) !important; }`);
-            desktopHelpers.push(`    .md\\:mb-${key}\\! { margin-bottom: var(${varName}) !important; }`);
-            desktopHelpers.push(`    .md\\:mt-${key}\\! { margin-top: var(${varName}) !important; }`);
-          }
-        });
+        // Margin helpers con !important y prefijo md: (desktop)
+        desktopHelpers.push(`    .md\\:m-${key}\\! { margin: var(${varName}) !important; }`);
+        desktopHelpers.push(`    .md\\:mr-${key}\\! { margin-inline-end: var(${varName}) !important; }`);
+        desktopHelpers.push(`    .md\\:ml-${key}\\! { margin-inline-start: var(${varName}) !important; }`);
+        desktopHelpers.push(`    .md\\:mb-${key}\\! { margin-bottom: var(${varName}) !important; }`);
+        desktopHelpers.push(`    .md\\:mt-${key}\\! { margin-top: var(${varName}) !important; }`);
       }
+    });
+  }
   
   if (helpers.length === 0) {
     return '';
@@ -520,13 +529,23 @@ ${desktopHelpers.join('\n')}
   return baseHelpers;
 }
 
+// Genera helpers de layout (display, flexbox, alignment, etc.)
+// Crea clases como hg-d-flex, hg-justify-center, etc.
+// Agrupa todos los helpers responsive en un solo media query
 function generateLayoutHelpers(helpers, spacingMap, prefix, desktopBreakpoint, baseFontSize = 16) {
   if (!helpers || typeof helpers !== 'object') {
     return '';
   }
 
+  // Convertir breakpoint a rem de forma consistente
+  const breakpointInRem = typeof desktopBreakpoint === 'string' && desktopBreakpoint.includes('px')
+    ? pxToRem(desktopBreakpoint, baseFontSize)
+    : desktopBreakpoint;
+
   let css = '\n/* Layout Helpers */\n';
+  let responsiveCSS = '';
 
+  // Primero generar todas las clases base
   Object.entries(helpers).forEach(([helperName, config]) => {
     const { property, class: className, responsive, values, useSpacing } = config;
 
@@ -537,12 +556,10 @@ function generateLayoutHelpers(helpers, spacingMap, prefix, desktopBreakpoint, b
       });
 
       if (responsive) {
-        css += `\n@media (min-width: ${desktopBreakpoint}) {\n`;
         Object.entries(spacingMap).forEach(([key, value]) => {
           const finalValue = value.endsWith('%') ? value : pxToRem(value, baseFontSize);
-          css += `  .md\\:${prefix}-${className}-${key} { ${property}: ${finalValue}; }\n`;
+          responsiveCSS += `  .md\\:${prefix}-${className}-${key} { ${property}: ${finalValue}; }\n`;
         });
-        css += '}\n';
       }
     } else if (values) {
       if (Array.isArray(values)) {
@@ -551,11 +568,9 @@ function generateLayoutHelpers(helpers, spacingMap, prefix, desktopBreakpoint, b
         });
 
         if (responsive) {
-          css += `\n@media (min-width: ${desktopBreakpoint}) {\n`;
           values.forEach(value => {
-            css += `  .md\\:${prefix}-${className}-${value} { ${property}: ${value}; }\n`;
+            responsiveCSS += `  .md\\:${prefix}-${className}-${value} { ${property}: ${value}; }\n`;
           });
-          css += '}\n';
         }
       } else if (typeof values === 'object') {
         Object.entries(values).forEach(([key, value]) => {
@@ -563,18 +578,19 @@ function generateLayoutHelpers(helpers, spacingMap, prefix, desktopBreakpoint, b
         });
 
         if (responsive) {
-          css += `\n@media (min-width: ${desktopBreakpoint}) {\n`;
           Object.entries(values).forEach(([key, value]) => {
-            css += `  .md\\:${prefix}-${className}-${key} { ${property}: ${value}; }\n`;
+            responsiveCSS += `  .md\\:${prefix}-${className}-${key} { ${property}: ${value}; }\n`;
           });
-          css += '}\n';
         }
       }
     }
-
-    css += '\n';
   });
 
+  // Agrupar todos los helpers responsive en un solo media query
+  if (responsiveCSS) {
+    css += `\n@media (min-width: ${breakpointInRem}) {\n${responsiveCSS}}\n`;
+  }
+
   return css;
 }
 
@@ -596,6 +612,14 @@ function generateGridSystem(gridConfig, baseFontSize = 16) {
   const columnsXs = gridConfig.columnsXs || 12;
   const columnsXl = gridConfig.columnsXl || 24;
 
+  // Función helper para convertir breakpoints a rem de forma consistente
+  const breakpointToRem = (value) => {
+    if (typeof value === 'string' && value.includes('px')) {
+      return pxToRem(value, baseFontSize);
+    }
+    return value;
+  };
+
   let css = '\n/* Grid System */\n';
 
   // Genera .row
@@ -609,7 +633,8 @@ function generateGridSystem(gridConfig, baseFontSize = 16) {
   // Genera .row para cada breakpoint
   Object.entries(breakpoints).forEach(([name, value]) => {
     if (name !== 'xs') {
-      css += `@media (min-width: ${value}) {
+      const remValue = breakpointToRem(value);
+      css += `@media (min-width: ${remValue}) {
   .row {
     margin-left: -${gutterValue};
     margin-right: -${gutterValue};
@@ -625,8 +650,9 @@ function generateGridSystem(gridConfig, baseFontSize = 16) {
     return percentage.replace(/\.?0+$/, '') || '0';
   };
 
-  // Genera columnas para xs (12 columnas) - usar 1px directamente
-  css += `@media (min-width: ${breakpoints.xs}) {\n`;
+  // Genera columnas para xs (12 columnas) - convertir a rem
+  const xsBreakpoint = breakpointToRem(breakpoints.xs);
+  css += `@media (min-width: ${xsBreakpoint}) {\n`;
   for (let i = 1; i <= columnsXs; i++) {
     const percentage = formatPercentage(i / columnsXs);
     css += `  .col-xs-${i} {
@@ -638,7 +664,8 @@ function generateGridSystem(gridConfig, baseFontSize = 16) {
 
   // Genera columnas para sm (12 columnas)
   if (breakpoints.sm) {
-    css += `@media (min-width: ${breakpoints.sm}) {\n`;
+    const smBreakpoint = breakpointToRem(breakpoints.sm);
+    css += `@media (min-width: ${smBreakpoint}) {\n`;
     for (let i = 1; i <= columnsXs; i++) {
       const percentage = formatPercentage(i / columnsXs);
       css += `  .col-sm-${i} {
@@ -651,7 +678,8 @@ function generateGridSystem(gridConfig, baseFontSize = 16) {
 
   // Genera columnas para md (12 columnas)
   if (breakpoints.md) {
-    css += `@media (min-width: ${breakpoints.md}) {\n`;
+    const mdBreakpoint = breakpointToRem(breakpoints.md);
+    css += `@media (min-width: ${mdBreakpoint}) {\n`;
     for (let i = 1; i <= columnsXs; i++) {
       const percentage = formatPercentage(i / columnsXs);
       css += `  .col-md-${i} {
@@ -664,7 +692,8 @@ function generateGridSystem(gridConfig, baseFontSize = 16) {
 
   // Genera columnas para lg (12 columnas)
   if (breakpoints.lg) {
-    css += `@media (min-width: ${breakpoints.lg}) {\n`;
+    const lgBreakpoint = breakpointToRem(breakpoints.lg);
+    css += `@media (min-width: ${lgBreakpoint}) {\n`;
     for (let i = 1; i <= columnsXs; i++) {
       const percentage = formatPercentage(i / columnsXs);
       css += `  .col-lg-${i} {
@@ -677,7 +706,8 @@ function generateGridSystem(gridConfig, baseFontSize = 16) {
 
   // Genera columnas para xl (24 columnas)
   if (breakpoints.xl) {
-    css += `@media (min-width: ${breakpoints.xl}) {\n`;
+    const xlBreakpoint = breakpointToRem(breakpoints.xl);
+    css += `@media (min-width: ${xlBreakpoint}) {\n`;
     for (let i = 1; i <= columnsXl; i++) {
       const percentage = formatPercentage(i / columnsXl);
       css += `  .col-xl-${i} {
@@ -695,7 +725,48 @@ function generateGridSystem(gridConfig, baseFontSize = 16) {
   padding-left: ${gutterValue};
   padding-right: ${gutterValue};
   position: relative;
-}\n`;
+}\n\n`;
+
+  // Estilos para bleed
+  css += `.bleed {
+  margin-left: -${gutterValue};
+  margin-right: -${gutterValue};
+  width: auto;
+}\n\n`;
+
+  css += `.bleed.row {
+  margin-left: -${gutterValue};
+  margin-right: -${gutterValue};
+}\n\n`;
+
+  css += `.bleed-0 {
+  padding: 0 0px 0 0px;
+  overflow: hidden;
+}\n\n`;
+
+  css += `.bleed-0 .container-fluid {
+  margin-left: -0px;
+  margin-right: -0px;
+  padding: 0 0px 0 0px;
+}\n\n`;
+
+  css += `.bleed-0 > .row {
+  margin-left: 0;
+  margin-right: 0;
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 1 auto;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  flex-flow: row wrap;
+  flex-wrap: wrap;
+}\n\n`;
+
+  css += `.bleed-0 > [class*=col-],
+.bleed-0 > .col {
+  padding: 0px;
+  box-sizing: border-box;
+}\n\n`;
 
   return css;
 }