Mediacurrent's Chris Doherty presented at Drupalcamp Atlanta 2014. With Drupal 8 fast approaching, Chris walked attendees through theming in one hour.

1. One-Hour
Drupal 8 Theming
By: Chris Doherty
October 4, 2014

2. @Mediacurrent
Agenda
● D8 core structure
● D8 theme structure
● Twig intro
● Live demo

3. I am a
designer.
I accidentally became a
themer.
@Mediacurrent

4. One hour?

5. The D8 core structure
● root/themes
● root/modules
● root/core/themes
● root/core/modules
@Mediacurrent

6. No more
drilling down
to
contributed
themes and
modules!
docroot...
sites...
all...
themes...

7. The D8 theme
structure
● themename.info.yml
● themename.libraries.yml
● themename.theme
● css folder
● templates folder
● sass folder
● img folder
@Mediacurrent

8. 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]
@Mediacurrent

9. theme.libraries.yml
[namespace]:
version: 1.x
js:
js/foo.js
@Mediacurrent

10. themename.theme file
● Replaces the template.php file.
● Theme functions go here.
@Mediacurrent

11. What is Twig?
Twig is a template framework that has replaced
PHPTemplate in Drupal 8.
It bills itself as fast, secure and flexible.
And it’s very well documented.
http://twig.sensiolabs.org/documentation
@Mediacurrent

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

13. Intro to 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 %}
@Mediacurrent

14. Intro to Twig
● Blocks:
{% block blockname %}...{% endblock %}
● Extends:
{% extends ‘.....’ %}
@Mediacurrent

15. Intro to Twig.
PHPTemplate Twig

16. Warm… Warmer… Disco.

17. Where are the twig files?
In the system templates folder
(/core/modules/system/templates) you’ll find more than 40
templates that are available to override—
things like fields, nodes, pages, links.
@Mediacurrent

18. Is that what
I think it is?
@Mediacurrent

19. Yes.
Most of the
Twig template
files are in one
place, just
waiting to be
overridden.
@Mediacurrent

20. So let’s create a theme...

21. Roll credits.
Questions?