INTRODUCTION TO DRUPAL 8 THEMINGSuryanto Rachmat Pratomo Ardianto

WHAT’S NEW

• Completely new theme system: Twig

• New javascript libraries: jQuery 2.0, Underscore.js & Backbone.js (not loaded by default)

• .info files are now .info.yml

WHAT’S GONE?• theme_ * functions not used (use Twig templating

system .html.twig instead)

• Most first/last/odd/even classes removed in favor of CSS3 pseudo selectors

• Garland removed from Drupal core

• Internet Explorer 6, 7 and 8 no longer fully supported (https://drupal.org/project/ie8)

WHAT’S THE SAME?

• Region and blocks

• Preprocess function

WHAT DOES IT LOOK LIKE?

WHAT DOES IT LOOK LIKE? .info.yml

.THEME FILE

NODE.HTML.TWIG

SYSTEM TEMPLATES core/modules/system/templates

BREADCRUMB TEMPLATE core/modules/system/breadcrumb.html.twig

TWIG TEMPLATES

MORE READABLE TEMPLATE

TWIG DELIMITERS

VARIABLES

FILTERS

CONTROL STRUCTURE

INCLUDING OTHER TEMPLATES FILE

TEMPLATE INHERITANCE

CHILD TEMPLATE FILE

EXTENDING TWIG

• custom filters

• custom functions

• custom tags

QUESTION?