Drupal 8 theming basics

You know…
- How to create a sub-theme?
- What are the new file formats in a Drupal 8 theme and what we use them for?
- What is new in CSS file formatting, architecture, management?
- How to use Twig in our templates?
- How to add CSS / JS (libraries) to our theme?
- How to find information about theme related changes in Drupal 8?

Slides from my session at Drupal Developer Days, Szeged, Hungary, 2014.
http://szeged2014.drupaldays.org/program/sessions/drupal-8-theming-basics

Transcript

1. Drupal 8 theming basics by Tamás Hajas
3. mysubtheme.info Drupal 7 sites/all/themes/mysubtheme/
4. mysubtheme.info.yml themes/mysubtheme/ Drupal 8 mysubtheme.info Drupal 7 sites/all/themes/mysubtheme/
5. key_name: value colon ':' (not equals sign) # comment: hashmark '#' (not semicolon) structure: by indentation Change record: https://drupal.org/node/1935708 YAML syntax
6. ! 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
7. # Stylesheets stylesheets: screen: - css/base.css - css/components.css print: - css/print.css mysubtheme.info.yml
8. # 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
9. SMACSS + BEM CSS coding standards: https://drupal.org/node/1886770 Drupal 8
10. *.tpl.php Drupal 7
11. *.html.twig Drupal 8 *.tpl.php Drupal 7
12. Secure Fast Easy PHPTemplate & Twig comparison: https://drupal.org/node/1918824 *.html.twig
13. {# Content links #} Twig coding standards: https://drupal.org/node/1823416 {% if content.links %} 
 ! {% endif %} <footer class="
 ! </footer> <span> </span> {{ content.links }} {{ attributes.class }}
 link-wrapper" {{ attributes }}> {{ 'Click?'|t }} *.html.twig
14. template.php Drupal 7
15. mysubtheme.theme Drupal 8 template.php Drupal 7
16. // 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
17. hook_library_info() Drupal 7
18. mysubtheme.libraries.yml Drupal 8 hook_library_info() Drupal 7 Change record: https://drupal.org/node/2201089
19. • 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
20. Tamás Hajas Drupal consultant Integral Vision Ltd integralvision.hu about.me/tamashajas