Theme en Drupal 8

Pako Garcia

Vegan Themer at
@pakmanlh in the internets

#DdayBilbao2014

¿De dónde venimos?

¿Cómo era la web en 2011?

  • jQuery
  • 78% web in XHTML
  • PHP 5.4.0 RC4 Released
  • Wordpress
  • Google AdSense

fuente

¿Cómo cambió Drupal?

Drupal 7 fue lanzado el 5 de enero del 2011

  • Mejora sustancial en la UI de administración (Seven)
  • Contenido flexible y campos configurables
  • Mejora visual y capa de theming con Render API
  • Accesibilidad mejorada en gran medida
  • Soporte de imágenes incluido
  • Automated code testing
  • Mejora de soporte de base de datos
  • Mejora de soporte a distribuciones
  • Soporte para Semantic Web a través de RDFa markup

10,091 mentions

¿Hacia dónde vamos?

La web hoy día:

  • HTML5
  • SASS
  • Mobile first
  • OOP (Symfony)
  • JavaScript (AngularJS, Backbone, CasperJS, etc)

¿Cómo será Drupal 8?

Drupal 8 released in ... ¿ September 2015 ?

  • WYSIWYG
  • In-Place Editing
  • Responsive Toolbar
  • Responsive Front-End Theme
  • Responsive Admin Theme
  • Responsive Images
  • Responsive Tables
  • Simplified Overlay

¿Cómo será Drupal 8?

Y además...

  • Multilingual
  • Better Blocks
  • Configuration Management
  • Web Services
  • Symfony 2
  • Twig
  • Views

¿Cómo será Drupal 8?

Y SOBRETODO

  • No soportará IE6
  • No soportará IE7
  • No soportará IE8

Problemas a resolver

Divitis

Marcado enriquecido tm


					

					  

					    


					      
hello im drupal


					      

					        always add another div

sobrecarga css

27 archivos css en drupal 7 stark

sobrecarga css

5 classes para cada uno de los campos


					

					    wait im just a piece of data

Solución Frontend

  • Empezar desde nada
  • No solucionar TODOS los problemas
  • Proveer herramientas
  • Visibilidad
  • Consistencia

HTML5


				        

				          
				        

				        


				          
				          

				            ...

<div id="mala-práctica">...</div>

75% menos de ID's *

Drupal CSS

Drupal 7


				        <body class="html one-sidebar sidebar-first not-front logged-in
				        page-node page-node- page-node-4 node-type-fieldtest ">

Drupal8


				        <body class="  how-about-we_figure_that-out ">

Estructura CSS

Basado en SMACSS & BEM

CSS architecture (1887918) 

				      // .block__element--modifier
				      .notification {
				          /* general styles for all notifications */
				        }
				        .notification--info {
				          /* blue color adjustments */
				        }

Archivos css

B.A.T. Namescheme

D8 Estructura de archivos


Drupal 8 core

/themes

proveer visibilidad

themes ahora viven en "/themes"

o "sites/ *** /themes"

D8 Estructura de archivos en módulos

modulename/templates/*.html.twig

DEBUG!

¿Dónde está la plantilla?

DEBUG!


				        $settings['twig_debug'] = TRUE;
settings.php

$settings['twig_debug'] = TRUE;

R I P

Theme functions

Render arrays FTW!

Compilación

Las plantillas twig son interpretables (Back y Front)

.scss -> .css

(no todavía pero con previsión)

¿ SQL en la capa de theme ?

¿Quien quiere eso?

Malos desarrolladores

Themes son solamente marcado y css!

Branding y logo

ahora es un bloque exportable

Twig Básico

facilísimo

Comentarios y variables 


				    /*
				    comment
				    */
				      <?php print $foo ; ?>
phptemplate 

				      {# comment #}

				      {{ foo }}
twig

Variables 


				   /*
				    so php template
				    Now where is that value again
				   */

				 <?php print $foo['bar']['UND']->baz['what']->thefuck['seriously'] ?>
phptemplate 

				      {# hello twig can you find valdo ? #}

				      {{ foo.bar.baz.done.with.this.shit }}

				      {{ foo['bar'] }}

				      {% functions %}
Twig

Condicionales


				    <?php if($foo): ?>
				      <?php print $var; ?>
				    <?php endif; ?>
phptemplate 

				      {% if foo %}
				        {{ var }}
				      {% endif %}
twig

Bucles


				      
Team Awesome 

				      
    
				        {% for user in users %}
				            
  • {{ user.username}}
    • 
				        {% endfor %}
twig 

				      
Team Awesome 

				      
    
				        
  • cottset
    • 
				        
  • joel
    • 
				        
  • jen
    • 
				        
  • mark carver
    • 
				        
  • mortendk
    •
drupal8

Acciones sobre bucles



				    {{ loop.length }}

				    {{ loop.first }}

				    {{ loop.last }}

				    {{ loop.index }}

				    {% if loop.first %}
				      ...
				    {% elseif loop.index == 2 %}
				      ...
				    {% elseif loop.last %}
				        ...
				    {% endif %}

Set


				      {% set foo %}
				        count-{{ loop.index }}
				      {% endset %}

				      {{ foo }},
twig 

				      count-1,count-2, count-3,
output

Filtros 


				     

				    {% filter upper %}
				        uppercase for the win
				    {% endfilter %}
				    

				    

				      

				        UPPERCASE FOR THE WIN

|filter 


				      {{ foo|dostufftofoo }}

				      {#  name = pako #}
				      {{ name|striptags|title }}
twig 

				      Pako

Más sobre filtros

Documentación

Drupal8 Theme

theme structure

drupal7.info


				      name = name
				      description = This is my epic D7 theme
				      screenshot = screenshot.png
				      engine = phptemplate
				      core = 7.x
				      php = 5.2

				      regions[header] = Header
				      regions[logo] = Logo
				      regions[menu] = Menu
				      regions[messages] = Messages
				      regions[content] = Content
				      regions[footer] = Footer

				      stylesheets[all][] = css/style.css
				      #FOAD fix
				      stylesheets[all][] = donteverloadmeagain.css

drupal8.info.yml


				      name: drupal8themename
				      type: theme
				      description: This is my epic D8 theme
				      package: Core
				      core: 8.x

				      stylesheets:
				        all:
				          - css/layout.css
				        print:
				          - css/print.css
				        stylesheets-remove:
				          - system.theme.css
				          - user.icons.css
				          - stuffidontwant.css

				      regions:
				        header: Header
				        logo: Logo
				        menu: Menu
				        messages: Messages
				        content: Content
				        footer: Footer

				      # engine: phptemplate

Si sois amantes de phptemplate




				      # engine: phptemplate
themename.info

Sobreescribir


				      stylesheets[all][] = css/style.css
				      #FOAD fix
				      ;stylesheets[all][] = donteverloadmeagain.css
				      stylesheets[all][] = system.theme.css
				      stylesheets[all][] = user.icons.css
				      stylesheets[all][] = stuffidontwant.css
drupal 7 

				        stylesheets-remove:
				          - system.theme.css
				          - user.icons.css
				          - stuffidontwant.css
drupal 8

Regiones en Page

Drupal 7


				<?php if ($page['footer']): ?>
				  

				    <?php print render($page[footer]);  ?>
				  

				<?php endid ?>
<?php print render($page[region]); ?>

Drupal 8


				  {% if page.footer %}
				  

				    {{ page.footer}}
				  

				{% endif %}
twig: {{ page.region }}

Blocks


				    <div{{ attributes }}>
				      {{ title_prefix }}
				      {% if label %}
				        <h2{{ title_attributes }}>{{ label }}</h2>
				      {% endif %}
				      {{ title_suffix }}

				      <div{{ content_attributes }}>
				        {{ content }}
				      </div>
				    </div>
block.twig 

				    <nav class="{{ attributes.class }}" role="{{ attributes.role}}">
				      {{ title_prefix }}
				      {% if label %}
				        <h2{{ title_attributes }}>{{ label }}</h2>
				      {% endif %}
				      {{ title_suffix }}
				      {{ content }}
				    </nav>
block--system-menu-block.html.twig

block.html.twig

theme hook suggestions

{{ whatever|replace }}


				      
...

				      {{ attributes.class |replace( {'block': '' }) }}
block.html. 

				      <nav class="{{ attributes.class }}" role="{{ attributes.role}}">
				        {{ title_prefix }}
				        {% if label %}
				          <h2{{ title_attributes }}>{{ label }}</h2>
				        {% endif %}
				        {{ title_suffix }}

				        {{ content }}
				      </nav>
block--system-menu-block.html.twig
Done

{{attributes}}


				    
 ... 

				    

				    

				      ...
				    

				     

				      

				      ....

add .foo



				      

				        foo
.twig 

				      

				        foo
drupal

ejemplo con Términos

el Marcado deseado

HTML 


				      <div class="tags">
				        3 tags:

				        foo,
				        bar,
				        baz.

				      </div>
CSS 

				      .resaltado{
				        color: green;
				        font-style:italic;
				      }

node


				        

				        ....
				        {{ content.field_tags}}

				        {{ content|without('field_tags') }}
node.html.twig

{{ content|without(field-name) }}



{{ fieldname }}


				    {# Start the loop #}
				    {% for delta, item in items %}

				      {# create a class var #}
				      {% set class %}
				        {# odd even #}
				        {{- cycle(["even", "odd"], delta) }}
				        {# count-x #}
				        count-{{ loop.index -}}"
				      {% endset %}

				      {{item}},

				    {# end the loop #}
				    {% endfor %}
field--field-tags.html.twig 

				       Iturraspe,
				       Goikoetxea,
				       Aldaiturriaga,
drupal8

tags vs tag


				      {# first loop #}
				      {% if loop.first %}
				        {# set tags / tag #}
				        
				        {% if loop.length > 1 %}
				          {{ loop.length }}
				          tags:
				          {% else %}
				          tag:
				        {% endif %}
				        
				      ...
field--field-tags.html.twig 

				      3 tags:

add a class on 2 tag


				      {% if loop.first %}
				        ...
				      {% elseif loop.index == 2 %}
				      {{item}},

				      ...

				    {# end the loop #}
				    {% endfor %}
field--field-tags.html.twig 

				       Iturraspe
				       Goikoetxea
				       Aldaiturriaga
				    

				      {% if loop.first %}
				        
				        {% if loop.length > 1 %}
				          {{ loop.length }}  tags:
				        {% else %}
				        tag:
				        {% endif %}
				        

				        {{item}},
				      {% elseif loop.index == 2 %}
				        {{item}},
				      {% elseif loop.last %}
				        {{item}}.
				      {% else %}
				        {{item}},
				      {% endif %}
field--field-tags.html.twig 

				        3 tags:
				       Iturraspe,
				       Goikoetxea,
				       Aldaiturriaga.

TWIG BLOCK


				      {% block foobar %}
				        {# puedo ser otra cosa #}
				      {% endblock %}
				    

				      {% block headerblock %}
				        Change me if Im on the frontpage
				      {% endblock %}
page.twig.html 

				      {% extends "themes/drupal8theme/templates/page.html.twig" %}
				      {% block headerblock %}
				        Im on the frontpage :)
				      {% endblock %}
page--front.html.twig

Traducción

Filtro

función t() como filtro con parámetro


				    {{ 'last checked: @time ago'| t({'@time':time}) }}

Definición de texto traducible


				      {% trans %}
				        Hi im a euskaldun and i speak funny: ongi etorri
				      {% endtrans %}

Manejo de plurales


				      {% trans %}
				        Kaixo euskaldun.
				      {% plural count %}
				        Kaixo {{ count }} euskaldunes.
				      {% endtrans %}

Nuevo tema en core

Con lo justo y necesario, nada más

Crear nuevo tema basado en sassy (.info.yml)


							name: Awesome Theme
							description: 'An awesome D8 theme.'
							base theme: classy
							package: Custom
							type: theme
							version: 1.0
							core: 8.x

Recursos

Eskerrik asko!

Preguntas?

Pako Garcia

pako.garcia@ymbra.com
Vegan Themer at
@pakmanlh in the internets

#DdayBilbao2014

many thanks to mortendk for the inspiration