This document discusses changes to Drupal 8 theme development including: 1. Adopting SMACSS and BEM coding standards for CSS organization and naming. 2. Switching from PHP templates to the Twig templating language for improved security and easier development. 3. Changes to the theme structure including new files like .info.yml and .libraries.yml and moving templates to .html.twig files.

1. DRUPAL 8 版型開發變⾰革
Chris Wu

2. TIME TO START WITH
DRUPAL 8

3. CODING
STANDARD
SMACSS & BEM

4. SMACSS - Scalable and Modular Architecture for CSS
Base
Layout
Module
State
Theme

5. BEM
.block__element--modifier
Block
Element
Modifier

6. BLOCK
node
__
ELEMENT
title
__
ELEMENT
content
BLOCK
field
__
ELEMENT
label
__
ELEMENT
items
-­‐-­‐
MODIFIER
active
BEM

7. NO CLASS
In Drupal Core

8. CLASSY
The New Core Theme

9. THEME LAYER
Classy
SparkBartik Seven
Drupal Core

10. THEME
structure changed

11. [theme].info.yml
[theme].theme
THEME - STRUCTURE CHANGED
/theme
[theme].libraries.yml
[theme].breakpoin.yml

12. name:
Foo
type:
theme
base
theme:
classy
description:
'Foo
bar
theme'
core:
8.x
libraries:
-­‐
foo/global-­‐styling
-­‐
foo/bar
regions:
header:
Header
primary_menu:
'Primary
menu'
secondary_menu:
'Secondary
menu'
.INFO.YML

13. TEMPLATING

14. Template Suggestion
Pattern: node--[type|nodeid].tpl.php
1 node--nodeid.tpl.php
2 node--type.tpl.php
3 node.tpl.php
Pattern: node--[type|nodeid].html.twig
1 node--nodeid.html.twig
2 node--type.html.twig
3 node.html.twig
標題⽂文字

15. TWIG
no more theme_() and *.tpl.php

16. • 版型檔案不允許直接執⾏行
PHP
，讓版型更為安全。
• 版型開發者不必再學
PHP
• 預設輸出時皆會
escape
，減少
XSS
的可能性
//
This
really
shouldn't
be
allowed
to
work,
and
it
won't
in
D8.
<?php db_query('DROP TABLE {users}'); ?>
FROM PHPTEMPLATE TO TWIG

17. {{
}}
"say"
something
{%
%}
"do"
something
{#
#}
"write"
something
TWIG 101

18. – Drupal 8
{{
page.sidebar
}}
{{
page['#type']
}}

19. Here are some example of filters from the Twig
engine.
{{ 'drupal' | length }} //return: 6
{{ 'drupal' | upper }} //return: DRUPAL
{{ 'drupal is awesome' | title }} //return: Drupal Is Awesome!
{{ '<a href="#">drupal is awesome!</a>'| striptags | capitalize }}
//return: Drupal is awesome!
FILTER

20. Drupal offers some additional filters.
Translation filters
PHP:
<?php t('Content type'); ?>
TWIG:
{{ 'Content type' | t }} //return: 內容類型
<a href="{{url('<front>')}}">{{'Home'|t}}</a> //return: ⾸首⾴頁
FILTER

21. {% for item in items %}
{% if not loop.last %}
<li{{ item.attributes }}>
{{ item.content }}
</li>
{% endif %}
{% endfor %}
DO SOMETHING

22. {%
set classes = [
'block',
'block-' ~ configuration.provider|clean_class,
'block-' ~ plugin_id|clean_class,
]
%}
<div{{ attributes.addClass(classes) }}>
{{ title_prefix }}
{% if label %}
<h2{{ title_attributes }}>{{ label }}</h2>
{% endif %}
{{ title_suffix }}
{% block content %}
<div{{ content_attributes.addClass('content') }}>
{{ content }}
</div>
{% endblock %}
</div>
{% BLOCK %}
{# block.html.twig #}

23. {# block--system-powered-by-block.html.twig #}
{% extends "block.html.twig" %}
{% block content %}
<div{{content_attributes.addClass('content')}}>
{{ content }}
</div>
{% endblock %}
{% BLOCK %}

25. #sites/default/settings.php:
$settings['container_yamls'][]
=
DRUPAL_ROOT.'/sites/development.services.yml';
$settings['cache']['bins']['render']
=
'cache.backend.null';
#sites/development.services.yml:
parameters:
twig.config:
debug:
true
ENABLE DEBUGGING

26. PHP:
<?php
var_dump();
?>
TWIG:
{{
dump()
}}
DUMP VARIABLE

27. PHP
with
Devel
module:
<?php
dpm();
?>
TWIG
with
Devel
+
Kint:
{{
kint()
}}
BETTER DUMP

28. • Template Naming Convention: https://www.drupal.org/node/2354645
• The Drupal 8 Theming guide: http://d8.sqndr.com/new-theming-layer/README.html
• Deep dive anatomy drupal 8 theme: http://x-team.com/2015/04/deep-dive-anatomy-drupal-8-theming/
• D8Theming (with debug tut): http://savaslabs.com/2015/06/10/d8-theming-basics.html
REFERENCES

29. CHRIS WU
Cheers!
fb.me/amouro
@amourow