Instalando o Twitter Bootstrap no Drupal 7

Um dos frameworks de programação front-end mais populares do mercado também tem se tornado um dos mais populares base themes (temas que servem de base criação de outros) para Drupal. O Bootstrap — que já foi chamado de Twitter Bootstrap - traz um excelente conjunto de ferramentas para desenvolvimento de interfaces. Dentre suas principais características, destaco:

O Drupal já tem vários temas baseados no framework, mas neste artigo eu vou mostrar a instalação e configuração do Bootstrap.

Atualizando a versão do jQuery

O Bootstrap 3 necessita do jQuery 1.9.0+ para funcionar. Entretanto a versão padrão do jQuery no Drupal 7 é a 1.4.4. A forma mais simples de fazer upgrade é utilizando o módulo jQuery Update. Escrevi um rápido tutorial sobre a atualização do jQuery no Drupal 7. Se você não sabe como fazê-lo, recomendo a leitura antes de prosseguir com a instalação do Bootstrap.

Instalando o tema Bootstrap

A instalação do Bootstrap segue o mesmo padrão de qualquer outro tema. São 3 simples passos: Download, Extração e Instalação

Efetuando o download

Na página do projeto, escolha a última versão estável para Drupal 7. No momento em que escrevo este artigo, a versão recomendada é a 7.x-3.0. Escolha o formato que preferir (zip ou tar.gz) e faça download.

Download do Bootstrap

Extraindo no seu diretório de temas

É muito comum que principiantes cometam erros nesse passo. Vou tentar esclarecer de forma simples.

No pacote do Drupal, existem vários arquivos e diretórios que fazem parte do seu núcleo. Na raiz, há uma pasta chamado themes e muitos acham que é ali que devem ficar os novos temas. Embora vá funcionar, este não é o procedimento recomendado por um simples motivo: os arquivos e diretórios da raiz fazem parte do núcleo do Drupal. No dia em que você precisar fazer alguma atualização no Drupal, correrá um sério risco de perder todo conteúdo extra colocado nelas.

A pasta sites é a única exceção à regra acima. É abaixo dela que deverão ficar os módulos, temas, bibliotecas e outros arquivos relacionadas ao seu site. Se você tem uma simples instalação de Drupal, você pode extrair seu tema em sites/default/themes ou sites/all/themes — a segunda é mais usual. Se sua instalação fizer parte de uma estrutura de multisites, você também pode utilizar o caminho sites/example.com/themes (trocando example.com pelo seu domínio).

Diretório de temas

Habilitando o tema Bootstrap

Essa parte é simples. Depois de extrair o Bootstrap dentro do diretório de temas, acesse a interface de administração da Aparência do Drupal (admin/appearance). Na área dos temas desativados, você verá o Bootstrap. Basta clicar no link "Habilitar e definir como padrão" (ou "Enable and set default").

Ao fechar o overlay, você poderá ver que o Bootstrap já estará disponível na interface pública do seu site. Simples assim :)

Interface pública do site com Bootstrap

Atenção: Se, por acaso, a interface pública do seu site não estiver com o novo tema ativado, tente (1) recarregar a página e/ou (2) limpar o cache.

BootstrapCDN e Bootswatch

Acessando a página de configuração do tema Bootstrap (admin/appearance/settings/bootstrap), você poderá ver várias opções para sua personalização. Essas opções estão organizadas em 3 grupos: Components, JavaScript e Advanced.

Configurações do tema Bootstrap

Não vou detalhar cada opção disponível, acho que vale a pena você testar uma-por-uma. Mas gostaria de destacar o BootstrapCDN, que está disponível no grupo Advanced. Esse recurso permite que você utilize o Bootstrap sem precisar hospedados os arquivos localmente no seu servidor. Ou seja, ao invés de você baixar todo o pacote, o tema utilizará os arquivos hospedados no BootstrapCDN. Embora não haja garantia de 100% de uptime, esse é um dos mais populares serviços de CDN pra Bootstrap e tem se mostrado bem estável.

Outra fantástica opção é a seleção de um tema do Bootswatch. Assim, a interface pública do seu site não vai ficar com aquele estilo padrão do Bootstrap. Eu curto quase todos os estilos disponibilizados pelo Bootswatch e já usei em diversos projetos. Basta selecionar uma opção e salvar; seu site já estará com outra cara :)

Seleção da versão do CDN e Bootswatch

Como complemento, no próximo artigo eu vou mostrar como criar um tema baseado no Bootstrap, com arquivos do framework hospedados localmente. Cadastre-se para ser notificado.

Espero que você tenha curtido por enquanto. Fique a vontade para deixar seu comentário ;)