Antes do Twitter Bootstrap, havia (e é) o ZURB Foundation, uma estrutura que permite adicionar botões bonitos, grades de blocos, barras de progresso, tabelas de preços e muito mais com algumas classes CSS bem posicionadas. Com o tema da Fundação ZURB para o Drupal, você pode liberar todo esse bling no seu site Drupal com facilidade fatal.
O que é a estrutura da Fundação ZURB?
O framework ZURB Foundation é uma coleção de códigos CSS e Javascript para um monte de coisas que você provavelmente quer no seu site. Isso inclui não apenas o colírio para olhos clicável, como os botões mencionados, mas também uma capacidade de resposta realmente incrível.
Você usa a maioria desses recursos adicionando classes CSS especiais. Por exemplo:
Aqui está um .
E aqui está um botão minúsculo.
A estrutura da ZURB Foundation é totalmente separada do Drupal. As pessoas usam o WordPress, Joomla e até mesmo sites HTML estáticos.
O que é o tema Drupal da Fundação ZURB?
A Fundação Drupal ZURB tema permite que você libere todo esse poder do ZURBish apenas baixando e ativando um tema (e lendo a documentação e dando alguns passos extras, é claro).
Por exemplo, o ZURB Foundation depende da biblioteca Javascript do jQuery, então você provavelmente terá que instalar o jQuery Update. Verifique se você está usando outros módulos que dependem do jQuery. Se você usar uma versão nova do jQuery, esses módulos poderão parar de funcionar.
Além disso, você provavelmente desejará usar esse tema como um tema básico para seu próprio tema personalizado. A personalização é onde a ZURB Foundation realmente brilha.
Você precisa deste tema para usar a Fundação ZURB no Drupal?
Você não precisar este tema para usar o framework ZURB Foundation. Na sua forma mais simples, este tema apenas adiciona o CSS e Javascript da ZURB Foundation ao seu site, e você pode fazer isso manualmente.
Mas esse tema torna isso mais fácil e também inclui alguma integração com o Drupal.
Além disso, você pode adicionar módulos adicionais menores para maior integração. Por exemplo, o módulo ZURB Orbit permite criar uma apresentação de slides Orbit com campos de imagem. O módulo ZURB Clearing permite criar mesas de luz responsivas com imagens de mídia.
Nota: Eu ainda não usei esses pequenos módulos, então eles podem estar cheios de perigos. Até esta data, a ZURB Clearing requer
Media-2.x-dev, o que pode ser uma atualização perigosa se você estiver usando o Media 1.x. E um requisito para uma versão de desenvolvimento de um módulo deve sempre dar uma pausa. Ainda assim, esses e outros módulos ZURB valem a pena investigar.
Escolha qual versão do ZURB Foundation usar
Antes de baixar o tema do ZURB Foundation, verifique qual versão você deve usar. Existem diferentes versões principais do framework ZURB Foundation, e o maior número de versão do tema corresponde ao framework com o qual ele trabalha. Então o
7.x-3.x versões do tema trabalham com Foundation 3, a
7.x-4.x versões funcionam com Foundation 4, e as
7.x-5.x Versões funcionam com Foundation 5.
Como desta escrita, a versão estável mais recente do tema é 7.x-4.x, que funciona com o Foundation 4. A versão 7.x-5.x ainda está em desenvolvimento. Portanto, embora o site da estrutura da fundação pressuponha que você usará o Foundation 5, talvez seja melhor manter o Foundation 4 por enquanto.
Observe também que a Foundation 5 tem requisitos extras, especialmente jQuery
1.10. Foundation 4 só precisa de jQuery
1.7+.
Esteja ciente de qual versão do Foundation você está usando ao ler a documentação on-line. Isso é especialmente verdadeiro se você não estiver usando a versão mais recente do framework. É fatalmente fácil escorregar na leitura dos documentos para, digamos, Foundation 5, e depois ficar frustrado quando um novo recurso não funciona no seu site Foundation 4.
Por exemplo, a Fundação 5 inclui um conjunto completo de
médio classes para telas de tamanho médio. Na Foundation 4, estes irão falhar misteriosamente a menos que você tome medidas extras.
Use SASS, Compass e "_variables.scss"!
Se você estiver indo para ajustar o CSS para este tema, certifique-se de:
- Use o tema da Fundação ZURB como um tema básico para o seu próprio subtema personalizado
- Gere este subtema usando o
drush comando fornecido pelo tema. Como isso:
drush fst your_theme_name
- Leia atentamente o excelente
_variables.scss Arquivo
o
_variables.scss arquivo é criado automaticamente por
drush fst. Este arquivo único contém variáveis para quase qualquer coisa você pode querer ajustar em seu tema CSS. É incrível! Tudo em um só lugar, você pode definir tudo, desde a fonte padrão até a largura da tela, até a borda no breadcrumbs.
Claro, você sempre pode configurar arquivos adicionais também. Mas
_variables.scss é um lugar esplêndido para começar.
Observe a extensão do arquivo:
scss, não
css. Usar
_variables.scss, você precisará configurar o SASS (uma linguagem de extensão CSS) e o Compass (um framework construído com o SASS). Quando você corre
compilação de bússola, seu
scss os arquivos se transformarão em CSS adorável em arquivos separados. (Eu prefiro
relógio de bússola - isso continua correndo e atualizando o CSS enquanto você ajusta o
scss arquivos.)
Se você realmente não quer se incomodar com o SASS, você pode escrever arquivos CSS como de costume e listá-los em seu tema.
.info Arquivo. Mas confie em mim - o minúsculo investimento de tempo para aprender o suficiente para compilar
_variables.scss será pago quase instantaneamente.
Antes de usar o ZURB Foundation
O ZURB Foundation é o mais excelente, mas não é o único framework de front-end integrado ao Drupal. Você pode querer considerar o Bootstrap, um framework similar que também possui um tema do Drupal. Por enquanto, estou usando a ZURB Foundation, mas isso é porque minha pesquisa indicou que era mais fácil de personalizar do que o Bootstrap.
Além disso, o componente Joyride é bem legal.
E se você usa o ZURB Foundation, o Bootstrap ou algum outro framework, certifique-se de obter essas dicas sobre como usar um framework com o Drupal.
