Files

FrankZamora 0f6387ab46 refactor: reorganizar openspec y planificacion con spec recaptcha

- renombrar openspec/ a _openspec/ (carpeta auxiliar)
- mover specs de features a changes/
- crear specs base: arquitectura-limpia, estandares-codigo, nomenclatura
- migrar _planificacion/ con design-system y roi-theme-template
- agregar especificacion recaptcha anti-spam (proposal, tasks, spec)
- corregir rutas y referencias en todas las specs

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

2026-01-08 15:30:45 -06:00

2.7 KiB

Raw Blame History

🧩 COMPONENTES REUTILIZABLES

¿Qué es esto?

Una librería de 28 componentes HTML listos para copiar y pegar, construidos con Bootstrap 5.3.2 y alineados al design system de APU.

Cada componente incluye:

✅ HTML completo y funcional
✅ Múltiples ejemplos de uso
✅ Comentarios explicativos inline
✅ Fixes para conflictos con WordPress

📂 Documentación Completa

Ir a: ../componentes-html-bootstrap/README.md

Ahí encontrarás:

Índice completo de los 28 componentes
Categorías organizadas (formularios, botones, layouts, navegación, etc.)
Instrucciones de uso y personalización
Dependencias requeridas (CDN links)
Fixes CSS para WordPress
Componentes que requieren JavaScript

📋 Categorías de Componentes

🎨 Layout y Estructura

Headers con gradiente, Cards (estándar y vista previa), Grids especializados

📝 Formularios

Switches, Color pickers, Text inputs, Textareas, Selects, Radio buttons, Checkboxes, Range sliders, File uploads

🔘 Botones

Botones simples, Button groups (Desktop/Mobile), Botones con dropdowns

🎯 Componentes Visuales

Badges, Links externos, Progress bars, Alerts, Spinners, Dividers, Tooltips

📱 Navegación y Organización

Tabs, Accordions, Sortable lists

💻 Desarrollo y Utilidades

Image previews, Code blocks

🚀 Cómo Usar

Abre el README de componentes: ../componentes-html-bootstrap/README.md
Encuentra el componente que necesitas
Abre el archivo HTML correspondiente (ej: 05-COLOR-PICKER.html)
Copia el HTML del ejemplo que te sirva
Pega en tu proyecto y personaliza IDs/textos

🎨 Principios de Uso

Colores

Iconos: Siempre orange (#FF8600)
Títulos de card: Siempre navy (#1e3a5f)
Border-left cards: Navy para estándar, Orange para previews
Botones primarios: Orange

Tamaños

Form controls: Usar .form-control-sm (tamaño compacto)
Botones en header: Usar .btn-sm
Labels: Clase .small + fw-semibold

Patrones

Header de tab: Gradiente navy + border-left orange + botón reset derecha
Vista previa: Card con border-left orange + título "Vista Previa en Tiempo Real"
Iconos en labels: <i class="bi bi-[icon] me-1" style="color: #FF8600;"></i>

📝 Notas Importantes

Los componentes HTML son la fuente de verdad - siempre usa el código de ahí
Todos los componentes están probados en WordPress
No mezclar inline styles con clases de Bootstrap (solo usa inline styles para colores de marca)
Siempre mantener accesibilidad (ARIA attributes incluidos)

Volver al Índice

← Volver al README

2.7 KiB Raw Blame History