Como criar temas Drupal modernos com Radix e Bootstrap 5

Se você deseja criar um tema moderno, flexível e baseado em componentes para Drupal 10 ou 11, o tema Radix é uma excelente escolha. Ele combina tecnologias avançadas que aceleram o desenvolvimento e garantem que seu site seja responsivo, performático e fácil de manter.

Por que usar Radix + Bootstrap 5?

• Componentização: facilita a reutilização, manutenção e escalabilidade dos elementos do tema.
• Tecnologias modernas: Sass para estilização avançada, BrowserSync para desenvolvimento com live reload e Bootstrap 5 para responsividade e consistência visual.
• Compatibilidade: preparado para Drupal 10 e 11, com suporte total ao Single Directory Components (SDC) do core.
• Fluxo de trabalho otimizado: com Laravel Mix, BiomeJS e outras ferramentas modernas que oferecem produtividade, organização e controle no desenvolvimento.

🔥 O que vem com o Radix?

• Bootstrap 5 totalmente integrado, para um design responsivo e consistente.
• Sass, para pré-processamento CSS e organização do código.
• Laravel Mix, que simplifica o build dos arquivos de CSS e JavaScript.
• BrowserSync, que permite desenvolvimento ágil com live reload.
• BiomeJS, para linting, formatação e padronização do código.
• Estrutura baseada em componentes reutilizáveis, tornando o desenvolvimento mais escalável, organizado e de fácil manutenção.

👉 Importante: O Radix é um tema pai e não deve ser utilizado diretamente no seu site. A prática recomendada é criar um subtema personalizado baseado no Radix, onde você pode aplicar suas personalizações de forma segura, mantendo a estabilidade e facilitando futuras atualizações.

Para um guia completo e atualizado, acesse a documentação oficial do Radix e também a página do projeto no Drupal.org.

Como utilizei para gerar o tema deste site:

Uma das grandes vantagens de utilizar o Radix como tema base é aproveitar uma estrutura sólida e diversos componentes prontos, todos baseados no Bootstrap 5.

Isso torna o desenvolvimento muito mais rápido, pois toda a base de componentes do Bootstrap já vem implementada no tema. Só precisamos estender e customizar conforme as necessidades do projeto.

O Radix já entrega diversos templates do Drupal utilizando seus próprios components. Por exemplo:

• Status Messages: utiliza o componente Alert do Bootstrap.
• Menus: utiliza o componente Nav do Bootstrap.
• Campos (Fields): já aplicam corretamente as classes do Bootstrap para estilização consistente.
• E muitos outros.

Um dos recursos que mais utilizei foi a possibilidade de adicionar custom_classes diretamente nos components. Para cada component, o Radix permite passar um array de utility_classes, facilitando a aplicação de estilos como espaçamentos e alinhamentos.

Para cada component o array the utility_classes muda e segue o padrão do nome do component + modificador + utility_classes. Exemplo no component de alert, é chamado de alert_utility_classes.

{%
 include 'radix:alert' with {
   type: 'success',
   heading: 'VOSIX Systems!',
   dismissible: true,
   alert_utility_classes: ['pt-2', 'mb-4'],
   content: 'Fale com a gente!'
 }
%}

Abaixo, um exemplo de como aplico custom_classes em um block. A variável custom_classes vem de um field no próprio bloco e é passada via preprocess para o template:

{%
  include 'radix:block' with {
    block_utility_classes: custom_classes ?: [],
  }
%}

A implementação de um accordion, por exemplo, foi bem simples. Foi criado um custom block e adicionei um field do tipo paragraph para gerenciar os itens. Veja como ficou o template:

{% embed "radix:block" %}
  {% block block_content %}
    {% if content %}
      {{ content.body }}
      {% set title = content.field_title %}
      {% set accordion_items = [] %}
      {% for item in items %}
        {% set accordion_item = {
          title: item['title'],
          content: item['content'],
          stay_open: true
        } %}
        {% set accordion_items = accordion_items|merge([accordion_item]) %}
      {% endfor %}
      {% include 'radix:accordion' with {
        title: '',
        accordion_utility_classes: custom_classes,
        flush: true,
        items: accordion_items
      } %}
    {% endif %}
  {% endblock %}
{% endembed %}

Utilizando o Radix, todo o processo de desenvolvimento do tema ficou muito mais ágil e organizado. Além disso, ele já vem preparado com comandos para compilar SCSS e JavaScript, otimizando ainda mais o fluxo de trabalho.

O tema Radix com Bootstrap 5 é uma solução poderosa para desenvolvedores Drupal que buscam criar temas modernos, responsivos e baseados em componentes reutilizáveis e bem estruturados. Se você quer acelerar seu desenvolvimento e entregar um site com alta qualidade, o Radix é uma escolha muito inteligente.

Precisa de ajuda para criar, personalizar ou evoluir seu tema Drupal com Radix? Na VOSIX Systems oferecemos soluções rápidas, profissionais e sob medida, para que seu site tenha performance, escalabilidade e um visual de alto nível.

👉 Fale conosco e leve seu projeto Drupal ao próximo nível!