Revisión del tema Quark para Grav CMS (2026): Predeterminado hecho correctamente? - ES

Los temas predeterminados tienen mala reputación. WordPress viene con iniciadores genéricos que nadie usa en producción. Los valores predeterminados de Joomla parecen anticuados en cuestión de meses. Entonces, cuando Grav CMS reemplazó Antimatter con Quark como su tema predeterminado en la versión 1.4, el escepticismo era justo. Pero Quark rompe el molde.. Está construido como base para el desarrollo., no es sólo un marcador de posición para reemplazar inmediatamente.

Veredicto rápido: Quark funciona como un tema inicial listo para producción para desarrolladores y una solución terminada para sitios simples.. El marco Spectre.css lo mantiene liviano (menos de 50 KB CSS), La herencia de temas te permite personalizar sin tocar los archivos principales., y las plantillas modulares manejan diseños comunes. No ganará premios de diseño., pero ese no es el punto. Quark proporciona una estructura para que puedas construir sobre ella.

Saltar a: ¿Qué es el quark? | Características clave | Pros & Contras | ¿Quién debería usarlo? | Alternativas | Instalación | Personalización | Preguntas más frecuentes | Veredicto

Última revisión: marzo 2026. Basado en la versión Quark 2.1.2.

¿Qué es el tema de los quarks??

Quark es el tema predeterminado oficial de Grav CMS desde la versión 1.4. El equipo Grav (Medios Trilby) construido sobre espectro.css, un marco CSS liviano que tiene aproximadamente una décima parte del tamaño de Bootstrap. Cada instalación de Grav incluye Quark listo para usar, y dos esqueletos del sitio oficial (Una página y blog) Úselo como base. Para una mirada más amplia a Grav como plataforma, Vea nuestro revisión completa de Grav CMS.

El tema sirve a dos públicos.. Los desarrolladores obtienen una limpieza, base bien documentada para crear temas personalizados a través del sistema de herencia de Grav. Los no desarrolladores obtienen un tema funcional para carteras simples, blogs, o sitios de una sola página sin necesidad de trabajo de diseño. Ambos grupos se benefician del enfoque de Quark en el rendimiento sobre la complejidad visual.. Puedes ver a Quark en acción en el sitio oficial de demostración.

En GitHub, El quark tiene 71 estrellas y 62 tenedores con 19 lanzamientos hasta la fecha. Versión 2.1.2 (agosto 2025) es lo último, mostrando mantenimiento activo del equipo Grav. La base del código es 77% SCSS (un preprocesador CSS que agrega variables y anidamiento), 18% Plantillas de ramitas (Lenguaje de plantillas de Grav), y JavaScript mínimo.

Algún contexto sobre Grav en sí: es un CMS de archivo plano (no se requiere base de datos) que almacena contenido en archivos Markdown. Las páginas se cargan más rápido porque no hay sobrecarga de consultas MySQL. Quark aprovecha esta arquitectura con JavaScript mínimo y CSS eficiente, manteniendo intacta la ventaja de rendimiento. Si no estás familiarizado con Grav, nuestro Guía de alojamiento Grav cubre el CMS con más detalle.

Características clave

Fundación Spectre.css

Quark usa Spectre.css en lugar de Bootstrap o Tailwind. Esa elección es importante para el tamaño del archivo.. Toda la biblioteca de Spectre se ejecuta en 10 KB comprimidos con gzip. Oreja 5 supera los 25 KB. Para sitios donde cada kilobyte afecta los tiempos de carga, Spectre proporciona cuadrículas responsivas, tipografía, y componentes sin la hinchazón. La compensación: menos componentes prediseñados que Bootstrap, Por lo tanto, los elementos complejos de la interfaz de usuario requieren un trabajo más personalizado..

Herencia del tema

Aquí está la característica principal de Quark para desarrolladores. En lugar de editar Quark directamente (que se rompe cuando llegan las actualizaciones), creas un tema hijo que hereda todo de Quark y solo contiene tus modificaciones. Cambiar una plantilla, agregar CSS personalizado, anular la configuración. El tema base se mantiene limpio y actualizable..

¿Qué significa esto en la práctica?? Mantienes Quark actualizado para seguridad y corrección de errores mientras tus personalizaciones permanecen intactas.. La mayoría de los temas de Grav admiten la herencia., pero la estructura limpia de Quark hace que sea más fácil de ampliar que otras alternativas más obstinadas..

Sistema de plantillas modulares

Quark incluye plantillas para tipos de páginas comunes:

• Páginas predeterminadas para contenido estándar
• Listado de blogs y plantillas de publicaciones para publicar
• Páginas de error (404, etc.) con un estilo adecuado
• Secciones modulares: héroe, caracteristicas, bloques de texto, galería

El enfoque modular le permite crear páginas a partir de secciones reutilizables. Una página de inicio puede combinar una sección destacada, tres bloques de características, y una sección de texto sin escribir plantillas personalizadas. Los módulos de la galería requieren el complemento premium Lightbox Gallery, que es el único muro de pago notable en el ecosistema de Quark.

Opciones de configuración

A través del panel de administración de Grav o archivos YAML (archivos de configuración de texto simple), Quark ofrece estos controles:

• Modo de producción para entrega CSS minimizada
• Cabecera fija con animación de desplazamiento
• Estilo del encabezado (barra de encabezado oscura, opciones de transparencia)
• Pie de página adhesivo comportamiento
• Logotipo personalizado subir (variantes de escritorio y móviles)
• Dimensionamiento de la cuadrícula (SG, LG, Maryland) para control de diseño

Las anulaciones por página funcionan a través del inicio (YAML en la parte superior de los archivos de contenido). Las clases de cuerpo se pueden configurar individualmente para cualquier página., permitiendo un estilo selectivo sin modificaciones del tema.

Diseño responsivo para dispositivos móviles

Spectre.css maneja la capacidad de respuesta a través de una cuadrícula flexible de 12 columnas. Quark implementa esto con navegación móvil que colapsa elegantemente en pantallas más pequeñas.. El menú de hamburguesas aparece en los puntos de interrupción de la tableta., y los objetivos táctiles cumplen con los estándares de usabilidad móvil.

Integración de FontAwesome

Las fuentes de iconos vienen incluidas. Los íconos de FontAwesome funcionan en contenido y plantillas sin configuración adicional. Por puro rendimiento, podrías eliminar esta dependencia y usar íconos SVG en su lugar, pero para la mayoría de los sitios la conveniencia supera los gastos generales mínimos..

Pros y contras

Pros

• Ligero: Menos de 50 KB de CSS total (Espectro + Estilos personalizados de quarks), significativamente más pequeño que los temas basados ​​en Bootstrap
• herencia limpia: Ampliar sin modificar archivos principales, manteniendo las actualizaciones seguras
• Soporte oficial: Mantenido por los creadores de Grav con compatibilidad garantizada.
• Gratis y con licencia MIT: Sin costes, sin restricciones de uso comercial
• Archivos fuente SCSS: Variables y parciales organizados para personalización.
• Documentación sólida: Los documentos oficiales cubren detalladamente la configuración y la extensión.
• Dos sitios de esqueleto: Los esqueletos de blogs y de una página proporcionan ejemplos prácticos

Contras

• Estética básica: Funcional en lugar de visualmente distintivo, requiere personalización para una marca única
• Sin modo oscuro: Tema claro solo por defecto, las variantes oscuras requieren CSS personalizado o complementos comunitarios
• La galería requiere un complemento premium: El complemento Lightbox Gallery tiene un costo adicional para las galerías de imágenes modales
• Limitaciones de Spectre.css: Menos componentes prediseñados que Bootstrap significa más trabajo personalizado para UI complejas
• Requiere gravedad 1.4+: Las instalaciones antiguas de Grav no pueden usar Quark sin actualizar
• Curva de aprendizaje para la personalización: La herencia de temas y las plantillas de Twig requieren cierta comodidad técnica

¿Quién debería utilizar Quark??

Mejor para

Desarrolladores que crean temas Grav personalizados: La estructura limpia y el sistema de herencia de Quark lo convierten en el punto de partida ideal.. En lugar de construir desde cero, amplíe Quark y céntrese en lo que hace que su tema sea único.

Sitios de blogs o portafolios simples: Si necesitas una limpieza, sitio rápido sin requisitos de diseño distintivos, Quark maneja lo básico. Agregar contenido a través de Markdown, configurar colores y logo, publicar.

Proyectos centrados en el desempeño: Cuando la velocidad de la página importa (y normalmente lo hace), El peso ligero de Quark mantiene los tiempos de carga al mínimo. Combinado con la arquitectura de archivos planos de Grav, obtienes un sitio rápido sin complementos de optimización.

Aprendizaje del desarrollo de Grav: Las plantillas de Quark demuestran claramente las convenciones de Grav. Estudiando cómo Quark maneja las plantillas, configuración, y activos enseña patrones aplicables a cualquier tema Grav.

Saltar si

Quieres distinción visual sin codificación: Quark parece el tema inicial de un desarrollador porque eso es lo que es. Si necesita un diseño pulido listo para usar, Los temas comerciales de Grav o alternativas como Gateway ofrecen más personalidad visual..

Necesita funciones complejas de comercio electrónico o membresía: Grave (y por extensión Quark) apunta a sitios de contenido en lugar de aplicaciones. Para tiendas en línea o sitios de membresía, WordPress o plataformas dedicadas encajan mejor. Nuestro guía de alojamiento en la nube cubre opciones que admiten múltiples plataformas CMS.

El modo oscuro es esencial: Los quarks se envían sólo con luz. Existen soluciones comunitarias, pero si el modo oscuro nativo importa, invertirás tiempo en personalización o elegirás un tema diferente.

Alternativas a los quarks

Ofertas Grav terminadas 100 temas gratis. Así es como se comparan las alternativas notables con Quark:

Publicación abierta de Quark

Una versión modificada de Quark construida por Paul Hibbitts para documentación y contenido educativo.. Agrega integración de Git Sync para control de versiones, “sin cromo” visualización para incrustar contenido en plataformas LMS como Canvas o Moodle, y características del blog. Si está creando materiales de curso abiertos o documentación que debe estar en varios lugares, esta variante resuelve problemas que Quark no aborda. Misma base Spectre.css, por lo que el rendimiento sigue siendo comparable.

Tema Bootstrap4

Cambia Spectre.css por Bootstrap 4. La compensación es clara: Bootstrap agrega aproximadamente 15 KB más de CSS pero trae cientos de componentes prediseñados, documentación extensa, y una comunidad masiva. Si su equipo ya conoce Bootstrap o necesita patrones de interfaz de usuario complejos (modales, carruseles, acordeones) sin trabajo personalizado, Bootstrap4 ahorra tiempo. Para sitios simples, La huella más ligera de Quark gana.

Puerta

Donde Quark es el lienzo de un desarrollador, Gateway es una pintura terminada.. Se envía con un diseño visual pulido., múltiples esquemas de color, y opciones fáciles de usar para usuarios no técnicos. Gateway se dirige a personas que desean un sitio que funcione sin tocar el código. La desventaja: menos flexibilidad para el desarrollo personalizado, y el tamaño del archivo es mayor que el de Quark.

Hipertexto

La opción minimalista extrema. JavaScript cero, apenas nada de CSS. Las páginas se cargan casi instantáneamente porque no hay casi nada que cargar. El hipertexto funciona para sitios con mucho texto donde el contenido importa más que la presentación. Pierdes diseños responsivos, íconos, y el pulido más visual. Pero para fanáticos del diseño brutalista o requisitos absolutos de rendimiento, nada lo supera.

Antimateria (Legado)

El valor predeterminado anterior de Grav antes de Quark. Todavía funciona, todavía recibe parches ocasionales, pero el desarrollo activo se ha desplazado hacia Quark. Si tiene sitios de Antimateria existentes, ellos seguirán corriendo. Para nuevos proyectos, elige Quark en su lugar. La migración de Antimateria a Quark requiere ajustes de plantilla ya que utilizan estructuras diferentes.

Instalación

Quark se instala automáticamente con cualquier instalación nueva de Grav. Para sitios Grav existentes sin Quark:

A través de GPM (Recomendado)

Desde su directorio raíz de Grav, correr:

bin/gpm install quark

Esto descarga Quark a /user/themes/quark y maneja las dependencias automáticamente.

Instalación manual

1. Descarga el tema desde GitHub (getgrav/grav-tema-quark)
2. Extraer a /your/site/grav/user/themes/
3. Cambie el nombre de la carpeta a quark
4. Habilite en su sitio system.yaml o a través del panel de administración

Usando esqueletos

Para nuevos sitios, los paquetes One-Page Skeleton o Blog Skeleton incluyen Quark preconfigurado con contenido de muestra. Este enfoque le permite comenzar más rápido que instalar Grav core y agregar un tema por separado..

Guía de personalización

CSS personalizado (Enfoque sencillo)

quark busca css/custom.css en el directorio de temas. Cree este archivo para agregar estilos sin tocar el CSS central de Quark. Los cambios persisten a través de actualizaciones del tema.. Esto funciona para ajustes de color., cambios de fuente, y ajustes menores en el diseño.

Problema importante: Si edita los archivos CSS integrados de Quark directamente, tus cambios se borran en la próxima actualización del tema. Utilice siempre custom.css o herencia de tema. Esto atrapa a muchos nuevos usuarios de Grav..

Herencia del tema (Recomendado para cambios significativos)

Para modificaciones más grandes, crear un tema hijo:

1. Crea una nueva carpeta en /user/themes/ (p.ej, mytheme)
2. Añadir un blueprints.yaml declarando a Quark como padre
3. Agregue solo los archivos que desea anular
4. Activa tu tema hijo en lugar de Quark

Aquí hay un mínimo blueprints.yaml para empezar:

nombre: My Theme
version: 1.0.0
descripción: Custom theme extending Quark
author:
  nombre: Your Name
dependencies:
  - { nombre: grave, versión: '>=1.6.0' }
  - cuarc

Su tema hijo hereda todas las plantillas de Quark, CSS, y configuración. Anule plantillas específicas colocando versiones modificadas en su carpeta de temas. Las actualizaciones de Quark no afectarán sus personalizaciones.

Logotipo personalizado

Arrastre y suelte a través de las opciones de tema del panel de administración o coloque archivos de logotipo en /user/themes/quark/images/logo/. Quark admite variantes de logotipos independientes para escritorio y dispositivos móviles si su diseño requiere diferentes dimensiones para cada contexto..

Compilación SCSS

Los estilos fuente de Quark utilizan SCSS. Para una personalización avanzada:

1. Clonar o copiar archivos SCSS de Quark
2. Modificar variables (colores, fuentes, espaciado)
3. Compila usando tu herramienta preferida (Hilo, secuencias de comandos npm, o la compilación de activos incorporada de Grav)
4. Implementar CSS compilado

Este enfoque brinda control total sobre las variables de Spectre.css y las adiciones personalizadas de Quark..

Preguntas frecuentes

¿Quark es de uso comercial gratuito??

si. Quark utiliza la licencia MIT, permitiendo el uso comercial sin restricciones. Puedes usarlo para sitios de clientes., vender temas construidos sobre él, o modifícalo como necesites. No se requiere atribución, aunque se agradece.

¿Quark funciona con todos los complementos de Grav??

La mayoría de los complementos funcionan con cualquier tema de Grav, incluyendo quark. La excepción son los complementos que requieren enlaces de plantillas específicos o compatibilidad con temas.. La plantilla modular de la galería requiere el complemento Lightbox Gallery (prima). Consulte la documentación del complemento para conocer los requisitos de compatibilidad del tema..

¿Cómo agrego el modo oscuro a Quark??

Quark no incluye el modo oscuro nativo. El enfoque más limpio: crear un tema hijo que anule las variables de color de Spectre en SCSS. Objetivo $primary-color, $body-bg, y $body-font-color como puntos de partida. Para un interruptor de palanca, necesitarás JavaScript para intercambiar clases de CSS. Louis Charette, miembro de la comunidad, publicó una guía de implementación del modo oscuro que explica todo el proceso.. Presupuesto 2-4 horas para una implementación básica, más tiempo para pulir.

¿Puedo usar Quark sin conocimientos de codificación??

Para sitios básicos, si. Instalar gravedad, configurar las opciones de Quark a través del panel de administración, agregar contenido en Markdown. Una personalización más significativa requiere comodidad con CSS como mínimo, y los cambios de plantilla requieren comprensión de Twig. Quark se encuentra en el punto medio entre los temas sin código y los marcos exclusivos para desarrolladores..

¿Debo usar Quark o crear un tema personalizado desde cero??

Empezar con quark. Incluso los desarrolladores experimentados ahorran tiempo heredando de Quark en lugar de construir cada componente desde cero.. Quark maneja la paginación, navegación, comportamiento receptivo, y plantillas comunes. Construir sobre esa base en lugar de reinventarla.

Veredicto final

Quark tiene éxito en lo que los temas predeterminados suelen fallar: siendo realmente útil más allá de la instalación inicial. La base Spectre.css mantiene los sitios livianos. La herencia de temas permite a los desarrolladores personalizar sin luchar contra las actualizaciones. Las plantillas modulares manejan patrones comunes. no es llamativo, y eso es intencional.

Para desarrolladores, Quark es el punto de partida obvio para el desarrollo del tema Grav. Para no desarrolladores que desean sitios simples, Funciona si la distinción visual no es una prioridad.. Para cualquiera que necesite un diseño pulido sin trabajo de personalización, Mire Gateway o alternativas comerciales en su lugar..

La falta de modo oscuro y la dependencia de un complemento premium para galerías son limitaciones reales. Pero gratis, Tema con licencia del MIT mantenido por los creadores de Grav, esos compromisos son razonables. Utilice Quark como base, extenderlo por herencia, y concentre su tiempo en lo que hace que su sitio sea único en lugar de reconstruir componentes estándar.

Si estás explorando Grav para un nuevo proyecto, elegir el alojamiento adecuado es importante. Vea nuestro Comparación de alojamiento gravitacional para proveedores optimizados para el rendimiento de CMS de archivos planos. Para otros temas de Grav que vale la pena considerar, revisa nuestro Comparación de temas Grav más rápida.