How to make Awesomesauce

Drupalcon Chicago 2011 presentation about the fun in theming a drupal site ;)

Transcript

1. how to make awesomesauce! WITH DRUPAL7 in 45 minutes flat! drupalcon chicago 2011 #d7theming onsdag den 1. juni 2011
2. How to Make Awesomesauce morten(dk) onsdag den 1. juni 2011
3. mortendk • certified to rock? • i made the awesomesauce • lead for copenhagen 2010 • frontend united! • in drupal since 4.7 • i made microsoft say sorry for ie6 (& look good!) onsdag den 1. juni 2011
4. drupalhagen ftw! onsdag den 1. juni 2011
5. geek Royale onsdag den 1. juni 2011
6. only a king can make a princess onsdag den 1. juni 2011
7. goal • a theme we can come back to in 12 months • a theme that a client can work with, without breaking stuff • a theme thats not filled with a ton of crap markup • a theme that can be changed in 32131$045 ways onsdag den 1. juni 2011
8. i love you drupal developer! onsdag den 1. juni 2011
9. brussels 5 years ago: ★ “We are tired of designers telling us that drupal looks like shit” - 3:00 am friday DrupalCon Brussels onsdag den 1. juni 2011
10. onsdag den 1. juni 2011
11. communication breakdown onsdag den 1. juni 2011
12. lear onsdag den 1. juni 2011
13. no rockstars in drupal we all roadies & groupies onsdag den 1. juni 2011
14. Developer Those who work with the functionality & wanna have it to work epic onsdag den 1. juni 2011
15. “Designer” Those who work with the frontend & wanna have it to look epic onsdag den 1. juni 2011
16. Themer! the heros of this talk onsdag den 1. juni 2011
17. theme is last! onsdag den 1. juni 2011
18. building blocks last minut 10 % seo 13,07 % ie errors 1,96 % graphic design 13,73 % ux 16,99 % content 18,30 % engine 26,14 % onsdag den 1. juni 2011
19. theme = the force! Theme joda billed onsdag den 1. juni 2011
20. onsdag den 1. juni 2011
21. save 2 hours of planning & code for 18 hours! onsdag den 1. juni 2011
22. pre theme phase • draw all pages • what models are in use? • make sure “they” dont change the fieldnames! • plan your regions • is the site locked down? ... hint: its not! onsdag den 1. juni 2011
23. round & round • #1 talk with the designer • talk with ux (did they talk with designer?) • talk with designer... • hit designer for making dump decissions onsdag den 1. juni 2011
24. round & round • #2 talk with developers • did they build all the elements? • did they add (more) .css to the css “pile of crap” • hit the developers. • hit em again & again onsdag den 1. juni 2011
25. round & round • #3 talk with project leads • say yes to something about seo • tell em that he’s the boss ... like a boss • yadi yadi well keep deadline if you dont change anything onsdag den 1. juni 2011
26. it must be perfect! • everything is durable if you have all the time & money in the world ... • for the rest of us theres display:none & !importent onsdag den 1. juni 2011
27. theme by region onsdag den 1. juni 2011
28. onsdag den 1. juni 2011
29. css hot loving onsdag den 1. juni 2011
30. name game • make sure “they” dont change the fieldnames • use the regions class name • split the css files into node.css, page,css, fields.css etc. onsdag den 1. juni 2011
31. Drupal Core theme Module theme site Module Module Module css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css css onsdag den 1. juni 2011
32. AAAAAARGH ! onsdag den 1. juni 2011
33. the solution onsdag den 1. juni 2011
34. css files • Stop adding crap! • only add if its nessesary • its not a reason “it looks pretty” onsdag den 1. juni 2011
35. system module d7 onsdag den 1. juni 2011
36. .base.css • module.base.css • for all you basic needs - ajax hotness, stuff that is really important • the stuff the theme shoudnt mess with onsdag den 1. juni 2011
37. css name scheme • module.admin.css • For all the admin love stuff onsdag den 1. juni 2011
38. .theme.css • module.theme.css • if you really need colors & pretty stuff this is the place • anywhere else: punishment onsdag den 1. juni 2011
39. hook_css_alter onsdag den 1. juni 2011
40. theme settings onsdag den 1. juni 2011
41. repeat after me! • modulename.admin.css • modulename.base.css • modulename.theme.css onsdag den 1. juni 2011
42. .base.css onsdag den 1. juni 2011
43. .admin.css onsdag den 1. juni 2011
44. .theme.css onsdag den 1. juni 2011
45. 1. more time • modulename.base.css • modulename.admin.css • modulename.theme.css onsdag den 1. juni 2011
46. stop adding crap! PISSING POOL onsdag den 1. juni 2011
47. B.A.t onsdag den 1. juni 2011
48. its a secret! • modulename.theme.css is not widely used yet • d6: $field_fieldname_region never again! • tell you developers onsdag den 1. juni 2011
49. tomorrow 11:00 • the hunt is starting • module developers be aware we will find you! onsdag den 1. juni 2011
50. onsdag den 1. juni 2011
51. grid me when the world isnt 960 wide onsdag den 1. juni 2011
52. grids onsdag den 1. juni 2011
53. less • or sass or whatever • define grid classes that can be used for both the markup & css • tap easy into anything in a drupal site onsdag den 1. juni 2011
54. lesscss.org onsdag den 1. juni 2011
55. http://incident57.com/less its an a onsdag den 1. juni 2011
56. less onsdag den 1. juni 2011
57. .less file .css file onsdag den 1. juni 2011
58. its a g-thing • g1 - gwhatever # of columns • no outer gutters • gf • gc • upcoming theme: “tema” onsdag den 1. juni 2011
59. add classes onsdag den 1. juni 2011
60. use less & css onsdag den 1. juni 2011
61. theme hooks onsdag den 1. juni 2011
62. field markup onsdag den 1. juni 2011
63. field .tpl onsdag den 1. juni 2011
64. wooho! onsdag den 1. juni 2011
65. tpl suggestions • hook:field • field__text • field__field_custom • field__article • field__field_custom__article onsdag den 1. juni 2011
66. field--field-custom.tpl onsdag den 1. juni 2011
67. preprocess onsdag den 1. juni 2011
68. onsdag den 1. juni 2011
69. theme_hook_suggestions • html • page • region • node • block • field • your mamma! onsdag den 1. juni 2011
70. change a form • hook_form_alter() onsdag den 1. juni 2011
71. hook_form_alter onsdag den 1. juni 2011
72. hook form alter themename form_id onsdag den 1. juni 2011
73. onsdag den 1. juni 2011
74. markup ! onsdag den 1. juni 2011
75. onsdag den 1. juni 2011
76. onsdag den 1. juni 2011
77. is that hot enough for ya? onsdag den 1. juni 2011
78. drupal is visual friendly onsdag den 1. juni 2011
79. context onsdag den 1. juni 2011
80. conditions onsdag den 1. juni 2011
81. display suite belgian craftmanship onsdag den 1. juni 2011
82. display suite onsdag den 1. juni 2011
83. manage display onsdag den 1. juni 2011
84. change layout onsdag den 1. juni 2011
85. fields onsdag den 1. juni 2011
86. custom markup onsdag den 1. juni 2011
87. custom markup onsdag den 1. juni 2011
88. templates onsdag den 1. juni 2011
89. views display onsdag den 1. juni 2011
90. change displays onsdag den 1. juni 2011
91. skinr when is d7 out - jacineeeeeeee ? onsdag den 1. juni 2011
92. sWEATHY BEAVER aka sweaver onsdag den 1. juni 2011
93. IS THE OPTIMIZATION WORTH IT? ITS JUST TEXT! onsdag den 1. juni 2011
94. hell yeah! onsdag den 1. juni 2011
95. theme testing! looking good at 5 am onsdag den 1. juni 2011
96. design module onsdag den 1. juni 2011
97. design module onsdag den 1. juni 2011
98. design module onsdag den 1. juni 2011
99. jquery ui theme roller onsdag den 1. juni 2011
100. style guide onsdag den 1. juni 2011
101. design test modules • d.0/project/styleguide • d.0/project/design • merging? onsdag den 1. juni 2011
102. frontend united or d4d design drupal stuff F U onsdag den 1. juni 2011
103. git workshop for frontend rockers friday 11:00 onsdag den 1. juni 2011
104. .theme.css huntdown core were coming for you! onsdag den 1. juni 2011
105. drupal design camp germany 24 - 26 june ...its in europe! onsdag den 1. juni 2011
106. more info • http://groups.drupal.org/ design-drupal • drupaldesigncamp.org onsdag den 1. juni 2011
107. hire me? • http://morten.dk onsdag den 1. juni 2011
108. drupal store onsdag den 1. juni 2011
109. thank you community onsdag den 1. juni 2011
110. What did you think? Locate this session on the DCC website: http://chicago2011.drupal.org/sessions Click the “Take the Survey” link. Thanks! onsdag den 1. juni 2011