introducción comprensivo al theming para drupal 7 front-end

Introducción Comprensivo al Drupal

Front-endJames Wilson

@jwilson3jwilson3.postach.io

• Templates.

• HTML.tpl.php

• Page.tpl.php

• Hooks.

• Themes.

• Tips

• clear cache

• clear registry

Levanta la mano.

Drupal 8: Twig (.twig.html)HTML5 por defecto

Drupal 7: PHP Template (.tpl.php)XHTML por defecto

D8 D7

Conceptos

Conceptos

“Don't hack core”

Conceptos

“Don't hack core”

“Don’t hack contrib”

Conceptos

“Don't hack core”

“Don’t hack contrib”

Aplica a themes también.

Conceptos

• Utilizar "Base themes” (temas de base).

• Crear “Child themes” (sub-temas) para heredar funcionalidad, estilos, etc.

• Usa precaución con actualizaciones, que puedan romper tu sitio.

• Revisar linea-por-linea los cambios (ejem. con GIT) y las páginas que podrían estar afectadas.

CSS

Herencia de hojas de estilo• el sistema

• system.base.css

• system.menus.css

• system.messages.css

• system.theme.css

• los módulos (core y contrib)

• el tema ancestral (si se puede tener multiples!)

• el tema de base.

• el tema propio.

• Herencia funciona, siempre y cuando los archivos no tengan el *mismo* nombre.

mytheme.info

Aggregation

template.php

Override

En vez de editar system.theme.css: cópielo a tu tema, agrégalo al *.info

y editar.

:)

Override

Para editar un template que proviene del core o un módulo de contrib, cópielo a tu tema y editar.

Preprocess

Buscar un tema base• Popularidad ¿Cuántas instalaciones hay?

• Estructura de los archivos ¿es ordenado?

• ¿Grid system / regions / layouts?

• ¿Fijo / fluido / responsive / adaptive?

• ¿SASS o solo CSS?

• Calidad de CSS (SMACSS, BEM, CSS3)

• Minimalistic o relleno con estilos vacíos.

• La parte visual: ¿fácil de manipular?

• Estructura DOM.

Buscar un tema base• http://drupal.org/project/themes

• Twitter Bootstrap - Responsive

• Omega 3 - Adaptive (960gs)

• Omega 4 - Responsive (SASS)

• Zen 5 - Responsive (SASS)

Herramientas

EditorSublime Text :) o VIM

Control de versiones / diffgit & GitHub, FileMerge, SourceTree

Design Testhttps://drupal.org/project/design

Preguntas

http://chapterthree.com/blog/design-drupal-template-approach

Gracias!@jwilson3