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. 

1. Guide to
Component-Based
Theming for Drupal 8 & 9

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
Mario Hernandez
@iMarioHernandez
●
●
●

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
Component Theming
Guide
A deeper dive into building a Drupal website with
flexible, reusable components.
You’ll learn:
❏
❏
❏

6. | 6
What are
Components?

7. | 7
A collection of reusable patterns that
help you build pages

8. | 8| 8

9. | 9| 9

10. | 10| 10

11. | 11| 11

12. | 12| 12

13. | 13| 13

14. Atomic Design
Atoms Molecules Organisms Templates Pages
| 14Source

15. | 15| 15

16. Atomic Design
Atoms Molecules Organisms Templates Pages
| 16Source

17. | 17
What is
Component-Based
Theming?

18. | 18| 18

19. | 19
Advantages of
Components

20. | 20
1. Reusability
2. Semantic Markup
3. Speeds up development
4. Improves team collaboration
5. Living styleguide
Advantages of Components
| 20

21. | 21

22. | 22
Timeline
| 22

23. | 23| 23

24. | 24| 24

25. | 25| 25

26. | 26| 26

27. | 27| 27

28. | 28
Discovery phase
| 28

29. | 29
Component
Integrations with
Drupal

30. | 30| 30

31. | 31| 31
media-card.twig

32. | 32| 32
block--media-card.html.twig

33. | 33| 33

34. | 34
Resources

35. | 35
Resources
●
●
●
●
○
○
○
●

36. | 36
Mediacurrent Training
●
●
○
○
○
○
○
○
○

37. | 37
Q&A

38. Thank you!