Theme en Drupal 8 – Pako Garcia – ¿De dónde venimos?

View Github Repository Open presentation in a new window

pakmanlh

See all presentation from pakmanlh

Theme en Drupal 8 – Pako Garcia – ¿De dónde venimos?

0 0

DdayBilbao2014

Slide

On Github pakmanlh / DdayBilbao2014

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

<div class="foo bar baz whatever">
					  <div class="foo bar baz whatever">
					    <div class="foo bar baz whatever">

					      <h1 class="pane-title">hello im drupal</h1>

					      <div class="node node-type node-viewmode-argh">
					        always add another div
					      </div>

					    </div>
					  </div>
					</div>

sobrecarga css

27 archivos css en drupal 7 stark 
<style media="all">
  @import url("sites/modules/system/system.base.css?mz4mz0");
  @import url("sites/modules/system/system.menus.css?mz4mz0");
  @import url("sites/modules/system/system.messages.css?mz4mz0");
  @import url("sites/modules/system/system.theme.css?mz4mz0");</style>
<style media="all">
  @import url("sites/modules/contextual/contextual.css?mz4mz0");
</style>
<style media="all">
  @import url("sites/modules/aggregator/aggregator.css?mz4mz0");
  @import url("sites/modules/book/book.css?mz4mz0");
  @import url("sites/modules/comment/comment.css?mz4mz0");
  @import url("sites/sites/all/modules/contrib/date/date_api/date.css?mz4mz0");
  @import url("sites/modules/field/theme/field.css?mz4mz0");
  @import url("sites/modules/node/node.css?mz4mz0");
  @import url("sites/sites/all/modules/contrib/picture/picture_wysiwyg.css?mz4mz0");
  @import url("sites/modules/poll/poll.css?mz4mz0");
  @import url("sites/modules/search/search.css?mz4mz0");
  @import url("sites/sites/all/modules/contrib/search_krumo/search_krumo.css?mz4mz0");
  @import url("sites/modules/user/user.css?mz4mz0");
  @import url("sites/sites/all/modules/contrib/video_filter/video_filter.css?mz4mz0");
  @import url("sites/modules/forum/forum.css?mz4mz0");
  @import url("sites/sites/all/modules/contrib/views/css/views.css?mz4mz0");
  @import url("sites/sites/all/modules/contrib/admin_menu/admin_menu.css?mz4mz0");
  @import url("sites/sites/all/modules/contrib/admin_menu/admin_menu.uid1.css?mz4mz0");
</style>
<style media="all">
  @import url("sites/sites/all/modules/contrib/ctools/css/ctools.css?mz4mz0");
  @import url("sites/sites/all/modules/contrib/panels/css/panels.css?mz4mz0");
  @import url("sites/sites/all/modules/contrib/panels/plugins/layouts/twocol_stacked/twocol_stacked.css?mz4mz0");
  @import url("sites/sites/all/themes/mothership/mothership/templates/panels//mothership-html5page/mothership-html5page.admin.css?mz4mz0");
</style>
<style media="all">
  @import url("sites/themes/stark/layout.css?mz4mz0");
</style>

sobrecarga css

5 classes para cada uno de los campos

					<div class="field field-something field-even_more another-field-cause-im-drupal">
					    wait im just a piece of data
					</div>

Solución Frontend

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

HTML5

				        <header role="banner">
				          <nav>
				            <a href="/">home</a> | <a href="/info">info</a>
				          </nav>
				        </header>
				        <main>

				          
				          <div>
				            ...
				          </div>
				        </main>
				        <footer role="">
				        </footer>

<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

				      <h2>Team Awesome </h2>
				      <ul>
				        {% for user in users %}
				            <li>{{ user.username}}</li>
				        {% endfor %}
				      </ul>
twig 
				      <h2>Team Awesome </h2>
				      <ul>
				        <li>cottset</li>
				        <li>joel</li>
				        <li>jen</li>
				        <li>mark carver</li>
				        <li>mortendk</li>
				      </ul>
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 

				     <p>
				    {% filter upper %}
				        uppercase for the win
				    {% endfilter %}
				    </p>
				    
				      <p>
				        UPPERCASE FOR THE WIN
				      </p>

|filter 

				      {{ foo|dostufftofoo }}

				      {#  name = <a hred="foo">pako</a> #}
				      {{ 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']): ?>
				  <footer role="contentinfo">
				    <?php print render($page[footer]);  ?>
				  </footer>
				<?php endid ?>
<?php print render($page[region]); ?>

Drupal 8

{% if page.footer %}
				  <footer role="contentinfo">
				    {{ page.footer}}
				  </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 }}

<div class="block blockmore blockmorecauseofdrupal">...</div>
				      {{ 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 
<nav class="l-foobar mainmenu" role="navigation">
				        ... content ...
				      </nav>
Done

{{attributes}}

				    <article {{attributes}}=""> ... </article>
				    
				    <article class="{{attributes.class}}" {{attributes}}="">
				      ...
				    </article>
				     
				      <article class="{{ attributes.class }}" role="{{ attributes.role }}" {{attributes}}="">
				      ....
				      </article>

add .foo


				      <article class="foo {{ attributes.class}}" {{attributes}}="">
				        foo
				      </article>
.twig 
				      <article class="foo field-foo" role="something">
				        foo
				      </article>
drupal

ejemplo con Términos

el Marcado deseado

HTML 

				      <div class="tags">
				        <span>3 tags:</span>

				        <a href="#" class="odd">foo</a>,
				        <a href="#" class="even resaltado">bar</a>,
				        <a href="#" class="odd">baz</a>.

				      </div>
CSS 
				      .resaltado{
				        color: green;
				        font-style:italic;
				      }

node

				        <article class="...">
				        ....
				        {{ content.field_tags}}

				        {{ content|without('field_tags') }}
				        </article>
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 %}

				      <a href="#" class="{{class}}">{{item}}</a>,

				    {# end the loop #}
				    {% endfor %}
field--field-tags.html.twig 
				       <a href="#" class="odd count-1">Iturraspe</a>,
				       <a href="#" class="even count-2">Goikoetxea</a>,
				       <a href="#" class="odd count-3">Aldaiturriaga</a>,
drupal8

tags vs tag

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

add a class on 2 tag

				      {% if loop.first %}
				        ...
				      {% elseif loop.index == 2 %}
				      <a href="#" class="resaltado {{class}}">{{item}}</a>,

				      ...

				    {# end the loop #}
				    {% endfor %}
field--field-tags.html.twig 
				       <a href="#" class="odd count-1">Iturraspe</a>
				       <a href="#" class="resaltado even count-2">Goikoetxea</a>
				       <a href="#" class="odd count-3">Aldaiturriaga</a>
				    
				      {% if loop.first %}
				        <span>
				        {% if loop.length > 1 %}
				          {{ loop.length }}  tags:
				        {% else %}
				        tag:
				        {% endif %}
				        <span>

				        <a href="#" class="{{class}}">{{item}}</a>,
				      {% elseif loop.index == 2 %}
				        <a href="#" class="resaltado {{class}}">{{item}}</a>,
				      {% elseif loop.last %}
				        <a href="#" class="{{class}}">{{item}}</a>.
				      {% else %}
				        <a href="#" class="{{class}}">{{item}}</a>,
				      {% endif %}
				    </span></span>
field--field-tags.html.twig 
				        3 tags:
				       <a href="#" class="odd count-1">Iturraspe</a>,
				       <a href="#" class="resaltado even count-2">Goikoetxea</a>,
				       <a href="#" class="odd count-3">Aldaiturriaga</a>.

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

<a href="{{ url('<front>') }}" title="{{ 'Home'|t }}" rel="home" class="site-logo"></a>

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.comVegan Themer at @pakmanlh in the internets

#DdayBilbao2014

many thanks to mortendk for the inspiration