🚀 Vite Integration
Hot Module Replacement y builds optimizados para producción.
🎨 Test de Componentes y Tema
Verificación visual de colores, tipografías y componentes configurados desde el panel de Kirby.
Colores del Tema
Colores Principales
Primary
--color-primary
Secondary
--color-secondary
Accent
--color-accent
Colores de Texto
Text
--color-text
Text Muted
--color-text-muted
Text Light
--color-text-light
Colores de Fondo
Background
--color-background-primary
Background Alt
--color-background-secondary
Border
--color-border
Colores de Estado
Success
--color-success
Error
--color-error
Warning
--color-warning
Tipografías
Fuente de Títulos (Heading)
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
--font-heading-family
Fuente de Cuerpo (Body)
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
--font-body-family
Escala Tipográfica
H1 Heading
--font-size-h1
H2 Heading
--font-size-h2
H3 Heading
--font-size-h3
H4 Heading
--font-size-h4
H5 Heading
--font-size-h5
H6 Heading
--font-size-h6
Botones
Variantes
Tamaños
Estados
Alertas
Éxito: Este es un mensaje de éxito.
Error: Este es un mensaje de error.
Advertencia: Este es un mensaje de advertencia.
Info: Este es un mensaje informativo.
Formulario
Espaciado
--spacing-1
--spacing-2
--spacing-4
--spacing-6
--spacing-8
Border Radius
sm
default
lg
full
Información del Tema
| Fuente títulos | "Nunito", sans-serif |
|---|---|
| Fuente cuerpo | "Inter", sans-serif |
| Tamaño base | 16px |
| Escala tipográfica | 1.250 |
| Line height | 1.2 |
| Unidad de espaciado | 4px |
| Container max | 1240px |
| Border radius | 0.5rem |
| Velocidad transición | 200ms |
🧩 Componentes del Sistema
Esta página demuestra todos los bloques disponibles en el boilerplate. Cada sección representa un componente reutilizable que puedes personalizar desde el Panel de Kirby.
Hero Section - Impacto Visual
Captura la atención de tus visitantes
El bloque Hero es perfecto para secciones principales con llamadas a la acción destacadas. Soporta imágenes, videos y múltiples botones.
📊 Estadísticas
Números que importan
Resultados Comprobados
Nuestro boilerplate ha sido probado en múltiples proyectos con excelentes resultados.
99%
Rendimiento
Lighthouse score +17
Proyectos
Deployados 24/7
Soporte
Disponibilidad <1s
Carga
Time to First Byte 🎯 Características
¿Por qué elegir este Boilerplate?
Desarrollado para maximizar productividad y rendimiento.
🎨 SCSS Modular
Sistema de estilos organizado con variables, mixins y breakpoints.
📦 Componentes
Bloques preconstruidos listos para usar y personalizar.
🔧 SEO Ready
Meta tags, Open Graph, Schema.org integrados.
📱 Responsive
Mobile-first con breakpoints configurables.
⚡ Performance
Lazy loading, WebP automático, caché optimizado.
💬 Testimonios
Lo que dicen nuestros usuarios
Desarrolladores de todo el mundo confían en este boilerplate.
“Este boilerplate me ahorró semanas de configuración. Todo está perfectamente organizado y documentado.”
“La integración de Vite con Kirby es impecable. El hot reload hace que el desarrollo sea muy ágil.”
“Finalmente un starter kit que tiene todo lo que necesito: SEO, performance y componentes modulares.”
❓ Preguntas Frecuentes
FAQ - Preguntas Frecuentes
Resolvemos tus dudas más comunes sobre el boilerplate.
¿Qué versión de Kirby necesito?
Este boilerplate está optimizado para Kirby CMS 5.x. Asegúrate de tener PHP 8.2 o superior instalado.
¿Cómo actualizo los estilos?
Los estilos están en la carpeta /src. Usa npm run dev para desarrollo con hot reload o npm run build para producción.
¿Puedo usar TypeScript?
Sí, Vite soporta TypeScript nativamente. Solo necesitas renombrar tus archivos .js a .ts y agregar la configuración correspondiente.
¿Cómo agrego nuevos bloques?
Crea un blueprint en /site/blueprints/blocks, un snippet en /site/snippets/blocks y los estilos correspondientes en /src/blocks o /src/components.
¿El boilerplate incluye formularios?
Sí, incluye un sistema de formularios con validación, envío por email y protección anti-spam.
🃏 Tarjetas
Diseño Moderno
Interfaces limpias y profesionales que destacan tu contenido.
Seguridad Integrada
Protección contra XSS, CSRF y otras vulnerabilidades comunes.
Analytics Ready
Fácil integración con Google Analytics, Plausible y más.
📣 Call to Action
¿Listo para empezar?
Descargar Ahora
Comienza tu proyecto hoy
Descarga el boilerplate y empieza a construir tu próximo proyecto web con todas las herramientas que necesitas.
🔘 Botones
Ejemplos de diferentes estilos de botones disponibles:
📝 Contenido de Texto
Este es un ejemplo de bloque de texto enriquecido. Puedes usar negritas, cursivas, y enlaces dentro del contenido.
Los bloques de texto son perfectos para describir servicios, productos o cualquier información que necesites comunicar a tus visitantes.
🎉 ¡Eso es todo!
Has visto todos los componentes principales del boilerplate. Ahora puedes personalizar cada uno desde el Panel de Kirby o directamente en el código.