Usando o Tema da Fundación ZURB para Drupal

Obter o poder do framework da Fundación ZURB nun tema Drupal

Antes había Twitter Bootstrap , había (e é) a Fundación ZURB, un marco que permite engadir botóns bonitos, bloqueo de redes, barras de progreso, táboas de prezos e moito máis con algunhas clases CSS ben colocadas. Co tema da Fundación ZURB para Drupal, podes desencadear todo este bling no teu sitio de Drupal con facilidade mortal.

¿Que é o marco da Fundación ZURB?

O marco da Fundación ZURB é unha colección de código CSS e Javascript para unha morea de cousas que probablemente desexas no teu sitio web. Isto inclúe non só os doces do ollo que se poden facer clic nos botóns antes mencionados, senón tamén algúns poderosos receptores.

Utiliza a maioría destas características engadindo clases CSS especiais. Por exemplo:

Aquí está o botón .

E aquí ten un pequeno botón botón pequeno .

O marco da Fundación ZURB está totalmente separado de Drupal. A xente úsana en WordPress, Joomla e ata nos sitios HTML estáticos .

¿Que é o Tema Drupal da Fundación ZURB?

O tema da Fundación Drupal ZURB permítelle desencadear todo este poder de ZURBish simplemente descargando e habilitando un tema (e lendo a documentación e tomando algúns pasos adicionais, por suposto).

Por exemplo, a Fundación ZURB baséase na biblioteca jQuery Javascript, polo que probabelmente terás que instalar a actualización jQuery. Comprobe se está a usar outros módulos que dependan de jQuery. Se usa unha versión moi nova de jQuery, estes módulos poden deixar de funcionar.

Ademais, probabelmente quererá usar este tema como un tema básico para o seu propio tema personalizado. A personalización é a que realmente brilla a Fundación ZURB.

Necesitas este tema para usar a Fundación ZURB en Drupal?

Non necesita este tema para usar o marco da Fundación ZURB. No seu aspecto máis sinxelo, este tema só engade o CSS da Fundación ZURB e Javascript ao seu sitio e pode facelo manualmente.

Pero este tema facilita isto e tamén inclúe máis integración con Drupal.

Ademais, pode engadir módulos adicionais menores para unha maior integración. Por exemplo, o módulo Orbit ZURB permítelle crear unha presentación de diapositivas con campos de imaxe. O módulo ZURB Clearing permítelle crear caixas luminosas sensibles con imaxes de medios.

Nota: Aínda non usei estes pequenos módulos, polo que poden estar cheos de perigos. A partir deste escrito, ZURB Clearing require Media-2.x-dev, que podería ser unha actualización perigosa se actualmente usa Media 1.x. E un requisito para unha versión de desenvolvemento dun módulo sempre debe dar unha pausa. Aínda así, hai que ter en conta estes e outros módulos ZURB.

Escolla cal versión da Fundación ZURB usar

Antes de descargar o tema da Fundación ZURB, verifique a versión que debe usar. Existen diferentes versións principais do marco da Fundación ZURB e o número de versión principal do tema corresponde ao marco co que funciona. Polo tanto, as versións 7.x- 3.x do tema traballan con Foundation 3 , as versións 7.x- 4x actúan coa Fundación 4 e as versións 7.x- 5 .x funcionan con Foundation 5 .

A partir deste escrito, a última versión estable do tema é 7.x-4.x, que funciona coa Fundación 4. A versión 7.x-5.x aínda está en desenvolvemento. Entón, aínda que o sitio web da Fundación base supón que utilizará a Fundación 5, quizais quédese coa Fundación 4 por agora.

Tampouco teña en conta que Foundation 5 ten requisitos extras, especialmente jQuery 1.10. A Fundación 4 só precisa jQuery 1.7+.

Teña en conta a versión de Fundación que está a usar cando le a documentación en liña. Isto é especialmente verdadeiro se non está a usar a última versión do framework. É doado de escoitar a lectura dos documentos para, por exemplo, a Fundación 5, entón fíltanos cando unha nova función non funciona no teu sitio de Foundation 4.

Por exemplo, a Fundación 5 inclúe todo un conxunto de clases medias para pantallas medianas. Na Fundación 4, fallarán misteriosamente a menos que tome medidas adicionais.

Use SASS, Compass e & # 34; _variables.scss & # 34 ;!

Se vai modificar o CSS para este tema, asegúrese de que:

  • Use o tema da Fundación ZURB como tema básico para o teu propio subtema personalizado
  • Xerar este subtema usando o comando drush fornecido polo tema. Así: drush fst your_theme_name
  • Repasca o excelente arquivo _variables.scss

O ficheiro _variables.scss créase automaticamente por drush fst. Este único ficheiro contén variables para case todo o que queiras que queres modificar no teu tema CSS. É asombroso! Todo nun só lugar, pode configurar todo dende o tipo de letra predeterminado ata o ancho da pantalla no bordo do rato.

Por suposto, sempre podes configurar ficheiros adicionais. Pero _variables.scss é un lugar espléndido para comezar.

Teña en conta a extensión do ficheiro: scss, non css. Para usar _variables.scss, necesitará configurar SASS (un idioma de extensión CSS) e Compass (un framework construído con SASS). Cando execute compás compilar, os seus ficheiros scss converteranse en CSS encantador en arquivos separados. (Prefiro asistir compás: isto continúa funcionando e actualiza o CSS mentres axusta os ficheiros scss).

Se realmente, realmente non queres molestar co SASS, podes escribir ficheiros CSS como de costume e listalos no arquivo .info do teu tema. Pero confía en min - o pequeno investimento de tempo para aprender o suficiente como para compilar variables _variables será devolto case ao instante.

Antes de usar a Fundación ZURB

A Fundación ZURB é a máis excelente, pero non é o único marco de interface que integrou Drupal. Pode querer considerar Bootstrap , un cadro similar que tamén ten un tema Drupal. Por agora, estou usando a propia Fundación ZURB, pero iso é porque a miña investigación indicou que era máis fácil de personalizar que Bootstrap.

Ademais, o compoñente de Joyride é bastante doce.

E se usa ZURB Foundation, Bootstrap ou algún outro cadro, asegúrese de obter estes consellos sobre o uso dun framework con Drupal .