Building your first Drupal 8 theme

By: Mario Hernandez

August 29, 2015

Mario HernandezSr. Front-End Developer

@imariohernandez

Design/Theming● Usability Testing

● Responsive Design

● Drupal Theming

● Annotated Wireframes

@Mediacurrent

Development● Drupal Support

● Custom Module Development

● Large Scale Systems Integration

● Security & Performance Expertise

We help organizations build highly impactful, elegantly designed Drupal websites that achieve the strategic results you need.

Digital Strategy● Content Strategy

● Content Generation

● Result Metrics

● Marketing Automation Integration

● Meaningful D8 Changes

● Twig and YAML

● Adding CSS/JS

● Responsive in D8

● Building our theme

@Mediacurrent

Agenda

Meaningful D8 ChangesTheming related

@Mediacurrent

Core changes● Modernizr is in core

● CSS or JQuery are not on by default

● drush cr

● No IE6, 7 or 8 support … Yeahhhhhhh!!!!!!!!

@Mediacurrent

Structure Changes● /themes

● /modules

@Mediacurrent

CacheHTML, CSS and JS caching is turned on by default

@Mediacurrent

● Disable caching through UI at /config/development/performance/

● Override settings.php with settings.local.php

○ (copy /sites/example.settings.php and rename settings.local.php)

○ uncomment these lines in default/settings.phpif (file_exists(__DIR__ . 'settings.local.php')) { include __DIR__ . ‘/settings.local.php'; }

@Mediacurrent

How to turn cache off

logo.svg

@Mediacurrent

if placed in theme’s root, Drupal will detect and use it.

PNG versions of logo can be uploaded through theme’s appearance page.

screenshot.png

@Mediacurrent

if placed in theme’s root, Drupal will detect and use it.

Screenshot.png can also be declared in info.yml.

New File TypesTwig and YAML to the rescue

@Mediacurrent

THEME.info.yml

@Mediacurrent

Replaces THEME.info

YAML Ain't Markup Language

@Mediacurrent

page.html.twig

@Mediacurrent

Replaces page.tpl.php

TWIGThe new templating engine

@Mediacurrent

● Markup changes are done in twig

● To override copy *.html.twig in theme folder and don’t forget to drush cr

@Mediacurrent

More about TWIG

● To Print:{{my_variable}}

● To comment:{# Your comment here #}

● To operate{% if content.title %}

@Mediacurrent

TWIG code basics

● Copy default.services.yml to services.yml

● Place in /sites/default or same folder as your settings.local.yml

● Set debug: TRUE

● Don’t forget to drush cr

@Mediacurrent

Debugging Twig

Now available on D7!

@Mediacurrent

$conf['theme_debug'] = TRUE;

http://zoocha.com/blog/theming-drupal-7-just-got-easier

Adding CSS & JS

@Mediacurrent

Adding Libraries

@Mediacurrent

https://www.drupal.org/theme-guide/8/assets

Defining a Library

@Mediacurrent

Create THEME.libraries.ym

Responsive

@Mediacurrent

Adding Breakpoints

@Mediacurrent

● Breakpoints and Picture Modules are in core

● Create THEME.breakpoints.yml

● https://www.drupal.org/documentation/modules/breakpoint

Adding Breakpoints

@Mediacurrent

Let’s do this!!!

@Mediacurrent

Hands-on demo

Thank You!Questions?

@Mediacurrent Mediacurrent.com

slideshare.net/mediacurrent