This document discusses theming in Drupal 8, including: - The use of Twig templating and support for IE9 and newer browsers. - The THEME.info.yml file which defines theme settings, stylesheets, regions, and more. - Overriding or removing core CSS, adding new stylesheets and libraries, and declaring base themes. - Using Twig for templating, including printing variables, commenting, logic tags, translation, and including other templates. - Preprocessing templates with THEME.theme functions and using the {{ dump }} Twig function for debugging. - Making themes responsive using core breakpoints and THEME.breakpoints.yml.

1. Темізація у Drupal 8. Від простого до
складного
Ivan Tibezh at InternetDevels

2. Big Changes
● Twig templating
● IE9 and >

3. THEME.info.yml
name: Bartik
type: theme
description: 'A flexible, recolorable theme with many
regions and a responsive, mobile-first layout.'
package: Core
version: VERSION
core: 8.x

4. THEME.info.yml
stylesheets:
all:
- css/layout.css
- css/style.css
- css/colors.css
print:
- css/print.css

5. THEME.info.yml
regions:
header: Header
help: Help
page_top: 'Page top'
page_bottom: 'Page bottom'
highlighted: Highlighted
featured: Featured
content: Content

6. THEME.info.yml
settings:
shortcut_module_link: '0'

7. logo.svg
logo.png or logo.gif can be added
via Drupal UI

8. Declare Base Theme
base theme: classy

9. Modify Core/Module CSS
stylesheets-override:
- global-styling/views.module.css

10. Remove Core/Module CSS
stylesheets-remove:
- normalize.css

11. Adding Stylesheets

12. Adding Libraries

13. Declare Library
THEME.info.yml
liraries:
- custom/global-styling

14. Add CSS and JS
THEME.libraries.yml
global-styling:
version: 1.x
css:
theme:
global-styling/css/style.css: { media: all }
js:
global-styling/js/scripts.js: {}

15. Optionally Include JQuery
THEME.libraries.yml
dependencies:
- core/jquery

16. Other Ways to include assets
● hook_library_info_alter()
● hook_preprocess_page()
● hook_page_attachments_alter()

17. Twig

18. Why Twig
● Secure
● Separate business logic from display
● Faster, smarter templating engine

19. sites/default/services.yml
debug: true
auto_reload: true

20. Twig Templates
● 141 Twig templates*
● To override, place in *.html.twig in theme
folder
● Don’t forget to drush cr

21. Twig Code Basics
● To print {{ my_variable }}
● To comment {# comment #}
● To operate {% if title %}

22. Twig Code Extras
● Translate {{ 'Home'|t }}
● Check_plain {{ title|striptags }}

23. Reuse Templates
{% include 'code/modules/node/templates/node.html.twig' %}

24. Twig Preprocess
THEME.theme replaces template.php
function custom_preprocess_page(&$vars) {
$vars['legal'] = t('Legal text');
}

25. Twig {{dump}}*
● {{ dump()}}
● {{ dump(my_variable) }}

26. Responsive
Breakpoints in core.
THEME.breakpoints.yml

27. Other things
● Drupal settings for use in js
● Classy module
● Initialize Image Style Settings in theme
● No HOOK_process

28. hook_theme
Only templates.

29. Render API
theme('custom_theme', $params);
$element = array(
'#theme' => 'custom_theme',
// Params.
);

30. Twig templating

31. IE9 and >