Una breve introducción a las estructuras, conceptos, teorias y buenas practicas que utilizamos para el Front End.

1. Introducción
Comprensivo al Drupal
Front-end
James Wilson

2. @jwilson3
jwilson3.postach.io

4. • Templates.
• HTML.tpl.php
• Page.tpl.php
• Hooks.
• Themes.
• Tips
• clear cache
• clear registry

5. Levanta la mano.

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

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

11. D8 D7

12. Conceptos

13. Conceptos
“Don't hack core”

14. Conceptos
“Don't hack core”
“Don’t hack contrib”

15. Conceptos
“Don't hack core”
“Don’t hack contrib”
Aplica a themes también.

16. Conceptos
• Utilizar "Base themes” (temas de base).
• Crear “Child themes” (sub-temas) para heredar
funcionalidad, estilos, etc.

17. • 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.

19. CSS

20. 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.

21. mytheme.info

22. Aggregation

23. template.php

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

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

26. Preprocess

27. 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.

28. Buscar un tema base
• http://drupal.org/project/themes
• Twitter Bootstrap - Responsive
• Omega 3 - Adaptive (960gs)
• Omega 4 - Responsive (SASS)
• Zen 5 - Responsive (SASS)

29. Herramientas

30. Editor
Sublime Text :) o VIM

31. Control de versiones / diff
git & GitHub, FileMerge, SourceTree

32. Design Test
https://drupal.org/project/design

36. Preguntas

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

38. Gracias!
@jwilson3