This document discusses strategies for creating lean and maintainable Drupal 8 themes. It explains some of the complexity that can arise from Drupal's flexible theming system and powerful configuration options. It then provides recommendations for limiting complexity, such as being consistent, recognizing unnecessary complexity, considering maintainability, adding documentation, and refactoring existing complex themes. Specific techniques recommended include using libraries and view modes appropriately, limiting the use of templates and preprocess functions, and writing clean and reusable CSS/Sass code.

1. CREATING A LEAN, MEAN
DRUPAL 8 THEME
evolvingweb.ca
@evolvingweb

2. Drupal Consulting, Development, and Training
evolvingweb.ca
Suzanne Dergacheva, Co-founder
@suzanne_kennedy

4. • Introduction to Drupal 8 (1 day)
• Drupal 8 Site Building (2 days)
• Drupal 8 Module Development (2 days)
• Drupal 8 Theming (2 days)
• Zero to Hero Drupal 8 Training (5 days)
training@evolvingweb.ca
evolvingweb.ca/training
Drupal 8 Training

5. Drupal Themes Can
be Complicated

6. CSS
Templates
mytheme.theme
or template.php
Regions

7. Configuration for Display and Layout

8. • Why are Drupal themes complex?
• Looking at our Drupal 8 theming toolset
• Managing and limiting the complexity
Creating a Lean, Mean
Drupal 8 Theme

9. Where Does the
Complexity Come
From?

10. Design Flexible Theme System
Powerful Configuration
Log in
name
password
Login
Log in
name
password
Login
Joe joined...
Lisa joined...
Peter joined...
Mary joined...
Who's new?
Ever wondered?
Great news
Fantastic offer for you
CSS
Functions
ViewsPanels
Display Suite
Templates
Layout
Typography
Regions
Branding

11. The Drupal Theme
System is Flexible

12. Need Lots of Different Layouts?

13. We Can Add Templates!

14. Need to Add Display Logic

15. We Can Add Preprocess
Functions!

16. Specific Design Specs?
Comic Book Tourist Brochure Corporate

17. We Can Write Tons of CSS
and JavaScript
segment of _blocks.scss

18. Drupal Configuration
is Powerful

19. Add a Byline to the Page Title

20. Create a View

21. Need to Group Fields?

22. Use Field Collections!

23. Varying Content Displays
Featured Menu
Listing GridFeatured Grid

24. Use View Modes

25. Layout Variations

26. Panels or Display Suite

27. Designers…

28. Designers Can Create Lots of
Variations

29. The Designer Can Create Lots
of Variations

30. Look at all the Fancy Layouts!

31. Everything is Unique!
FAQ About Us
Board of
Directors

32. Landing Pages

33. Design Flexible Theme System
Powerful Configuration
Log in
name
password
Login
Log in
name
password
Login
Joe joined...
Lisa joined...
Peter joined...
Mary joined...
Who's new?
Ever wondered?
Great news
Fantastic offer for you
CSS
Functions
ViewsPanels
Display Suite
Templates
Layout
Typography
Regions
Branding

34. Enter Drupal 8

35. • Libraries for loading CSS/JS
• Twig Templating
• More Templates!
• Core Base Themes: Classy and Stable
• Breakpoints
Drupal 8 Theming

36. • No Javascript by default
• SMACSS-style categorization of CSS
• HTML5 Markup
• Stable theme
• Better accessibility
• De-coupled Drupal is possible
D8 Theme Improvements

37. Does that mean that Drupal 8
solves all our theming
problems?

38. Using Your Front-end
Toolset

39. Stable
Classy

40. Stable
html.html.twig

41. Classy
html.html.twig

42. Libraries

43. mytheme.libraries.yml
global-styling:
css:
theme:
css/styles.css: {}
search-styling:
css:
theme:
css/search.css: {}

44. Attaching Libraries
libraries:
- ‘mytheme/global-styling’
Globally in mytheme.info.yml

45. Attaching Libraries
{{ attach_library(‘mytheme/search-styling’) }}
Contextually in page--search.html.twig

46. Attaching Libraries
Contextually in mytheme.theme

47. Contextual CSS
• Use libraries when there is a significant
body specific CSS + JS
Search CSS + JS
Global CSS
Store CSS + JS

48. Too Many Libraries?
Only create separate libraries for sections of
the site that are separate + specific
Search Store
Front Page User ProfilesLanding Pages

49. CSS in Libraries
Don’t make your selectors too specific
Search Store

50. CSS + SASS

51. Don’t nest your selectors
when you don’t have to
Writing Good SASS

52. Don’t use IDs if you can
avoid it
Writing Good SASS

53. Name and use your
variables consistently
Writing Good SASS

54. Writing Good SASS
• @extend should always appear before
properties
• @include should appear second
• Review the CSS that gets generated
https://github.com/anthonyshort/idiomatic-sass

55. Templates

56. Core Templates
More Core Templates

57. Don’t Create Templates

58. Use Twig Blocks
{% extends 'node.html.twig' %}
{% block nodeheader %}
<p>This is an article node.</p>
{% endblock %}
node--article.html.twig
{% block nodeheader %}
<p>This is a generic node.</p>
{% endblock %}
node.html.twig

59. No Field Left Behind
{{ content|without('links') }}
{{ content.links }}
{{ content.links }}

60. Preprocess
Functions

61. Customize the Display Logic

62. Preprocess Functions:
The Good!
• Transform content before it gets rendered in
templates
• Link one field to another
• Change the format of the submitted text
• Add new variables to the render array

63. Preprocess Functions:
The Ugly!
• Formatting field types
• Overrides that depend on a node ID
• Database calls to style past events and ‘on
tour’ events differently
• Commerce line item calculations for
currencies
• Hiding results of a view

64. Preprocess vs. Template
• Preprocess
• Adding logic
• Adding new
variables
• When the output
depends on the
context
!
!
• Templates
• Adding classes
• Wrapping fields
in different
markup
• Bundling fields
together

65. View Modes

66. Varying Content Displays
Featured Menu
Listing GridFeatured Grid

67. It’s easier than
ever to create view
modes
Adding View Modes in D8

68. Don’t Use View Modes as a
Switch

69. Theme Settings

70. Theme Variations

71. Theme Settings
Alternative to creating multiple themes
Main theme
Sub-theme!
different branding
Main theme mytheme.settings.yml
+

72. Regions

73. Only the Regions You Need
Header
Hero
Navigation
Content
Content Bottom
Footer

74. Your Mission: Limit
the Complexity of the
Theme

76. 1. Be consistent
• Make choices and stick with them
• If you’re using view modes, define and use
them consistently
• If you’re using the Bootstrap theme, apply
the Bootstrap classes for all layouts

77. 2. Recognize Complexity
• Adding template suggestions to create more
templates
• Adding a lot of classes and IDs
• Adding view modes for each content type
• Adding a lot of theme settings
• Using Node IDs in your preprocess functions
• You have a library for every page
• You have a node template for each content
type

78. 3. Ask: How hard will this be
to maintain?
• How much work will it be to apply this to
a new content type?
• What will happen if the client wants to
add a field?
• What if the branding changes?
• Will your colleague, client, or future self
understand this?

79. 4. Documentation
• What to document:
• Regions that don’t get displayed
everywhere
• Preprocess functions that are complex
• Templates - to indicate what you
changed
• Comment your libraries to say why you
added them

80. 5. Refactor
• If you come across a theme that’s very
complex, refactor it before it’s too late!
• Tools to use:
• Site diff: github.com/evolvingweb/
sitediff
• Visual diff tool like backtrac.io

81. • Introduction to Drupal 8 (1 day)
• Drupal 8 Site Building (2 days)
• Drupal 8 Module Development (2 days)
• Drupal 8 Theming (2 days)
• Zero to Hero Drupal 8 Training (5 days)
training@evolvingweb.ca
evolvingweb.ca/training
Drupal 8 Training

82. DrupalNorth June 16-19 drupalnorth.org