Maintainable theming

2,017 views
1,927 views

Published on

Learn how to do maintainable Drupal theming. This presentation was given at DrupalCamp Stockholm 2013

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,017
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Maintainable theming

  1. 1. 1
  2. 2. About me Jan-yves Vanhaverbeke Wunderkraut Belgium (Ghent) Frontend Developer jan-yves.vanhaverbeke@wunderkraut.com Drupal.org: jyve Twitter: janyves 2
  3. 3. MaintainableDrupal Theming 3
  4. 4. WhyClient: the white-space on the newsoverview page is wrong!body #page .view-news .views-rowdiv.node .node-section.clear-block { margin-top: 0 !important;} 4
  5. 5. Agenda‣ Drupal is special‣ Optimize your design input‣ Optimize your Drupal HTML‣ Write maintainable CSS‣ Build a maintainable theme 5
  6. 6. Drupal is special 6
  7. 7. Drupal is a CMS‣ Highly customizable‣ What if content is added?‣ What if a block is moved? 7
  8. 8. Content-first approach‣ First content types, taxonomy, users, comments‣ Pages assembled from different sources‣ Theming should support this 8
  9. 9. Optimize your design input 9
  10. 10. Problems with designs‣ A design is static‣ Not all pages will be designed‣ Designs are rarely consistent‣ A design reflects the ideal situation 10
  11. 11. Solutions‣ Ask for a Style Guide‣ Analyze the design‣ Keep designers involved 11
  12. 12. Style Guide‣ All recurring design elements and interactions‣ Leading in case of inconsistencies. 12
  13. 13. Style Guide‣ Site elements: ‣ Navigations: including mouse-over and active states ‣ One or more block templates ‣ A pager ‣ Message boxes: warning, confirmation and error ‣ A form. Typically useful for the contact form ‣ A list of the most important colors 13
  14. 14. Style Guide‣ Typography: ‣ Headings: H1, H2, H3 and H4 ‣ Links: color and (optional) underline. Also define a mouse-over state ‣ Paragraph: for default text the line-height and space between text should be defined ‣ (Un)ordered list: How does it look in content? 14
  15. 15. Analyze the design‣ Print all designs‣ Look for patterns: ‣ Block styles ‣ Image styles ‣ View Modes ‣ Regions...‣ Convert patterns to HTML tags/classes/styles 15
  16. 16. Optimizeyour HTML 16
  17. 17. “ The Views output contains a rich set of div tags allowingfine-grained CSS control over the output. ” 17
  18. 18. Remove HTML‣ Clean up template files‣ Examples: Panels, Views, Field‣ Use Display Suite (Field Templates)‣ One-time effort 18
  19. 19. Before cleanup 19
  20. 20. After cleanup 20
  21. 21. Module unaware HTML‣ .panel-pane .pane-title {} vs .block > h2 {}‣ page.tpl.php vs Panels Layout‣ Views specific classes 21
  22. 22. Add own classes‣ Block class: http://drupal.org/ project/block_class‣ Views‣ Display Suite‣ Panels 22
  23. 23. Writemaintainable CSS 23
  24. 24. Functional selectors‣ Theme a functional element, not a Drupal module:‣ Bad: ‣ .views-articles .views-row {} ‣ .views-row {}‣ Good: ‣ .article-teaser {} ‣ .item-list li {} 24
  25. 25. As generic as possible.field vs.page-article #content div.nodediv.field-title 25
  26. 26. Avoid overwrites‣ Remove Drupal and module CSS‣ function theme_css_alter(&$css) { unset($css[modules/system/system.menus.css]); }‣ Dare to rework existing CSS as features are added. 26
  27. 27. Drupal CSS standards‣ http://drupal.org/node/1887862‣ .quote { margin-left: 15px; font-style: italic; } 27
  28. 28. Build amaintainable theme 28
  29. 29. Theming is...‣ Basic design‣ Features‣ Reusable styles 29
  30. 30. Basic design‣ All generic elements: header, footer, layout‣ Style Guide: navigation, typography, colors, links etc‣ Simple content page with mixed typographical content. 30
  31. 31. Features‣ Examples: news, blog, slideshow‣ Separate CSS files‣ Clear separation between reuse of styles and custom CSS 31
  32. 32. Styles‣ Examples: list of teasers, block styles‣ Power of Sass‣ Add as you go 32
  33. 33. Power of Sass‣ Mixins and extendables‣ Variables‣ Selector nesting 33
  34. 34. Power of Sass.node-news { .view-mode-teaser { @extend %teaser; color: $grey; @include border-radius(3px); margin-top: 0; }} 34
  35. 35. Wundertheme‣ Custom starter theme‣ Beta‣ https://github.com/Krimson/ wundertheme.git 35
  36. 36. In Summary 36
  37. 37. In SummaryClient: the white-space on the newsoverview page is wrong!body #page .view-news .views-rowdiv.node .node-section.clear-block { margin-top: 0 !important;} 37
  38. 38. Power of Sass.node-news { .view-mode-teaser { @extend %teaser; color: $grey; @include border-radius(3px); margin-top: 0; }} 38
  39. 39. In Summary‣ Drupal is special‣ Optimize your design input‣ Optimize your Drupal HTML‣ Write maintainable CSS‣ Build a maintainable theme 39
  40. 40. Questions? 40
  41. 41. 41

×