Tema Quark para revisão do Grav CMS (2026): Padrão feito corretamente? - PT

Os temas padrão ganham má reputação. O WordPress vem com iniciadores genéricos que ninguém usa na produção. Os padrões do Joomla parecem desatualizados há meses. Então, quando Grav CMS substituiu Antimatter por Quark como tema padrão na versão 1.4, o ceticismo era justo. Mas Quark quebra o molde. É construído como base para o desenvolvimento, não apenas um espaço reservado para substituir imediatamente.

Veredicto rápido: Quark funciona como um tema inicial pronto para produção para desenvolvedores e uma solução finalizada para sites simples. A estrutura Spectre.css o mantém leve (menos de 50 KB CSS), a herança de tema permite que você personalize sem tocar nos arquivos principais, e modelos modulares lidam com layouts comuns. Não ganhará prêmios de design, mas esse não é o ponto. Quark fornece estrutura para que você possa construir sobre ela.

Ir para: O que é Quark | Características principais | Prós & Contras | Quem deve usá-lo | Alternativas | Instalação | Costumização | Perguntas frequentes | Veredito

Última revisão: marcha 2026. Baseado na versão Quark 2.1.2.

Qual é o tema Quark?

Quark é o tema padrão oficial do Grav CMS desde a versão 1.4. A equipe Grav (Trilby Media) construí-lo Spectre.css, uma estrutura CSS leve que tem aproximadamente um décimo do tamanho do Bootstrap. Cada instalação do Grav inclui Quark pronto para uso, e dois esqueletos do site oficial (Uma página e blog) use-o como base. Para uma visão mais ampla do Grav como plataforma, veja nosso revisão completa do Grav CMS.

O tema atende dois públicos. Os desenvolvedores ficam limpos, base bem documentada para a construção de temas personalizados através do sistema de herança do Grav. Não desenvolvedores obtêm um tema funcional para portfólios simples, blogs, ou sites de página única sem exigir trabalho de design. Ambos os grupos se beneficiam do foco do Quark no desempenho em detrimento da complexidade visual. Você pode ver o Quark em ação no site de demonstração oficial.

No GitHub, Quark tem 71 estrelas e 62 garfos com 19 lançamentos até o momento. Versão 2.1.2 (agosto 2025) é o mais recente, mostrando manutenção ativa da equipe Grav. A base de código é 77% SCSS (um pré-processador CSS que adiciona variáveis ​​e aninhamento), 18% Modelos de galho (Linguagem de modelagem de Grav), e JavaScript mínimo.

Algum contexto no próprio Grav: é um CMS de arquivo simples (nenhum banco de dados necessário) que armazena conteúdo em arquivos Markdown. As páginas carregam mais rápido porque não há sobrecarga de consulta MySQL. Quark aproveita esta arquitetura com JavaScript mínimo e CSS eficiente, mantendo a vantagem de desempenho intacta. Se você não está familiarizado com Grav, nosso Guia de hospedagem Grav cobre o CMS com mais detalhes.

Características principais

Fundação Spectre.css

Quark usa Spectre.css em vez de Bootstrap ou Tailwind. Essa escolha é importante para o tamanho do arquivo. Toda a biblioteca do Spectre roda em 10 KB compactada. Bootstrap 5 excede 25 KB. Para sites onde cada kilobyte afeta o tempo de carregamento, Spectre fornece grades responsivas, tipografia, e componentes sem inchaço. A compensação: menos componentes pré-construídos que Bootstrap, elementos de UI tão complexos exigem um trabalho mais personalizado.

Herança de tema

Aqui está o recurso matador do Quark para desenvolvedores. Em vez de editar o Quark diretamente (que quebra quando as atualizações chegam), você cria um tema filho que herda tudo do Quark e contém apenas suas modificações. Alterar um modelo, adicionar CSS personalizado, substituir configuração. O tema base permanece limpo e atualizável.

O que isso significa na prática? Você mantém o Quark atualizado para segurança e correções de bugs enquanto suas personalizações permanecem intactas. A maioria dos temas Grav suporta herança, mas a estrutura limpa do Quark torna-o mais fácil de estender do que alternativas mais opinativas.

Sistema de modelo modular

Quark inclui modelos para tipos de páginas comuns:

• Páginas padrão para conteúdo padrão
• Listagem de blogs e modelos de postagem para publicação
• Páginas de erro (404, etc.) com estilo adequado
• Seções modulares: herói, recursos, blocos de texto, galeria

A abordagem modular permite criar páginas a partir de seções reutilizáveis. Uma página inicial pode combinar uma seção heróica, três blocos de recursos, e uma seção de texto sem escrever modelos personalizados. Os módulos da Galeria requerem o plugin Lightbox Gallery premium, que é o único acesso pago notável no ecossistema do Quark.

Opções de configuração

Através do painel de administração do Grav ou arquivos YAML (arquivos de configuração de texto simples), Quark oferece esses controles:

• Modo de produção para entrega CSS minificada
• Cabeçalho fixo com animação de rolagem
• Estilo de cabeçalho (barra de cabeçalho escura, opções de transparência)
• Rodapé fixo comportamento
• Logotipo personalizado carregar (variantes para desktop e celular)
• Dimensionamento da grade (XL, LG, médico) para controle de layout

As substituições por página funcionam por meio do assunto inicial (YAML no topo dos arquivos de conteúdo). As classes corporais podem ser definidas individualmente para qualquer página, permitindo estilo seletivo sem modificações de tema.

Design responsivo que prioriza dispositivos móveis

Spectre.css lida com a capacidade de resposta por meio de uma grade flexbox de 12 colunas. O Quark implementa isso com navegação móvel que se fecha graciosamente em telas menores. O menu de hambúrguer aparece nos pontos de interrupção do tablet, e os alvos de toque atendem aos padrões de usabilidade móvel.

Integração FontAwesome

As fontes dos ícones vêm agrupadas. Os ícones FontAwesome funcionam em conteúdo e modelos sem configuração adicional. Para desempenho puro, você poderia remover essa dependência e usar ícones SVG, mas para a maioria dos sites a conveniência supera a sobrecarga mínima.

Prós e contras

Prós

• Leve: Menos de 50 KB de CSS total (Espectro + Estilos personalizados do Quark), significativamente menor que os temas baseados em Bootstrap
• Herança limpa: Estenda sem modificar os arquivos principais, mantendo as atualizações seguras
• Suporte oficial: Mantido pelos criadores do Grav com compatibilidade garantida
• Gratuito e licenciado pelo MIT: Sem custos, sem restrições ao uso comercial
• Arquivos de origem SCSS: Variáveis ​​e parciais organizadas para personalização
• Documentação sólida: Os documentos oficiais cobrem completamente a configuração e a extensão
• Dois sites de esqueleto: Esqueletos de blog e de uma página fornecem exemplos práticos

Contras

• Estética básica: Funcional em vez de visualmente distinto, requer personalização para uma marca exclusiva
• Sem modo escuro: Tema claro apenas por padrão, variantes escuras requerem CSS personalizado ou plug-ins da comunidade
• Galeria requer plugin premium: O plugin Lightbox Gallery tem um custo extra para galerias de imagens modais
• Limitações do Spectre.css: Menos componentes pré-construídos do que Bootstrap significam mais trabalho personalizado para UIs complexas
• Requer Grav 1.4+: Instalações Grav mais antigas não podem usar Quark sem atualização
• Curva de aprendizado para personalização: Herança de tema e modelagem Twig exigem algum conforto técnico

Quem deve usar Quark?

Melhor para

Desenvolvedores criando temas Grav personalizados: A estrutura limpa e o sistema de herança do Quark tornam-no o ponto de partida ideal. Em vez de construir do zero, estenda o Quark e concentre-se no que torna seu tema único.

Portfólio simples ou sites de blog: Se você precisar de uma limpeza, site rápido sem requisitos de design distintos, Quark lida com o básico. Adicione conteúdo através do Markdown, configurar cores e logotipo, publicar.

Projetos focados em desempenho: Quando a velocidade da página é importante (e geralmente acontece), A pegada leve do Quark mantém o tempo de carregamento mínimo. Combinado com a arquitetura de arquivo simples do Grav, você obtém um site rápido sem plug-ins de otimização.

Aprendendo o desenvolvimento Grav: Os modelos do Quark demonstram claramente as convenções Grav. Estudando como o Quark lida com templates, configuração, e ativos ensinam padrões aplicáveis ​​a qualquer tema Grav.

Pular se

Você quer distinção visual sem codificação: Quark parece um tema inicial de desenvolvedor porque é isso que é. Se você precisa de um design sofisticado pronto para uso, temas comerciais Grav ou alternativas como Gateway oferecem mais personalidade visual.

Você precisa de recursos complexos de comércio eletrônico ou associação: Grave (e por extensão Quark) tem como alvo sites de conteúdo em vez de aplicativos. Para lojas online ou sites de membros, WordPress ou plataformas dedicadas se adaptam melhor. Nosso guia de hospedagem na nuvem abrange opções que suportam múltiplas plataformas CMS.

O modo escuro é essencial: Quark envia apenas luz. Existem soluções comunitárias, mas se o modo escuro nativo for importante, você investirá tempo na personalização ou escolherá um tema diferente.

Alternativas de Quark

Grav oferece mais 100 temas gratuitos. Veja como alternativas notáveis ​​se comparam ao Quark:

Publicação aberta do Quark

Uma versão modificada do Quark construída por Paul Hibbitts para conteúdo educacional e documentação. Adiciona integração Git Sync para controle de versão, “sem cromo” display para incorporação de conteúdo em plataformas LMS como Canvas ou Moodle, e recursos do blog. Se você estiver criando materiais de curso abertos ou documentação que precisa estar em vários lugares, esta variante resolve problemas que Quark não aborda. Mesma base Spectre.css, para que o desempenho permaneça comparável.

Tema Bootstrap4

Troca Spectre.css por Bootstrap 4. A compensação é clara: Bootstrap adiciona cerca de 15 KB a mais de CSS, mas traz centenas de componentes pré-construídos, extensa documentação, e uma enorme comunidade. Se sua equipe já conhece Bootstrap ou você precisa de padrões de UI complexos (modais, carrosséis, acordeões) sem trabalho personalizado, Bootstrap4 economiza tempo. Para sites simples, A pegada mais leve do Quark vence.

Porta de entrada

Onde Quark é a tela do desenvolvedor, Gateway é uma pintura acabada. Ele vem com design visual sofisticado, vários esquemas de cores, e opções fáceis de usar para usuários não técnicos. Gateway tem como alvo pessoas que desejam um site funcional sem mexer no código. A desvantagem: menos flexibilidade para desenvolvimento personalizado, e o tamanho do arquivo é maior que o Quark.

Hipertexto

A opção extremamente minimalista. Zero JavaScript, quase nenhum CSS. As páginas carregam quase instantaneamente porque não há quase nada para carregar. O hipertexto funciona para sites com muito texto, onde o conteúdo é mais importante do que a apresentação. Você perde layouts responsivos, ícones, e mais polimento visual. Mas para fãs de design brutalistas ou requisitos absolutos de desempenho, nada supera isso.

Antimatéria (Legado)

O padrão anterior de Grav antes de Quark. Ainda funciona, ainda recebe patches ocasionais, mas o desenvolvimento ativo mudou para Quark. Se você já possui sites de Antimatéria, eles continuarão correndo. Para novos projetos, escolha Quark em vez disso. A migração da Antimatéria para o Quark requer ajustes de modelo, uma vez que utilizam estruturas diferentes.

Instalação

O Quark é instalado automaticamente com qualquer nova instalação do Grav. Para sites Grav existentes sem Quark:

Através do GPM (Recomendado)

Do seu diretório raiz Grav, correr:

bin/gpm install quark

Isso baixa o Quark para /user/themes/quark e lida com dependências automaticamente.

Instalação manual

1. Baixe o tema do GitHub (getgrav/grav-tema-quark)
2. Extrair para /your/site/grav/user/themes/
3. Renomeie a pasta para quark
4. Habilite no seu site system.yaml ou através do painel de administração

Usando esqueletos

Para novos sites, os pacotes One-Page Skeleton ou Blog Skeleton incluem Quark pré-configurado com conteúdo de amostra. Essa abordagem permite que você comece mais rápido do que instalar o Grav core e adicionar um tema separadamente.

Guia de personalização

CSS customizado (Abordagem Simples)

Quark procura css/custom.css no diretório do tema. Crie este arquivo para adicionar estilos sem tocar no CSS principal do Quark. As alterações persistem por meio de atualizações de tema. Isso funciona para ajustes de cores, mudanças de fonte, e pequenos ajustes de layout.

Pegadinha importante: Se você editar diretamente os arquivos CSS integrados do Quark, suas alterações serão apagadas na próxima atualização do tema. Sempre use custom.css ou herança de tema. Isso atrai muitos novos usuários do Grav.

Herança de tema (Recomendado para mudanças significativas)

Para modificações maiores, crie um tema filho:

1. Crie uma nova pasta em /user/themes/ (por exemplo, mytheme)
2. Adicione um blueprints.yaml declarando Quark como o pai
3. Adicione apenas os arquivos que deseja substituir
4. Ative seu tema filho em vez do Quark

Aqui está um mínimo blueprints.yaml para começar:

nome: My Theme
version: 1.0.0
descrição: Custom theme extending Quark
author:
  nome: Your Name
dependencies:
  - { nome: grave, versão: '>=1.6.0' }
  - Quark

Seu tema filho herda todos os modelos do Quark, CSS, e configuração. Substitua modelos específicos colocando versões modificadas na pasta do seu tema. As atualizações do Quark não afetarão suas personalizações.

Logotipo personalizado

Arraste e solte nas opções de tema do painel do administrador ou coloque arquivos de logotipo em /user/themes/quark/images/logo/. O Quark oferece suporte a variantes separadas de logotipo para desktop e celular se o seu design exigir dimensões diferentes para cada contexto.

Compilação SCSS

Os estilos de origem do Quark usam SCSS. Para personalização avançada:

1. Clone ou copie os arquivos SCSS do Quark
2. Modificar variáveis (cores, fontes, espaçamento)
3. Compile usando sua ferramenta preferida (Fio, scripts npm, ou compilação de ativos integrada do Grav)
4. Implantar CSS compilado

Esta abordagem oferece controle total sobre as variáveis ​​Spectre.css e as adições personalizadas do Quark.

perguntas frequentes

O Quark é gratuito para uso comercial??

sim. Quark usa a licença do MIT, permitindo o uso comercial sem restrições. Você pode usá-lo para sites de clientes, vender temas construídos nele, ou modifique-o como você precisar. Nenhuma atribuição necessária, embora seja apreciado.

O Quark funciona com todos os plug-ins Grav??

A maioria dos plug-ins funciona com qualquer tema Grav, incluindo Quark. A exceção são os plug-ins que exigem ganchos de modelo específicos ou suporte a temas. O modelo modular da galeria requer o plugin Lightbox Gallery (Prêmio). Verifique a documentação do plugin para requisitos de compatibilidade de tema.

Como adiciono o modo escuro ao Quark?

Quark não inclui modo escuro nativo. A abordagem mais limpa: crie um tema filho que substitua as variáveis ​​​​de cores do Spectre no SCSS. Alvo $primary-color, $body-bg, e $body-font-color como pontos de partida. Para uma chave seletora, você precisará de JavaScript para trocar classes CSS. O membro da comunidade Louis Charette publicou um guia de implementação do modo escuro que percorre todo o processo. Despesas 2-4 horas para uma implementação básica, mais tempo para polir.

Posso usar o Quark sem conhecimento de codificação??

Para sites básicos, sim. Instalar Grav, configure as opções do Quark através do painel de administração, adicionar conteúdo no Markdown. Uma personalização mais significativa requer, no mínimo, conforto com CSS, e mudanças de modelo exigem compreensão do Twig. Quark fica no meio termo entre temas sem código e estruturas somente para desenvolvedores.

Devo usar o Quark ou criar um tema personalizado do zero??

Comece com Quark. Até mesmo desenvolvedores experientes economizam tempo herdando do Quark em vez de construir todos os componentes do zero. Quark lida com paginação, navegação, comportamento responsivo, e modelos comuns. Construa sobre essa base em vez de reinventá-la.

Veredicto Final

Quark consegue fazer o que os temas padrão geralmente falham: sendo genuinamente útil além da instalação inicial. A base Spectre.css mantém os sites leves. A herança de tema permite que os desenvolvedores personalizem sem lutar contra as atualizações. Modelos modulares lidam com padrões comuns. Não é chamativo, e isso é intencional.

Para desenvolvedores, Quark é o ponto de partida óbvio para o desenvolvimento do tema Grav. Para não desenvolvedores que desejam sites simples, funciona se a distinção visual não for uma prioridade. Para quem precisa de um design sofisticado sem trabalho de personalização, procure o Gateway ou alternativas comerciais.

A falta do modo escuro e a dependência de um plugin premium para galerias são limitações reais. Mas de graça, Tema licenciado pelo MIT mantido pelos criadores do Grav, esses compromissos são razoáveis. Use Quark como base, estendê-lo através de herança, e concentre seu tempo no que torna seu site único, em vez de reconstruir componentes padrão.

Se você estiver explorando Grav para um novo projeto, escolher a hospedagem certa é importante. Veja nosso Comparação de hospedagem Grav para provedores otimizados para desempenho de CMS de arquivo simples. Para outros temas Grav que vale a pena considerar, confira nosso comparação mais rápida de temas Grav.