Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Drupal 8 front-end point of view

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

About meHristina Hristova-Bozadzhieva Front-end developer at FFW

E-mail: hristina.hristova@ffwagency.com

SlideShare: drupal8-theming

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Agenda1. Drupal 8 the new things2. Custom theme structure3. Classy – new base theme4. Twig. What is Twig? 5. How to debbug and some examples in Drupal 86. Resources

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

What’s new in Drupal 8

27 Questions (and Answers) from My First Drupal 8 Site Build

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

A new template engineDrupal 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

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Responsive ThemingDrupal 8 Not just mobile friendly, But mobile - first

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

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

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

HTML 5 out of the box

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Drupal 8 WON’T supportInternet Explorer 6Internet Explorer 7Internet Explorer 8

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

CSS build on SMACSS and BEMhttps://smacss.com/Bembase layout component state themehttps://www.drupal.org/node/1887918

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Views in Core

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Views = fully customizable…With the Drupal 8 views, you can customize:

Admin listings Sidebar content Image galleries Slideshows REST output

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

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

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

New Front-end libraries

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Create custom theme

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

CLASSY – a new base themeCore/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.

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

No more - Sites/all/where/the/f*ck/is/my/themes

[root]/themes/my_themeHow to create theme: great article by Matt Korostoff

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

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

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

theme.info.ymlname: [themename]type: themedescription: This is my custom Drupal 8 Themebase theme: classycore: 8.xengine: twigscreenshot: screenshot.png

# --- CSS ------------------------------------------stylesheets: all: - css/styles.cssstylesheets-remove: - normalize.css

# --- REGIONS --------------------------------------regions: header: ‘Header’...

# --- LIBRARIES --------------------------------------libraries: - [themename]/[namespace]

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

theme.libraries.yml# Global for all pagesglobal: version: 1.x css:

css/slider.css: {} js: js/slider.js: {} dependencies: - core/jquery

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

theme.breakpoints.ymlmy_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 displaymy_theme.wide:

label: wide mediaQuery: 'all and (min-width: 851px)' weight: 2 multipliers: - 1x

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

theme.theme• THEME.theme replace template.php

• Theme functions go here.

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

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

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Intro to TwigThere are three delimiters you need to knows

• Print variables: {{ … }} • Comments: {# … #}• Execute statements: {% … %}

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

TWIGVariables 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 ‘.....’ %}

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Arrays1.PHP

<?phpprint $foo[‘bar’][‘und']->content['baz']['foo']['bar'];

?>

2. TWIG

{{ foo.bar.content.baz.foo.bar }}

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Finding Stuff in Twig1.Print all available variables

{{ dump() }}

2. Print content of specific variable{{ dump(foo) }}

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

LoopsTwig 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>

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Loops{{ loop.length }}

{{ loop.first }}

{{ loop.last }}

{{ loop.index}}

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

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

|FILTERTwig template

{% set name = ‘Hrisi’ %}<span> {{ name|length}}</span>

Output:

<span>5</span>

More info: http://twig.sensiolabs.org/doc/filters/index.html

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

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

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

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

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

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

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

TOOLSHow to find stuff and debug

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

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]\core\themes\classy\templates\

They are separated in groups- layout- block- views- content- content-edit- field- navigation- dataset- forum- user- misc

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

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-reloadauto_reload: true - Not recommended in production environments (Default:

null).

Twig cachecache: false

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

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';

}

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

FirebugIn firebug make sure that "Show Comments" is enabled:

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Disable CSS cache and clear the cache!!!

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

After refresh the page

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Another WayDevel module

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

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Kint == Krumo for Drupal8

{{ kint(page) }}

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

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)

Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis

Questions &

Answers

Thank you!