Making theming great again!

Component-driven Theming

Client or Event Logo

Intros

Mario Hernandez

@imariohernandez

/in/mariorhernandez

slideshare.net/marequi

Sr. Front-End Developer

2

Style Guide

Contents

Problems with traditional Drupal theming

Advantages of components

Tools4

3

2

1

3

How components work

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

Problems with traditional Drupal theming1

6

Problems with traditional Drupal theming

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

2 How components work

9

How components work

Breaking it down

10

How components work

11

How components work

12

How components work

13

How components work

14

How components work

15

How components work

16

How components work

17

How components work

3 Advantages of components

19

Advantages of components

Semantic markupBEM

https://css-tricks.com/bem-101/

20

Advantages of components

21

Advantages of components

22

Advantages of components

23

Reusable components

24

Advantages of components

Reusable components

25

Advantages of components

26

Advantages of components

Front-End & Back-end devs love it!

27

Advantages of components

28

Advantages of components

Clients also love it!

29

Advantages of components

Instant gratification

30

Advantages of components

Teams love it!

4 Tools

32

Tools

33

Tools

Styleguide

34

Tools

35

Tools

36

Tools

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

@Mediacurrent Mediacurrent.com

Thank you!

slideshare.net/mediacurrent

RELEVANT RESOURCE