Drupal8 theming

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Drupal 8 front-end point of view

About me
Hristina Hristova-Bozadzhieva
Front-end developer at FFW
E-mail: hristina.hristova@ffwagency.com
SlideShare: drupal8-theming

Agenda
1. Drupal 8 the new things
2. Custom theme structure
3. Classy – new base theme
4. Twig. What is Twig?
5. How to debbug and some examples in Drupal 8
6. Resources

What’s new in Drupal 8
27 Questions (and Answers) from My First Drupal 8 Site Build

A new template engine
Drupal 7 = PHP Template Drupal 8 = TWIG Template
 Conflict between Back-end & Front-end
 Potential Security Issues
 55 templates
154 functions
 Keeps Back-end & Frontend Separated
 More Secure – Autoescaping
 149 templates
21 functions

Responsive Theming
Drupal 8
Not just mobile friendly,
But mobile - first

Stop Divs It!!! – How it’s look drupal 7

HTML 5 out of the box

Drupal 8 WON’T support
 Internet Explorer 6

CSS build on SMACSS and BEM
https://smacss.com/
Bem
 base
 layout
 component
 state
 theme
https://www.drupal.org/node/1887918

Views in Core

Views = fully customizable…
With the Drupal 8 views, you can customize:
 Admin listings
 Sidebar content
 Image galleries
 Slideshows
 REST output

New field types
• E-mail
• Link/URL
• Phone number
• Data/Time
• Entity Reference

New Front-end libraries

Create custom theme

CLASSY – a new base theme
 Core/themes/classy
 In D8, default classes are stripped from Drupal core and
moved into the base theme Classy.
 The role of the Classy theme is to provide default markup and CSS
for Drupal.

No more - Sites/all/where/the/f*ck/is/my/themes
[root]/themes/my_theme
How to create theme: great article
by Matt Korostoff

Drupal 8 theme structure
• my_theme.info.yml
• my_theme.libraries.yml
• my_theme.breakpoints.yml
• my_theme.theme
• Css folder
• Templates folder
• Sass folder
• Img folder
• Js folder

theme.info.yml
name: [themename]
type: theme
description: This is my custom Drupal 8 Theme
base theme: classy
core: 8.x
engine: twig
screenshot: screenshot.png
# --- CSS ------------------------------------------
stylesheets:
all:
- css/styles.css
stylesheets-remove:
- normalize.css
# --- REGIONS --------------------------------------
regions:
header: ‘Header’...
# --- LIBRARIES --------------------------------------
libraries:
- [themename]/[namespace]

theme.libraries.yml
# Global for all pages
global:
version: 1.x
css:
css/slider.css: {}
js:
js/slider.js: {}
dependencies:
- core/jquery

theme.breakpoints.yml
my_theme.mobile:
label: mobile
mediaQuery: ''
weight: 0
multipliers: - 1x
my_theme.narrow:
label: narrow
mediaQuery: 'all and (min-width: 560px) and (max-width: 850px)'
weight: 1
multipliers: - 1.5x // supports Android
-2x // supports Mac retina display
my_theme.wide:
label: wide
mediaQuery: 'all and (min-width: 851px)'
weight: 2
multipliers: - 1x

theme.theme
• THEME.theme replace template.php
• Theme functions go here.

What is TWIG?
 Twig is a “modern” template language ->
symphony, used by other systems
+ It’s easy to learn 
 Twig is a template framework that has replaced
PHP Template in Drupal 8.
 fast, secure and flexible.
http://twig.sensiolabs.org/documentation
http://twig.sensiolabs.org/pdf/Twig.pdf

Intro to Twig
There are three delimiters you need to knows
• Print variables: {{ … }}
• Comments: {# … #}
• Execute statements: {% … %}

TWIG
 Variables can be accessed directly
in Twig.
 Classes can be drilled into to show
attributes:
<div {{ attributes }}>
{{ content }}
</div>
• Conditional statements:
{% if … %}{% endif %}
• Loops:
{% for … %}{% endfor %}
• Blocks:
{% block blockname %}...{% endblock
%}
• Extends:
{% extends ‘.....’ %}

Arrays
1. PHP
<?php
print $foo[‘bar’][‘und']->content['baz']['foo']['bar'];
?>
2. TWIG
{{ foo.bar.content.baz.foo.bar }}

Finding Stuff in Twig
1. Print all available variables
{{ dump() }}
2. Print content of specific variable
{{ dump(foo) }}

Loops
Twig template:
<h2>Organizers</h2>
<ul>
{% for user in users %}
<li>{{user.username}}</li>
{% endfor %}
</ul>
Output:
<h2>Organizers</h2>
<ul>
<li>Hrisi</li>
<li>John</li>
<li>Sean</li>
</ul>

Loops
{{ loop.length }}
{{ loop.first }}
{{ loop.last }}
{{ loop.index}}
{{% if loop.first %}}
…
{% elseif loop.index == 2 %}
…
{{% elseif loop.last %}}
…
{{% endif %}}

|FILTER
Twig template
{% set name = ‘Hrisi’ %}
<span>
{{ name|length}}
</span>
Output:
<span>5</span>
More info: http://twig.sensiolabs.org/doc/filters/index.html

Filters Reference
 abs
 batch
 capitalize
 convert_encoding
 date
 date_modify
 default
 escape
 first
 format
 join
 json_encode
 keys
 last
 length
 lower
 merge
 number_format
 raw
 replace
 reverse
 round
 slice
 sort
 split
 striptags
 title
 trim
 upper
 url_encode

First template {# base.twig #}
{% for post in posts %}
{% block post %}
<h1>{{ post.title }}</h1>
<p>{{ post.body }}</p>
{% endblock %}
{% endfor %}
Second template {# child.twig #}
{% extends "base.twig" %}
{% block post %}
<article>
<header>{{ post.title }}</header>
<section>{{ post.text }}</section>
</article>
{% endblock %}
TWIG Basics inheritance

TWIG inheritance result
{# child.twig #}
{% extends "base.twig" %}
{% block post %}
<article>
<header>{{ post.title }}</header>
<section>{{ post.text }}</section>
</article>
{% endblock %}
Now, when rendering
the child template

TOOLS
How to find stuff and debug

Where are the twig files?
 In the system templates folder
(/core/modules/system/templates)
you’ll find more than 40 templates
things like fields, nodes, pages, links.
 All templates for the theme:
[root]corethemesclassytemplates
 They are separated in groups
- layout
- block
- views
- content
- content-edit
- field
- navigation
- dataset
- forum
- user
- misc

Services.yml
 If services.yml does not yet exist; copy default.services.yml and rename it to services.yml.
 Locate the twig.config parameters in your services.yml and make changes there.
twig.config:
debug: true
 Twig auto-reload
auto_reload: true - Not recommended in production environments (Default: null).
 Twig cache
cache: false

SETTINGS.PHP
 Copy: sites/settings.local.php
 To: sites/default/settings.php
 In Settings.php uncomment:
if (file_exists(__DIR__ . '/settings.local.php')) {
include __DIR__ . '/settings.local.php';
}

Firebug
In firebug make sure that "Show Comments" is enabled:

Disable CSS cache and clear the
cache!!!

After refresh the page

Another Way
Devel module
• Download Devel module
• Install Devel + Kint
• Enable Devel and Kint

Kint == Krumo for Drupal8
{{ kint(page) }}

Resources and further reading
• A brilliant blog post about D8 theming (Savas)
• D8 theming guide (Sander)
• YAML formatting (Symfony)
• Intro to BEM (CSS Wizardry)
• Adding assets to pages (drupal.org)
• Twig documentation (Sensiolabs)
• Drupal-specific Twig filters (drupal.org)
• Twig coding standards (drupal.org)
• Twig debugging and devel (drupalize.me)

Questions
&
Answers

Drupal8 theming

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (7)

Similar to Drupal8 theming

Similar to Drupal8 theming (20)

Recently uploaded

Recently uploaded (20)

Drupal8 theming