Quite significant changes were introduced in the theme system between Drupal 8 and 7. This guide contains information that applies to Drupal 8 theming.

1. DRUPAL8 THEMING
Braham Pal Singh
Senior consultant, Capgemini

2. INTRODUCTION
● What’s New in Drupal8
● D8 core structure
● D8 theme structure
● The Twig Template Engine
● Responsive Images

3. What’s new in Drupal 8?

4. Responsive Theming

5. HTML5 out of the box

6. Views in Core

7. Views = fully customizable...
With the Drupal 8 views, you can
customize:
– Admin listings
– Sidebar content
– Image galleries
– Slideshows
– REST output

8. Restyled administration
interface

9. New front-end libraries

10. The Classy Base Theme
• core/themes/classy
• Used by Bartik & Seven
• Declare in theme.info.yml:
base theme: classy

11. The D8 core structure
● root/themes
● root/modules
● root/core/themes
● root/core/modules

12. The D8 theme structure
● themename.info.yml
● themename.libraries.yml
● themename.theme
● css folder
● templates folder
● sass folder
● img folder
● js folder

14. Create an .info.yml file
DRUPAL 7 DRUPAL 8

15. theme.info.yml
name: [themename]
type: theme
description: This is my custom Drupal 8
Theme
core: 8.x
engine: twig
screenshot: screenshot.png
stylesheets:
all:
- css/styles.css
regions:
header: ‘Header’...
libraries:
- [themename]/[namespace]

16. theme.libraries.yml
[namespace]:
version: 1.x
js:
js/foo.js

17. What is TWIG ??

18. What is Twig?
Twig is a template framework that has replaced PHPTemplate
in Drupal 8.
fast, secure and flexible.
http://twig.sensiolabs.org/documentation

19. TWIG
IDE integration

20. TWIG
recognizable syntax

21. by the creator of Symfony
Fabien Potencier
TWIG

22. Intro to Twig
TWIG
There are three delimeters you need to
know.
● Print variables: {{ … }}
● Comments: {# … #}
● Execute statements: {% … %}

23. TWIG
● Variables can be accessed directly in Twig.
● Classes can be drilled into to show attributes:
<div {{ attributes }}>
{{ content }}
</div>
● Conditional statements: {% if … %}{% endif %}
● Loops: {% for … %}{% endfor %}
● Blocks:
{% block blockname %}...{% endblock %}
● Extends:
{% extends ‘.....’ %}

24. TWIG
PHPTemplate Twig

25. what does it look like?
TWIG

26. print with {{ }}
TWIG

27. commands with {% %}
TWIG

28. comments with {# #}
TWIG

29. drill down into all variables with .(dot)
TWIG

30. less code than PHP functions
TWIG
theme_image becomes image.html.twig

31. less code than PHP functions
TWIG
theme_username becomes username.html.twig

32. TWIG
• PHP template reads files from disk on every use
Twig templates are read once & compiled into
classes
Rendering should get much faster when the same
content element appears multiple times on the
page.
Consolidating many similar templates will result in
an additional gain.
Possible performance gains

33. TWIG
• Saving PHP code in the database is a HUGE no-
no.
• Twig is not PHP, and is safe to store!
In-browser template editing finally safe.

34. TWIG
 One template can return markup for both your
PHP generated pages, as well as pages
generated vi JS in AJAX callbacks.
 We can use other open source libraries like
TwigJS.
(https://github.com/schmittjoh/twig.js)
Security
• Drupal 7 would often print out unsanitized data. You could even run
database queries from directly inside the theme files.
• Drupal 8 can automatically sanitize variables and won't permit
unsafe functions to run.
Twig template files can be used on the front
end, too.

35. TWIG
Why Twig in Drupal8?
Drupal 7: Drupal 8:

36. D8 IMPROVEMENTS
remove theme functions
(and overrides) entirely.
remove process.

37. D8 IMPROVEMENTS
remove render. remove page alter?

38. Drupal 8 Template Files
Drupal 7 node.tpl.php file: Drupal 8 node.html.twig file:

39. THEME.schema.yml

40. Theme functions & preprocess

41. Responsive Images
• theme.breakpoints.yml
Enable the Responsive images module

42. Thank you!
Questions?