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

3.
• 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

4.
Drupal Themes Can
be Complicated

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

6.
Configuration for Display and Layout

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

8.
Where Does the
Complexity Come
From?

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

10.
The Drupal Theme
System is Flexible

11.
Need Lots of Different Layouts?

12.
We Can Add Templates!

13.
Need to Add Display Logic

14.
We Can Add Preprocess
Functions!

15.
Specific Design Specs?
Comic Book Tourist Brochure Corporate

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

17.
Drupal Configuration
is Powerful

18.
Add a Byline to the Page Title

19.
Create a View

20.
Need to Group Fields?

21.
Use Field Collections!

22.
Varying Content Displays
Featured Menu
Listing GridFeatured Grid

23.
Use View Modes

24.
Layout Variations

25.
Panels or Display Suite

26.
Designers…

27.
Designers Can Create Lots of
Variations

28.
The Designer Can Create Lots
of Variations

29.
Look at all the Fancy Layouts!

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

31.
Landing Pages

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

33.
Enter Drupal 8

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

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

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

37.
Using Your Front-end
Toolset

38.
Stable
Classy

39.
Stable
html.html.twig

40.
Classy
html.html.twig

41.
Libraries

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

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

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

45.
Attaching Libraries
Contextually in mytheme.theme

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

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

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

49.
CSS + SASS

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

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

52.
Name and use your
variables consistently
Writing Good SASS

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

54.
Templates

55.
Core Templates
More Core Templates

56.
Don’t Create Templates

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

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

59.
Preprocess
Functions

60.
Customize the Display Logic

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

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

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

64.
View Modes

65.
Varying Content Displays
Featured Menu
Listing GridFeatured Grid

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

67.
Don’t Use View Modes as a
Switch

68.
Theme Settings

69.
Theme Variations

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

71.
Regions

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

73.
Your Mission: Limit
the Complexity of the
Theme

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

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

76.
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?

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

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

79.
• 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

80.
DrupalNorth June 16-19 drupalnorth.org