Your SlideShare is downloading. ×
Maintainable theming
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Maintainable theming

1,780
views

Published on

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

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
1,780
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 1
  • 2. About me Jan-yves Vanhaverbeke Wunderkraut Belgium (Ghent) Frontend Developer jan-yves.vanhaverbeke@wunderkraut.com Drupal.org: jyve Twitter: janyves 2
  • 3. MaintainableDrupal Theming 3
  • 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. Agenda‣ Drupal is special‣ Optimize your design input‣ Optimize your Drupal HTML‣ Write maintainable CSS‣ Build a maintainable theme 5
  • 6. Drupal is special 6
  • 7. Drupal is a CMS‣ Highly customizable‣ What if content is added?‣ What if a block is moved? 7
  • 8. Content-first approach‣ First content types, taxonomy, users, comments‣ Pages assembled from different sources‣ Theming should support this 8
  • 9. Optimize your design input 9
  • 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. Solutions‣ Ask for a Style Guide‣ Analyze the design‣ Keep designers involved 11
  • 12. Style Guide‣ All recurring design elements and interactions‣ Leading in case of inconsistencies. 12
  • 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. 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. 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. Optimizeyour HTML 16
  • 17. “ The Views output contains a rich set of div tags allowingfine-grained CSS control over the output. ” 17
  • 18. Remove HTML‣ Clean up template files‣ Examples: Panels, Views, Field‣ Use Display Suite (Field Templates)‣ One-time effort 18
  • 19. Before cleanup 19
  • 20. After cleanup 20
  • 21. Module unaware HTML‣ .panel-pane .pane-title {} vs .block > h2 {}‣ page.tpl.php vs Panels Layout‣ Views specific classes 21
  • 22. Add own classes‣ Block class: http://drupal.org/ project/block_class‣ Views‣ Display Suite‣ Panels 22
  • 23. Writemaintainable CSS 23
  • 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. As generic as possible.field vs.page-article #content div.nodediv.field-title 25
  • 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. Drupal CSS standards‣ http://drupal.org/node/1887862‣ .quote { margin-left: 15px; font-style: italic; } 27
  • 28. Build amaintainable theme 28
  • 29. Theming is...‣ Basic design‣ Features‣ Reusable styles 29
  • 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. Features‣ Examples: news, blog, slideshow‣ Separate CSS files‣ Clear separation between reuse of styles and custom CSS 31
  • 32. Styles‣ Examples: list of teasers, block styles‣ Power of Sass‣ Add as you go 32
  • 33. Power of Sass‣ Mixins and extendables‣ Variables‣ Selector nesting 33
  • 34. Power of Sass.node-news { .view-mode-teaser { @extend %teaser; color: $grey; @include border-radius(3px); margin-top: 0; }} 34
  • 35. Wundertheme‣ Custom starter theme‣ Beta‣ https://github.com/Krimson/ wundertheme.git 35
  • 36. In Summary 36
  • 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. Power of Sass.node-news { .view-mode-teaser { @extend %teaser; color: $grey; @include border-radius(3px); margin-top: 0; }} 38
  • 39. In Summary‣ Drupal is special‣ Optimize your design input‣ Optimize your Drupal HTML‣ Write maintainable CSS‣ Build a maintainable theme 39
  • 40. Questions? 40
  • 41. 41

×