One-Hour Drupal 8 Theming

By: Chris Doherty October 4, 2014

@Mediacurrent

Agenda

● D8 core structure

● D8 theme structure

● Twig intro

● Live demo

I am a designer. I accidentally became a themer.

@Mediacurrent

One hour?

The D8 core structure

● root/themes

● root/modules

● root/core/themes

● root/core/modules

@Mediacurrent

No moredrilling down to contributed themes and modules!

docroot...

sites...

all...

themes...

The D8 theme structure

● themename.info.yml

● themename.libraries.yml

● themename.theme

● css folder

● templates folder

● sass folder

● img folder

● js folder

@Mediacurrent

theme.info.ymlname: [themename]type: themedescription: This is my custom Drupal 8 Themecore: 8.xengine: twigscreenshot: screenshot.pngstylesheets: all: - css/styles.cssregions: header: ‘Header’...

libraries: - [themename]/[namespace]

@Mediacurrent

theme.libraries.yml

[namespace]: version: 1.x js: js/foo.js

@Mediacurrent

themename.theme file

● Replaces the template.php file.

● Theme functions go here.

@Mediacurrent

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

Intro to Twig

There are three delimeters you need to know.

● Print variables: {{ … }}

● Comments: {# … #}

● Execute statements: {% … %}

@Mediacurrent

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

Intro to Twig

● Blocks: {% block blockname %}...{% endblock %}

● Extends:{% extends ‘.....’ %}

@Mediacurrent

Intro to Twig.

PHPTemplate Twig

Warm… Warmer… Disco.

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

Is that what I think it is?

@Mediacurrent

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

@Mediacurrent

So let’s create a theme...

Roll credits.Questions?