SLIDE 1
An Introduction to Drupal 8 Theming
March 12, 2019 Ray Estrada Jen Seavey
Ray Estrada
Lead Experience Developer
Jennifer Seavey
Associate Director, PMP
WHO WE ARE
An Introduction to Drupal 8 Theming Ray Estrada Jen Seavey WHO WE - - PowerPoint PPT Presentation
An Introduction to Drupal 8 Theming Ray Estrada Jen Seavey WHO WE - - PowerPoint PPT Presentation
March 12, 2019 An Introduction to Drupal 8 Theming Ray Estrada Jen Seavey WHO WE ARE Ray Estrada Lead Experience Developer Jennifer Seavey Associate Director, PMP ABOUT U.GROUP U.Group is an Advanced Technology and User-Focused Design
SLIDE 2
SLIDE 3
ABOUT U.GROUP
U.Group is an Advanced Technology and User-Focused Design company. Our team of 280+ changemakers are using data science, engineering, and ingenuity to develop deep understanding of our clients' most pressing challenges, and developing powerful solutions for confronting them. U.Group is committed to using customer-centric innovation to create new opportunity in the public and private sectors.
SLIDE 4
SLIDE 5
Drupal 8 Theming Advantages
SLIDE 6
1/4
Templating engine: TWIG
▪ Separation between form and logic ▪ Enhanced security ▪ Easy to learn syntax ▪ Improved access to markup via templates ▪ Template debugging ▪ “It’s the most complete transformation of Drupal theming in 10 years.”
SLIDE 7
2/4
Libraries
▪ Organizational system for assets to improve reusability and maintainability ▪ You can use libraries from core or from other modules or you can create your own ▪ Allows for loading assets only when they are needed ▪ Facilitates improved theming performance
SLIDE 8
3/4
API-first approach
▪ Opens the possibilities for a decoupled or a progressively decoupled front-end ▪ You can output data as JSON or XML almost as easily as HTML ▪ Expose Views lists as services too. ▪ Allows you to bypass Drupal’s theme engine and leverage React or another framework
SLIDE 9
4/4
Other advantages
▪ Breakpoints are defined within the theme and can be leveraged by other modules ▪ Responsive Images are now apart of core ▪ picture or srcset ▪ CKeditor is now apart of core ▪ Use styles from your theme and preview in the editor ▪ Create new style declarations that editors can apply via the editor
SLIDE 10
Architecture of a Drupal 8 Theme
SLIDE 11
1/7
themename.info.yml
▪ Define theme settings ▪ Base theme: ▪ classy: provides many classes in its markup (familiar to D7) ▪ stable: provides minimal markup and very few css classes ▪ libraries and libraries override ▪ regions ▪ define wysiwyg styles
SLIDE 12
SLIDE 13
2/7
themename.libraries.yml
▪ Define theme libraries ▪ They can include ▪ css ▪ js ▪ other libraries
SLIDE 14
SLIDE 15
3/7
themename.breakpoints.yml
▪ Define Theme breakpoints ▪ to be used for modules such as Responsive Image Styles
SLIDE 16
SLIDE 17
4/7
themename.theme
▪ Define theme functions ▪ Preprocess ▪ Hooks ▪ Template suggestions
SLIDE 18
SLIDE 19
5/7
Templates: html.twig
▪ pre-defined templates ▪ extend a template ▪ include a template ▪ filters ▪ attach a library
SLIDE 20
SLIDE 21
SLIDE 22
6/7
Theme Graphics
▪ favicon (.ico or .png) ▪ logo (.svg) ▪ screenshot (.png)
SLIDE 23
7/7
UI Assets Directories
▪ css ▪ js ▪ svg ▪ images
SLIDE 24
SLIDE 25
SLIDE 26
Modular-based build of a landing page system
SLIDE 27
SLIDE 28
1/3
Leverage the tools
▪ template debugging (sites/default/services.yml or sites/development.services.yml) ▪ twig filters
SLIDE 29
SLIDE 30
SLIDE 31
SLIDE 32
SLIDE 33
SLIDE 34
1/2
Enhance design options
▪ WYSIWYG styles match the sites. ▪ Editors can add formatting styles without editing source code. ▪ Attach styles to a section via a classes input field or a dropdown
SLIDE 35
SLIDE 36
SLIDE 37
SLIDE 38
1/3
Improve Performance
▪ Build reusable components and pattern libraries ▪ Load assets only when you need them ▪ libraries ▪ Responsive Images
SLIDE 39
SLIDE 40
SLIDE 41
RESOURCES
https://sqndr.github.io/d8-theming-guide https://www.drupal.org/docs/8/theming
SLIDE 42
Q&A
SLIDE 43