holygrail2

v1.3.61

Published

2 days ago

A minimal, responsive, style-agnostic CSS framework.

0High
0Medium
0Low

holygrail

css sass minimal responsive style-agnostic framework toolkit holygrail2

Un framework CSS minimalista, responsive y agnóstico de estilos con componentes HTML y SCSS de alta calidad.

✨ 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

npm install holygrail2

Yarn

yarn add holygrail2

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/holygrail2@latest/dist/style.css">

🚀 Uso Rápido

Importar SCSS

@import 'holygrail2/scss/style.scss';

HTML Básico

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi Proyecto</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/holygrail2@latest/dist/style.css">
</head>
<body>
  <div class="container">
    <button class="btn btn--primary">Botón Primario</button>
    <div class="grid-2">
      <div class="col">Columna 1</div>
      <div class="col">Columna 2</div>
    </div>
  </div>
</body>
</html>

🧩 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

# 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

// 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

// Columnas
$totalCols: 12;
$totalColsXl: 24;

// Contenedores
$container: 800px;
$container-full: 1500px;

🌍 Internacionalización

Holygrail2 incluye soporte completo para RTL (Right-to-Left):

<!-- CSS RTL -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/holygrail2@latest/dist/style-rtl.css">

🖥 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
NPM Package: npmjs.com/package/holygrail2
CDN: jsdelivr.com/package/npm/holygrail2

🤝 Contribuir

¡Las contribuciones son bienvenidas!

Fork el proyecto
Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
Commit tus cambios (git commit -m 'Add some AmazingFeature')
Push a la rama (git push origin feature/AmazingFeature)
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 para más detalles.

Desarrollado por Manuel ruiz redondo. Senior FontEnd UX IT.

Holygrail2 - Un framework CSS minimalista y potente para aplicaciones web modernas.