1. Efficient theming
for Drupal

2. About us
@CedricS • Frontend Developers
Cedric Spillebeen
• Focus on Dev and UX
@janyves • krimson.be
Jan-yves Vanhaverbeke
@elswens
Els Wens

3. Agenda
• Introduction
• Optimal Design Input
• From Design to Theme
• Basic Frontend Performance
• Questions?

4. Introduction
• Drupal is a CMS.
• Content-first approach.
• Built by backend developers.
“ The Views output contains a rich set of div
tags allowing fine-grained CSS control over
the output. ”

5. Introduction
• Get optimal design input. (complete designs)
• A way of working that leads to a Drupal
theme that is flexible, maintainable and
consistent.
• Optimize the Frontend Performance.

6. Optimize design input

7. Problems with designs
• A design is static but Drupal is flexible.
• Not all pages will be designed.
• Designs are rarely consistent.
• A design reflects the ideal situation.

8. Solutions
• Take out inconsistencies before the final
delivery.
• Check for feasibility.
• Ask for a style guide.

9. Style guide
• An overview of all recurring design elements.
• A requirement for every CMS design.
• A separate design with all elements in the
site.
• Leading in case of inconsistencies.

10. 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.

11. 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.
• Unordered list: How does an unordered list in content
look?

12. From design to theme

14. Analyze the design
• Print all designs.
• Look for patterns:
• Image styles
• View Modes
• Decide on HTML tags / classes / IDs

15. Optimize the HTML
• Don’t just take what Drupal offers by default.
• Case: Views + Panels + Display Suite.

16. Optimize the HTML
• Don’t just take what Drupal offers by default.
• Case: Views + Panels + Display Suite.

17. Optimize the HTML
• Don’t just take what Drupal offers by default.
• Case: Views + Panels + Display Suite.

18. Optimize the HTML
• Don’t just take what Drupal offers by default.
• Case: Views + Panels + Display Suite.
• Use generic classes above IDs.
• Replace module specific HTML.

19. First step
• Get the basics right first!
• Add a simple page with mixed typographical
content.
• Style all generic elements: header, footer,
navigation, typography, colors, links etc.

20. Keep your CSS flexible
• Work as generic as possible.
.field
vs
.page-article #content
div.node div.field-title

21. Keep your CSS flexible
• Theme a visual element, not a Drupal
module:
.article-teaser
vs
.views-articles .views-
row

22. Keep your CSS flexible
• Dare to rework existing CSS as features are
added.

23. Optimize your CSS
• Remove Drupal and module CSS (see
Frontend Performance).
• Use Drupal CSS standards: http://drupal.org/
node/302199
• Use comments to add structure to your CSS.
/*
* Navigation
*/
/* Sidebar Navigation */

24. Frontend Performance

25. Reduce download size
• Clean up your HTML.
• Gzip compression for HTML.
• mod_expires in Apache.
• Optimize your images: http://drupal.org/
project/imageapi_optimize.
• Use Image Styles and Image Resize Filter.

26. Reduce download size
• Remove unused Drupal and module CSS
and javascript:
• hook_css_alter()
• hook_js_alter()
• Add page specific CSS and javascript:
• drupal_add_css()
• drupal_add_js()

27. Less HTTP requests
• Aggregate CSS and javascript.
• Combine different groups into one:
/** /**
* Implements hook_js_alter(). * Implements hook_css_alter().
*/ */
function mymodule_js_alter(&$javascript) { function mymodule_css_alter(&$css) {
uasort($javascript, 'drupal_sort_css_js'); uasort($css, 'drupal_sort_css_js');
$i = 0; $i = 0;
foreach ($javascript as $name => $script) { foreach ($css as $name => $style) {
$javascript[$name]['weight'] = $i++; $css[$name]['weight'] = $i++;
$javascript[$name]['group'] = JS_DEFAULT; $css[$name]['group'] = CSS_DEFAULT;
$javascript[$name]['every_page'] = FALSE; $css[$name]['every_page'] = FALSE;
} }
} }

28. Other
• Move JS to the bottom in your html.tpl.php.
• Use a CDN: http://drupal.org/project/cdn.
• Test your site with Yslow.

29. Questions?