Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Guide to Component-Based Theming for Drupal 8 and 9

803 views

Published on

Contrary to the top-to-bottom theming we have been doing for years, the component-based approach enables us to theme Drupal websites by breaking down the UI into self-contained, reusable parts. This presents many advantages over traditional theming: less code repetition, easier to maintain CSS, less risk of regressions, and reusable code.

This webinar is an introduction to the concept of Component-Based Theming. Explore the different phases for building successful component-based websites. 

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Guide to Component-Based Theming for Drupal 8 and 9

  1. 1. Guide to Component-Based Theming for Drupal 8 & 9
  2. 2. Mediacurrent Mediacurrent is a full-service digital agency that implements world class Drupal architecture, development, strategy, and design to achieve defined goals for enterprise organizations seeking a better return on investment.
  3. 3. | 3 Mario Hernandez @iMarioHernandez ● ● ●
  4. 4. | 4 Agenda 1. What are Components? 2. Advantages of Components 3. Getting Started with Components 4. Component-Based Theming 5. Integrating Components with Drupal 6. Resources 7. Q&A
  5. 5. | 5 Component Theming Guide A deeper dive into building a Drupal website with flexible, reusable components. You’ll learn: ❏ ❏ ❏
  6. 6. | 6 What are Components?
  7. 7. | 7 A collection of reusable patterns that help you build pages
  8. 8. | 8| 8
  9. 9. | 9| 9
  10. 10. | 10| 10
  11. 11. | 11| 11
  12. 12. | 12| 12
  13. 13. | 13| 13
  14. 14. Atomic Design Atoms Molecules Organisms Templates Pages | 14Source
  15. 15. | 15| 15
  16. 16. Atomic Design Atoms Molecules Organisms Templates Pages | 16Source
  17. 17. | 17 What is Component-Based Theming?
  18. 18. | 18| 18
  19. 19. | 19 Advantages of Components
  20. 20. | 20 1. Reusability 2. Semantic Markup 3. Speeds up development 4. Improves team collaboration 5. Living styleguide Advantages of Components | 20
  21. 21. | 21
  22. 22. | 22 Timeline | 22
  23. 23. | 23| 23
  24. 24. | 24| 24
  25. 25. | 25| 25
  26. 26. | 26| 26
  27. 27. | 27| 27
  28. 28. | 28 Discovery phase | 28
  29. 29. | 29 Component Integrations with Drupal
  30. 30. | 30| 30
  31. 31. | 31| 31 media-card.twig
  32. 32. | 32| 32 block--media-card.html.twig
  33. 33. | 33| 33
  34. 34. | 34 Resources
  35. 35. | 35 Resources ● ● ● ● ○ ○ ○ ●
  36. 36. | 36 Mediacurrent Training ● ● ○ ○ ○ ○ ○ ○ ○
  37. 37. | 37 Q&A
  38. 38. Thank you!

×