drupal8 theming

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

Drupal 8 front-end point of view


About meHristina Hristova-Bozadzhieva Front-end developer at FFW

E-mail: [email protected]

SlideShare: drupal8-theming

mailto:[email protected]

http://www.slideshare.net/hrisi87/drupal-8-theming-55589932


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


What’s new in Drupal 8

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

https://www.drupal.org/node/2360331



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


Responsive ThemingDrupal 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 supportInternet Explorer 6Internet Explorer 7Internet Explorer 8


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

https://smacss.com/

https://smacss.com/

https://en.bem.info/method/key-concepts/



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


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

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

http://mattkorostoff.com/article/27-questions-and-answers-drupal-8


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


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

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


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


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 TwigThere are three delimiters you need to knows

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


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


Arrays1.PHP

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

?>

2. TWIG

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


Finding Stuff in Twig1.Print all available variables

{{ dump() }}

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


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>


Loops{{ loop.length }}

{{ loop.first }}

{{ loop.last }}

{{ loop.index}}

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


|FILTERTwig template

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

Output:

<span>5</span>

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

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


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

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

null).

Twig cachecache: 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';

}


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


Disable CSS cache and clear the cache!!!


After refresh the page


Another WayDevel 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)

http://savaslabs.com/2015/06/10/d8-theming-basics.html




http://d8.sqndr.com/

http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

https://www.drupal.org/developing/api/8/assets

http://twig.sensiolabs.org/doc/templates.html





https://drupalize.me/blog/201405/lets-debug-twig-drupal-8




Questions &

Answers

Thank you!

drupal8 theming

Software