T W I G !

Drupal8 theming

Midcamp chicago 2014

Offended ?

i'm so sörry

Grammar nazi

The slides are on github

me:

@mortendk

Morten

Birch

heide-jørgensen

birch

bitch

Drupal since 4.7: 8 years

Frontend United !

King Drupal Denmark

Theme: Mothership

Drupal Association Board member

geek Röyale - copenhagens finest themes

So What is Actually wrong with Drupal Theming ?

From the frontend perspective ?

sorry devs you can moan later

2 things:

Divitis

Rich Markup (tm)

hello im drupal

always add another div

css overload

27 css files in drupal 7 stark

css overload

5 classes for each field

wait im just a piece of data

Drupals Frontend Problems:

1. the markup

2 .the css

why

Blame ?

The "Developers"

The Themer

One markup to rule! em all

Nobody told us what to do!

Pretty please...

TWIG

Anger driven development ;)

Amsterdam

San Francisco

PHP template

TWIG

a little bit of french elegance

Lets make a plan

Dont 100%

Build on sensible use cases!

Dont Dumb it down

Themers are not that Dumb

the Frontend experience

Start from nothing
Dont solve all problems
Provide tools
Visibility
consistency
dont dumb it down

New awesome [sjeit]

or 666 reasons why Drupal8 is better than Drupal7

HTML 5

HTML5

      home | info

...

Drupal8 DONT support

ie 6

ie 7

ie 8

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

Approved

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!

Drupal7 Mothership (tm)

Mothership

Compiled

the twig templates are compiled

.scss -> .css

(yes its the same thingie that compiling thing)

SQL in a theme ?

Who does that ?

Bad Developers

Themes are markup & css!

SELECT * FROM users

 
      
          ....

Branding & logo

HARD coded

Branding & logo

is now a block

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

github.com/mortendk/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

if 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

...

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

      
        ... content ...

Done

...

...

      
      ....

add .foo

foo

.twig

foo

drupal

Terms

the designer is an idiot

and they wanna support ie "something"

the Markup

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

      </div>

the markup

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

node

        
        ....
        {{ content.field_tags}}

        {{ content|without('field_tags') }}

node.html.twig

    {# 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: Höidy hoeeeydi 
      {% endtrans %}

Höidy hoeeeydi

HEROs wanted

twig team

cottser joel jen lampton mortendk ruben mark carver fabianx marc Drummond

YOU :)

#Drupaltwig weekly meeting

Thursdays at 6pm

IRC: #drupal-twig

Codesprint Tomorrow

10:00

Field

#Drupaltwig

drupaltwig.org

resourses

TWIG documentation drupaltwig.org http://mortendk.github.io/drupal8-twig-chicago-2014

T W I G ! – Drupal8 theming – Midcamp chicago 2014

mortendk

T W I G ! – Drupal8 theming – Midcamp chicago 2014

1 0 (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

drupal8-twig-chicago-2014

T W I G !

Drupal8 theming

Midcamp chicago 2014

Offended ?

Grammar nazi

me:

@mortendk

Morten

Birch

heide-jørgensen

birch

bitch

Drupal since 4.7: 8 years

Frontend United !

King Drupal Denmark

Theme: Mothership

Drupal Association Board member

So What is Actually wrong with Drupal Theming ?

2 things:

Divitis

Rich Markup (tm)

hello im drupal

css overload

css overload

5 classes for each field

Drupals Frontend Problems:

1. the markup

2 .the css

why

Blame ?

The "Developers"

The Themer

One markup to rule! em all

Nobody told us what to do!

Pretty please...

TWIG

Anger driven development ;)

Amsterdam

San Francisco

PHP template

TWIG

a little bit of french elegance

Lets make a plan

Dont 100%

Dont Dumb it down

the Frontend experience

New awesome [sjeit]

HTML 5

HTML5

Drupal8 DONT support

ie 6

ie 7

ie 8

Pretty markup

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

Drupal CSS

Drupal 7

Drupal8

CSS Stucture

Build on SMACSS

css filenames

Approved

B.A.T. Namescheme

D8 File Structure

/themes

D8 File structure modules

wheres that template ?

DEBUG!

$settings['twig_debug'] = TRUE;

DEBUG!

Drupal7 Mothership (tm)

Compiled

.scss -> .css

SQL in a theme ?

Who does that ?

1 0