introducción comprensivo al theming para drupal 7 front-end
DESCRIPTION
Una breve introducción a las estructuras, conceptos, teorias y buenas practicas que utilizamos para el Front End.TRANSCRIPT
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