Drupalcamp London 2014







T W I G !

Drupal8 theming

DrupalCamp London 2014






Offended ?

me:

@mortendk

Morten

Birch

heide-jørgensen

birch

bitch

Drupal since 4.7: 8 years

Frontend United !

King at Drupal Denmark

mothership

geek royale

Copenhagens Finest Themes (tm)

Fair warning

Im the definition of everything thats nasty, evil, despeckable & dark in this world
im just quoting my ex

Send me

Recruiters:

2 Rules:

Dont ask me if i do database!

I will drink your booze

whats wrong with Drupal

So What is
Actually wrong
with
Drupal Theming ?

From the frontend perspective ?

sorry devs you can moan later

2 things:

Rich Markup (tm)




  

    


      
hello im drupal


      

        always add another div
27 css files in drupal 7 stark

Drupals Frontend Problems

the markup

the css

W T F

Blame ?

lets point a finger

The "Developers"

The Themer

One markup to rule! em all

css overwriting


Nobody told us
what to do!







Pretty please...

TWIG "initiative"

Was not an official thing

Guerilla TWIG

Anger driven development ;)




Amsterdam




San Francisco

PHP template
dead to me!

TWIG

a little bit of french elegance

Lets make a plan

Frontend united amsterdam march 2012 badcamp 2012 Drupalcon Munich 2012 Drupalcon Portland 2013 frontend united london 2013

Dont do 100%

Build on usercases!

Dont Dumb it down

Themers are not that Dumb

the Frontend experience

  • Start from nothing
  • Provide tools
  • Visibility
  • consistency
  • dont dumb it down

New awesome [sjeit]

or 666 reasons why Drupal8 is better than Drupal7

HTML 5

HTML5


      

        
      

      


        
        

          ...

we DONT support

ie 6

ie 7

ie 8

(theres a module for that )

Pretty markup

<div id="badpractive">...</div>

37% less id *

counting at alpha9

* kinda

Drupal CSS

Drupal 7


      <body class="html facepalm whateverthefuck ">

Drupal8


      <body class="">

CSS Stucture

Build on SMACSS

CSS architecture (1887918) 

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

css filenames

Aproved

B.A.T. Namescheme

CSS file organization (nid: 1887922)

D8 File Structure


Drupal 8 core

/themes

provide visibility

themes now lives in "/themes"

or "sites/ *** /themes"

D8 File structure modules

modulename/templates/*.html.twig

wheres that template ?

DEBUG!


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

$settings['twig_debug'] = TRUE;

DEBUG!

Mothership (tm)

Mothership

Compiled

the twig templates are compiled

.scss -> .css

template.html.twig -> php

No more <?php print "php" ; ?>

No more DB

inside a theme...

Who does that ?

Bad Developers

No Themer wanna touch that shit

select * from table

 
      

        

          ....

settings.php


      $settings['twig_debug'] = TRUE;
  
      $settings['twig_auto_reload'] = TRUE;

Twig Basic

its dead easy

comments & vars 


    /*
    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

If / else


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

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

loops


      
Team Awesome 

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

      
Team Awesome 

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

loop stuff


  
    {{ 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

filter 


     

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

    

      

        UPPERCASE FOR THE WIN

|filter 


      {{ foo|dostufftofoo }}
    
      {#  name = morten #}
      {{ name|striptags|title }}
twig 

      Morten

Drupal8 Theme

Yggdrasil

theme structure


      name: drupal7themename
      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

drupal7.info


      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

drupal8.info

you phptemplate


   

      # engine: phptemplate
themename.info

FOAD

its now build in


      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

Regions on 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

Attribuets

Lets manipulate attributes


      <body {{attribues}}>
page.html.html

{{attributes}}

<div {{attributes}}> ... </div>


    
 ... 

    

    
 
      ...
    

     

      

      ....

add .foo



      

        foo
.twig 

      

        foo
drupal

Terms

the designer is an idiot

the Markup


      
      <section class="tags">
        3 tags:
        
        foo, 
        bar, 
        baz.

      </section>
the markup 

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

    {# 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 

       Odin,
       Thor,
       Freya,
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 

       Odin
       Thor
       Freya       
    

      {% 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:
       Odin,
       Thor,
       Freya.

TWIG BLOCK


      {% block foobar %}
        {# i can be something else #}
      {% endblock %}
    

      {% block headerblock %}
        change me if im on the frontpage
      {% endblock %}
page.twig.html 

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

translate


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

      {% trans %}
        Hi im a swede and i speak funny
      {% endtrans %}








swedish

HERO's wanted

#dreammarkup

twig team

cottser, joel, jen lampton, mortendk, ruben, markcarver, fabianX. YOU!

#Drupaltwig weekly meeting

Thursdays at 1am CET

on IRC: #drupal-twig

Codesprint tomorrow

joels hitlist http://dev.drupaltwig.org/joelpittet/hitlist

https://drupal.org/node/2114563

merge html.html.twig with page.html.twig html.html.twig https://drupal.org/node/2090967

node.html.twig https://drupal.org/node/2004252

alpha release: https://drupal.org/node/3060/release

codesprints upcoming

Drupal Dev Days sZeged + midcamp chicago

#Drupaltwig

resourses

Questions?