Drupal 8 Eming - Stanford University

1Drupal 8 ThemingZakiya Code:github.com/zakiya/d8-theming-camp-demo

2Questions?

3D7 D8Small Core Changes Views, Admin Menu, Breakpoints, Date, EntityReference, Link, CKeditor, Migrate, Block Menus (light),Responsive Image, multilingual support, and fieldableblocks all in core Backbone.js, Underscore.js, and Modernizr are in core No JQuery or CSS loads by default.

4D7 D8Big Core Changes Configuration Management Using Twig templating engine No more IE 6, 7, and 8 support

5D7 D8Gotchas drush cr not drush cc all /themes instead of /sites/all/themes /modules instead of sites/all/modules

6Local Dev SetupGet your Drupal Find latest dev or beta on d.o drupal.org/node/3060/release Download and install on your favoriteAMP stack

7Local Dev SetupPerformance Settings By default css, js and html are cached Disable caching through UI at /config/development/performance Or Copy sites/example.settings.local.php to settings.local.php See /sites/example.settings.local.php)Uncomment these lines in /default/settings.php :if (file exists( DIR . 'settings.local.php')){ include DIR . ‘/settings.local.php'; } drush cr when done!

8THEME.info.ymlBasic Declarations

9Logo If logo is called logo.svg and putin root folder Drupal will autodetect logo.png or logo.gif can be addedvia Drupal UI

10Screenshot screenshot.png placed in root will beauto-detectedor declare in THEME.info.yml

11Declare Base Theme

12Theme Features

13Regions Theme will work with no regions Declare regions inTHEME.info.yml

14Modify Core/ModuleCSS

15Remove Core/ModuleCSS

16Adding Stylesheets

17Adding Libraries drupal.org/developing/api/8/assets

18Declare Library Edit THEME.info.yml

19Add CSS and JS

20Optionally IncludeJQuery

21Other Ways to include assets To versioning existing libraries:hook library info alter()See: api.drupal.org To add assets conditionally:hook preprocess page(& vars) { vars['#attached']['library'][] 'core/modernizr';} ORhook page attachments alter(& page) {if ( conditions) { page['#attached']['library'][] ‘core/jquery';}See: drupal.org/theme-guide/8/assets

22TwigTime

23Why Twig Secure Separate business logic from display Faster, smarter templating engine Supported/used beyond Drupal

24Twig Debug Change twig.config: debug: truein services.yml

Twig Templates 141 Twig templates* To override, place in *.html.twig in themefolder Don’t forget to drush cr25* find path/to/core/modules -name *.html.twig ! -path "*test*"

26Twig Code Basics To print{{my variable}} To comment{# Drupaling b. #} To operate{% if title %}

27Twig Code Extras Translate function (filter){{ 'Home' t }} Check plain{{ title striptags }} See others at g-part-2 drupal.org/node/1918824

28Twig Code ExtrasReuse Templates

29Twig Code ExtrasTwig Blocks

30Twig Preprocess THEME.theme replaces template.php

31Twig {{dump}}* {{ dump()}} {{ dump(my variable) }} drupal.org/node/1906780*Might get WSOD due to memory issues

32Devel Kint

33TwigDocumentation twig.sensiolabs.org/documentation

34Responsive breakpoints in coredrupal.org/documentation/modules/breakpoint THEME.breakpoints.yml picture in core

35Other things Drupal settings for use in js Classy module Initialize Image Style Settings intheme https://www.drupal.org/node/2356753 No HOOK process

36Gimme feedbackZakiya Code:github.com/zakiya/d8-theming-camp-demo

in root folder Drupal will auto-detect logo.png or logo.gif can be added via Drupal UI 9. Scr