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