\n\nUn framework CSS minimalista, responsive y agnóstico de estilos con componentes HTML y SCSS de alta calidad.\n\n\n\n[](https://www.npmjs.com/package/holygrail2)\n[](https://www.npmjs.com/package/holygrail2)\n[](https://www.jsdelivr.com/package/npm/holygrail2)\n[](https://github.com/holygrail2/holygrail/blob/main/LICENSE)\n\n
\n\n## ✨ Características\n\n- 🎨 **Framework agnóstico** - Sin estilos predefinidos, solo estructura y utilidades\n- 📱 **Totalmente responsive** - Diseño mobile-first con breakpoints flexibles\n- 🧩 **Componentes modulares** - Botones, formularios, navegación, modales, etc.\n- 🎯 **Sistema de grid avanzado** - Grid CSS nativo con múltiples configuraciones\n- 🎪 **Animaciones y transiciones** - Efectos suaves y profesionales\n- 🌍 **Soporte RTL** - Compatible con idiomas de derecha a izquierda\n- ⚡ **Ligero y rápido** - Optimizado para rendimiento\n- 🛠 **Herramientas de desarrollo** - Linting, formateo y build automatizado\n\n## 📦 Instalación\n\n### NPM\n```bash\nnpm install holygrail2\n```\n\n### Yarn\n```bash\nyarn add holygrail2\n```\n\n### CDN\n```html\n\n```\n\n## 🚀 Uso Rápido\n\n### Importar SCSS\n```scss\n@import 'holygrail2/scss/style.scss';\n```\n\n### HTML Básico\n```html\n\n\n\n \n \n Mi Proyecto\n \n\n\n
\n \n
\n
Columna 1
\n
Columna 2
\n
\n
\n\n\n```\n\n## 🧩 Componentes Disponibles\n\n### Elementos Básicos\n- **Botones** - Múltiples variantes y estados\n- **Formularios** - Inputs, checkboxes, radio buttons\n- **Navegación** - Menús, breadcrumbs, tabs\n- **Contenido** - Cards, banners, modales\n- **Feedback** - Tooltips, toasts, progress bars\n\n### Layouts\n- **Grid System** - Grid CSS nativo con 12 columnas\n- **Containers** - Múltiples tamaños de contenedor\n- **Headers** - Navegación principal y secundaria\n- **Cards** - Diferentes estilos de tarjetas\n\n### Utilidades\n- **Espaciado** - Sistema de padding y margin\n- **Tipografía** - Clases de texto y encabezados\n- **Colores** - Variables CSS personalizables\n- **Responsive** - Breakpoints y media queries\n\n## 🛠 Desarrollo\n\n### Prerrequisitos\n- Node.js 16+\n- npm o yarn\n\n### Clonar y configurar\n```bash\n# Clonar el repositorio\ngit clone https://github.com/holygrail2/holygrail.git\ncd holygrail\n\n# Instalar dependencias\nnpm install\n\n# Iniciar desarrollo\nnpm run start:watch\n```\n\n### Comandos Disponibles\n\n| Comando | Descripción |\n|---------|-------------|\n| `npm run build` | Genera CSS y documentación |\n| `npm run start` | Build + abre la guía |\n| `npm run start:watch` | Modo desarrollo con watch |\n| `npm run serve` | Servidor de desarrollo |\n| `npm run lint` | Verifica errores de estilo |\n| `npm run lint:fix` | Corrige errores automáticamente |\n| `npm run format` | Formatea código con Prettier |\n| `npm run test` | Ejecuta lint + build |\n| `npm run docs` | Genera documentación CSS |\n\n### Estructura del Proyecto\n```\nholygrail2/\n├── scss/\n│ ├── abstract/ # Variables, mixins, funciones\n│ ├── base/ # Estilos base y reset\n│ ├── elements/ # Componentes (botones, forms, etc.)\n│ ├── layouts/ # Layouts y grid system\n│ ├── hg-lite/ # Framework ligero\n│ └── style.scss # Archivo principal\n├── dist/ # CSS compilado\n├── src/ # Documentación (Eleventy)\n├── guia/ # Guía generada\n└── package.json\n```\n\n## 🎨 Personalización\n\n### Variables SCSS\n```scss\n// Colores\n$c-primary: #000;\n$c-secondary: #fff;\n$c-accent: #B40016;\n\n// Espaciado\n$padding-global: 8px;\n$padding-mobile: 24px;\n$padding-desktop: 40px;\n\n// Breakpoints\n$break-sm: 768px;\n$break-md: 1024px;\n$break-lg: 1200px;\n```\n\n### Configuración de Grid\n```scss\n// Columnas\n$totalCols: 12;\n$totalColsXl: 24;\n\n// Contenedores\n$container: 800px;\n$container-full: 1500px;\n```\n\n## 🌍 Internacionalización\n\nHolygrail2 incluye soporte completo para RTL (Right-to-Left):\n\n```html\n\n\n```\n\n## 🖥 Compatibilidad\n\n| Navegador | Versión |\n|-----------|---------|\n| Chrome | Últimas 2 versiones |\n| Firefox | Últimas 2 versiones |\n| Safari | Últimas 2 versiones |\n| Edge | Últimas 2 versiones |\n| Electron | Todas las versiones |\n\n## 📚 Documentación\n\n- **Guía Online**: [holyguide.es](https://holyguide.es)\n- **NPM Package**: [npmjs.com/package/holygrail2](https://www.npmjs.com/package/holygrail2)\n- **CDN**: [jsdelivr.com/package/npm/holygrail2](https://www.jsdelivr.com/package/npm/holygrail2)\n\n## 🤝 Contribuir\n\n¡Las contribuciones son bienvenidas! \n\n1. Fork el proyecto\n2. Crea una rama para tu feature (`git checkout -b feature/AmazingFeature`)\n3. Commit tus cambios (`git commit -m 'Add some AmazingFeature'`)\n4. Push a la rama (`git push origin feature/AmazingFeature`)\n5. Abre un Pull Request\n\n### Guías de Contribución\n- Usa comentarios `//` en lugar de `/* */`\n- Sigue las reglas de Stylelint\n- Ejecuta `npm run test` antes de hacer commit\n- Mantén la compatibilidad con navegadores\n\n## 📄 Licencia\n\nEste proyecto está bajo la Licencia MIT. Ver el archivo [LICENSE](LICENSE) para más detalles.\n\n\nDesarrollado por Manuel ruiz redondo. Senior FontEnd UX IT.\n---\n\n**Holygrail2** - Un framework CSS minimalista y potente para aplicaciones web modernas.\n\n\n","readmeFilename":"README.md"}
![\"Holygrail](\"https://res.cloudinary.com/manuel-ruiz/image/upload/v1576145416/holygrail/logoholy.svg\")
\n \n