Dapper Drupal - Custom Tailored Drupal Themes

To see a video recording of this presentation, visit http://bit.ly/13iPyCT

Base themes are a great place to start when you’re first getting into theming. As you grow as a front-end developer, you’ll find your old standby base theme no longer fits. You’re a grown up now; it’s time to dress to the nines.

Why build a base theme?
By necessity, base themes make assumptions about how teams and individuals work. By rolling your own, you’ll become much more comfortable and informed about the Drupal theming layer, and have a better launchpad for your front-end projects.

In this session, we’ll talk about creating a custom base theme tailored for your development process; one that enhances your team’s strengths and minimizes its weaknesses, offering clear advantages over contributed base themes. We’ll identify common front-end problems, and demonstrate how a custom base theme can solve them in a reusable way. We’ll look at how others are using base themes to improve their development process and share what we’ve learned developing Center and Prototype, an evolving pair of themes we’ve created that enable us to quickly build a front-end that fits our workflow.

Garrett Dawson
Garrett is a front-end developer who has been working with Drupal for the past several years, and has built many productions sites using popular contributed themes, like Zen and Tao.

John Ferris
John has been building websites since 2000. He has developed Drupal themes for a wide range of clients including M.I.T., The Smithsonian Institute, The United Nations, and Examiner.com.

Links:
https://gist.github.com/killtheliterate/5904551

Transcript

1. Dapper Drupal Garrett Dawson John Ferris
4. Custom Tailored Themes
5. Why are we here? Why make your own starter theme? Case studies.
6. Front-end Developer.
7. Front-end Developer. HTML + CSS + JS
8. Front-end Developer. HTML + CSS + JS + theme functions + template files + render arrays + preprocess functions + process functions + alter functions + theme hook suggestions + views + display suite +panels + cray cray
9. HTML + CSS + JS + theme functions + template files + render arrays + preprocess functions + process functions + alter functions + theme hook suggestions + views + display suite +panels + cray cray Themer.
10. HTML + CSS + JS Themer.
11. HTML + CSS + JS Themer. This is what users touch.
12. A typical approach. Contributed modules Base themes Starter themes
13. What base theme do you use?
14. Contrib is rad!
15. Then, one day...
16. This is important: Front-end tooling.
17. Make your own tools.
18. Wait. What about Contrib?
19. Measuring Up. What markup problems? Who maintains the project? What’s in the toolkit? What do I want to fiddle with?
20. Case Studies
22. 7 Staff Members 900+ Websites Stanford Web Services
23. Open Framework
24. Open Framework
25. Open Framework
26. Open Framework
28. Panopoly + Bootstrap Kalatheme drupal.org/project/kalatheme
30. bit.ly/14VPriy
32. Center
33. Center This is our scaffold Overrides templates Overrides theme functions Predictable and static
34. Prototype
35. Prototype This is what we fork Project specific Cornerstone of the front-end SMACSS
36. Prototype ᴷ inc ᵋᴷ hook based template called in template.php ᴷ sass ᵋᴷ base, components, layouts, etc ᴷ js ᵋᴷ main.js, modularized JavaScripts ᴷ layouts ᵋᴷ templates and template overrides
37. What does this do for us?
38. There is no one-size-fits-all
39. Get your measurements.
40. Start building your own!
41. Continuos Improvement
42. Continuos Continuous Improvement
43. Push your craft forward
44. And this is the end. Photo Credits: Slide 1 - http://bit.ly/141n1US Slide 4 - http://bit.ly/12ifyN0 Folks I talked with: Stanford Web Services - http://stanford.io/16qmvQA Kalamuna - http://bit.ly/19fE7E5 Code Enigma - http://bit.ly/14QwLSQ