Page 1
Making theming great again!
Component-driven Theming
Client or Event Logo
Page 2
Intros
Mario Hernandez
@imariohernandez
/in/mariorhernandez
slideshare.net/marequi
Sr. Front-End Developer
2
Page 3
Style Guide
Contents
Problems with traditional Drupal theming
Advantages of components
Tools4
3
2
1
3
How components work
Page 4
About
4
Mediacurrent helps organizations build highly impactful, elegantly designed Drupal websites that achieve the strategic results they need.
● Single-source provider● Specializing in Drupal since 2007● Headquartered in Atlanta, GA● Team of 70+ Drupal Experts including
development, design and strategy● Clients include: Large Enterprise and
high-profile global brands
Page 5
Problems with traditional Drupal theming1
Page 6
6
Problems with traditional Drupal theming
Page 7
7
Problems with traditional Drupal theming
● Content source can complicate theming○ Blocks○ Views○ Custom content types○ Custom modules
● Ambiguous css classes create regressions
● Excessive and unnecessary markup
Page 8
2 How components work
Page 9
9
How components work
Breaking it down
Page 10
10
How components work
Page 11
11
How components work
Page 12
12
How components work
Page 13
13
How components work
Page 14
14
How components work
Page 15
15
How components work
Page 16
16
How components work
Page 17
17
How components work
Page 18
3 Advantages of components
Page 19
19
Advantages of components
Semantic markupBEM
https://css-tricks.com/bem-101/
Page 20
20
Advantages of components
Page 21
21
Advantages of components
Page 22
22
Advantages of components
Page 23
23
Reusable components
Page 24
24
Advantages of components
Reusable components
Page 25
25
Advantages of components
Page 26
26
Advantages of components
Front-End & Back-end devs love it!
Page 27
27
Advantages of components
Page 28
28
Advantages of components
Clients also love it!
Page 29
29
Advantages of components
Instant gratification
Page 30
30
Advantages of components
Teams love it!
Page 33
33
Tools
Styleguide
Page 37
37
Tools
Demo
https://youtu.be/cLu9ZGIzpvU?list=PLztBsFl4ot8v5Nv1Mj900XtJpiTEd0BG1Won't You Take Me to Chunk-y Town: Component-based theming and Drupal front-end development by Mark Drummond of Lullabot
Page 38
@Mediacurrent Mediacurrent.com
Thank you!
slideshare.net/mediacurrent
RELEVANT RESOURCE