Drupal 8 theming basics

Slide 1

Slide 1 text

Drupal 8 theming basics by Tamás Hajas

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

mysubtheme.info Drupal 7 sites/all/themes/mysubtheme/

Slide 4

Slide 4 text

mysubtheme.info.yml themes/mysubtheme/ Drupal 8 mysubtheme.info Drupal 7 sites/all/themes/mysubtheme/

Slide 5

Slide 5 text

key_name: value colon ':' (not equals sign) # comment: hashmark '#' (not semicolon) structure: by indentation Change record: https://drupal.org/node/1935708 YAML syntax

Slide 6

Slide 6 text

! description: Sub-theme of Gratis version: VERSION ! ! ! ! screenshot: images/screenshot.png Creating a D8 sub-theme: https://drupal.org/node/2165673 type: theme name: My sub-theme ! ! core: 8.x base theme: gratis # engine: twig mysubtheme.info.yml

Slide 7

Slide 7 text

# Stylesheets stylesheets: screen: - css/base.css - css/components.css print: - css/print.css mysubtheme.info.yml

Slide 8

Slide 8 text

# Stylesheets override ! ! # Remove not used stylesheets Change record: https://drupal.org/node/1876600 stylesheets-override: - system.theme.css ! ! stylesheets-remove: - node.module.css mysubtheme.info.yml

Slide 9

Slide 9 text

SMACSS + BEM CSS coding standards: https://drupal.org/node/1886770 Drupal 8

Slide 10

Slide 10 text

*.tpl.php Drupal 7

Slide 11

Slide 11 text

*.html.twig Drupal 8 *.tpl.php Drupal 7

Slide 12

Slide 12 text

Secure Fast Easy PHPTemplate & Twig comparison: https://drupal.org/node/1918824 *.html.twig

Slide 13

Slide 13 text

{# Content links #} Twig coding standards: https://drupal.org/node/1823416 {% if content.links %}   ! {% endif %} {{ 'Click?'|t }} *.html.twig

Slide 14

Slide 14 text

template.php Drupal 7

Slide 15

Slide 15 text

mysubtheme.theme Drupal 8 template.php Drupal 7

Slide 16

Slide 16 text

// Render the main scripts file. $local_js = array( '#attached' => array( 'js' => array( $path . '/js/scripts.js', ), ), ); drupal_render($local_js); Change record: https://drupal.org/node/2169605 Original code:   http://drupalcode.org/project/gratis.git/blob/refs/heads/8.x-1.x:/gratis.theme mysubtheme.theme

Slide 17

Slide 17 text

hook_library_info() Drupal 7

Slide 18

Slide 18 text

mysubtheme.libraries.yml Drupal 8 hook_library_info() Drupal 7 Change record: https://drupal.org/node/2201089

Slide 19

Slide 19 text

• https://drupal.org/theme-guide/8 • Change records (theme): http://j.mp/1qFSKXq • http://drupaltwig.org • Twig Coding Standards: https://drupal.org/node/ 1823416 • CSS CS: https://drupal.org/node/1886770 • JS CS: https://drupal.org/node/172169 • https://api.drupal.org/api/drupal/core!modules! system!theme.api.php/8 some resources

Slide 20

Slide 20 text

Tamás Hajas Drupal consultant Integral Vision Ltd integralvision.hu about.me/tamashajas