holygrailcss

Generador de CSS dirigido por configuración. Declaras tu paleta, tipografía, spacing, grid y temas en un único config.json y obtienes en dist/:

• output.css — variables CSS, helpers responsive, spacing, grid, aspect ratios y la escala tipográfica completa.
• index.html — guía interactiva navegable.
• themes/<name>.css + themes/<name>-demo.html por cada tema activo.

Sin SASS, sin toolchain. Node puro.

Instalación

npm install holygrailcss --save-dev

<link rel="stylesheet" href="node_modules/holygrailcss/dist/output.css">
<!-- y opcionalmente, un tema -->
<link rel="stylesheet" href="node_modules/holygrailcss/dist/themes/black-yellow.css">

// Vite / Webpack / Next
import 'holygrailcss/dist/output';
import 'holygrailcss/dist/themes/black-yellow';

<!-- CDN (sandbox / playground) -->
<link rel="stylesheet" href="https://unpkg.com/holygrailcss/dist/output.css">

Uso rápido

<button class="btn btn-primary btn-lg">Get started</button>

<div class="row">
  <div class="col-md-8">Contenido</div>
  <div class="col-md-4">Sidebar</div>
</div>

<h1 class="headline-xl">Title</h1>
<p class="body-l muted">Subtitle</p>

<div class="p-24 m-16 hg-d-flex hg-justify-between hg-gap-16">…</div>

Convenciones:

• Mobile-first. md\: para desktop (≥992px).
• Spacing sin prefijo (.p-16), helpers con hg- (.hg-d-flex).
• Variables CSS siempre: var(--hg-color-primary), var(--hg-spacing-16).

Personalización

Copia el config y edítalo:

cp node_modules/holygrailcss/config.json ./hg-config.json
npx holygrailcss --config=./hg-config.json --output=./dist/output.css

Para crear un tema, mira themes/black-yellow/ como ejemplo (_variables.css, theme.css, theme.json, demo.html) y actívalo en config.json → themes[].

Componentes

34 componentes base en themes/_base/:

Form: buttons, inputs, textarea, select, labels, checkboxes, radios, switches, slider, input-otp, toggle-group, forms Display: typography (headline-, body-), card, badge, alert, avatar, separator, progress, skeleton, table Navigation: tabs, accordion, breadcrumb, pagination, sidebar Overlays: dialog, drawer, dropdown, tooltip, toast Layout: containers, grid, icons (aspect ratios se generan desde config/aspect-ratios.json)

Demo viva en dist/componentes.html.

Documentación

• Para asistentes/AI que vayan a editar este repo: lee CLAUDE.md (raíz). Es un mapa de 5 minutos.
• Para usar el framework en tu proyecto: skills/developer-guide/SKILL.md — referencia completa de clases (colores, spacing, tipografía, helpers, grid, ratios, temas).
• Para extender:
  • skills/theme-creator/SKILL.md — crear temas reutilizando _base/.
  • skills/component-generator/SKILL.md — generar HTML con las clases correctas.
  • skills/layout-builder/SKILL.md — construir layouts responsive.
  • skills/config-builder/SKILL.md — modificar config.json sin romper el build.
  • skills/migration-helper/SKILL.md — migrar desde Bootstrap/Tailwind.

Scripts

npm run build      # genera dist/
npm run watch      # rebuild on change
npm run serve      # sirve dist/
npm run dev        # build + serve
npm test           # tests

License

MIT — ver LICENSE.

Repo: github.com/holygrailcss/holygrail