Drupal 8: frontend development

Drupal 8 frontend development

Beginner level

Almost done…*

*only 2 more hours

Who are you?

I’m Enrico Sato.I work inas frontend developer.

… and I am a Drupal 8 survivor!

And… what do you want?

○ What’s new in Drupal 8 themes;

○ Where is…?

○ How to…?

○ Let’s try!

○ Twig: the new template engine;

○ Playing with Twig

What’s new in Drupal 8 for themers

D7○ PHPTemplate

○ Theme functions + template files

○ Structured markup in core and ‘hardcoded’ classes

○ HTML

D8○ Twig

○ Template files

○ Minimal markup and classes in core

○ HTML5 in core

Theme folder structure

The directory structure of Drupal 8 has changed!

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

“sites/all/themes…”MISSING!!

Location of themes

Theme folder structure

Most common theme files

*.info.yml

*.libraries.yml

*.breakpoints.yml

*.theme

Theme folder structure: https://www.drupal.org/node/2349803

*.info.yml (ex *.info)

○ A theme must contain an .info.yml file to define the theme.

○ Among other things the .info.yml file defines general informations, style sheets, and block regions.

○ This is the only required file in the theme.

*.libraries.yml

○ The .libraries.yml file is used to define JavaScript and CSS libraries that can be loaded or not by the theme.

○ Used also to override CSS or JS.

○ A library as a collection of CSS and JS.

https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-themehttps://ffwagency.com/digital-strategies-blog/managing-css-and-javascript-files-drupal-8-libraries

*.libraries.yml

Libraries are called in the info file:

and defined in the *.libraries.yml file:

*.libraries.yml: drink responsibly!

Be careful:

“global-styling” or “global-js” is not the only way to add assets!

It’s possible to create different libraries (with CSS and JS) and use them separately!

https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-themehttps://www.drupal.org/docs/8/creating-custom-modules/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-moduleTo see some parameters for single asset: http://www.bradwade.com/drupal8/D8-3-Libraries/

*.breakpoints.yml

○ Breakpoints define where a responsive design needs to change in order to respond to different devices.

○ Breakpoints are defined in a .breakpoints.yml file

HEY! Responsive image module in core!

*.theme (ex template.php)

○ The .theme file is a PHP file that contains all the conditional logic and data (pre)processing of the output.

Bye bye theming functions!

ALL GONE: All of the theme() functions have been converted to Twig templates.

New theme hooks

○ Theme suggestions

hook_theme_suggestions()hook_theme_suggestions_HOOK()

○ Theme suggestions alter: hook_theme_suggestions_alter(), hook_theme_suggestions_HOOK_alter()

○ Theme preprocess:

THEME_preprocess(array &$variables, $hook), THEME_preprocess_HOOK(array &$variables)

The preprocess layer

○ The preprocess layer still exists, but it's used for a different purpose.

○ In Drupal 8, the preprocess layer should not be used to add css classes.

The preprocess layer #2

○ This should be done in the template files.

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

Drupal 8 core templates

core/modules/system/templates

Drupal 8 core themes

Drupal 8 core themes

○ bartik○ seven○ stark

○ classy○ stable

Backwards compatibility throughout the Drupal 8 cycle

Default admin theme

Default theme

Drupal core markup test theme

Drupal 8 core themes: bartik

A flexible, recolorable theme with many regions and a responsive, mobile-first layout.The default theme in Drupal 8.

Drupal 8 core themes: seven

The default administration theme for Drupal 8.Now fully responsive.

Drupal 8 core themes: stark

An intentionally plain theme with almost no styling to demonstrate default Drupal’s HTML and CSS.

Stark only outputs html and css from modules.

○ Add no CSS○ Add no templates

Drupal 8 core themes: stable

The Stable theme will function as a backwards compatibility layer for Drupal 8's core markup, CSS and JS. A theme will always use Stable as the base theme unless you use another base theme or set

in your theme .info.yml file.

Drupal 8 core themes: classy

The classes from core have been moved into the classy base theme. Now all template files in core are “classless”.

Is the base theme that Seven and Bartik will extend from.

Classy vs Stable

https://www.lullabot.com/articles/a-tale-of-two-base-themes-in-drupal-8-core

New CSS architecture

SMACSSScalable and Modular Architecture for CSS

• Base• Layout• Component• State• Theme

BEMBlock Element Modifier naming convention

.block__element--modifier

Development tools!

Development tools

Before start with theme development (Drupal development) let’s get some tools:

Drush: http://www.drush.org Drupal Console: http://drupalconsole.com Devel module (& Kint): http://drupal.org/project/devel

Install Drupal console / drush

Edit (global) composer.json and then run composer update

Most useful drush commands:

○ Clear cachedrush cr

○ Download / enable a moduledrush en module_name

○ Uninstall a moduledrush pm-uninstall module_name

○ HELP ME! drush help

Most useful console commands:

○ Generate a theme:drupal generate:theme

○ Generate a module:drupal generate:module

○ Generate a block:drupal generate:plugin:block

○ List drupal routes:drupal router:debug

https://hechoendrupal.gitbooks.io/drupal-console/content/en/index.html

Enable debugging:the manual way

○ Locate services.yml file (sites/default/services.yml)○ If services.yml does not yet exist copy

default.services.yml and rename it to services.yml○ Edit the services.yml file and enable one or more of the

debugging options○ Rebuild cache

Enable debugging:the manual way (continue)

parameters:

twig.config:

# Twig debugging:

debug: true

# Twig auto-reload:

auto_reload: true

# Twig cache:

cache: false

services.yml

Enable debugging: Drupal Console

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

drupal site:mode dev

Do you know?

Disable render cache

Drupal caches any rendering it performs for blocks and entities, to speed up subsequent page loads.

This means that changes to Twig templates for these will not take effect immediately.

Disable render cache

○ add the following lines at the bottom of settings.phpif (file_exists($app_root . '/' . $site_path . /settings.local.php')) {

include $app_root . '/' . $site_path . /settings.local.php';

}

○ copy sites/example.settings.local.php to sites/default/settings.local.php

○ clear the Drupal caches.

Disable render cache

In settings.local.php:

○ disable the render cache (this includes the page cache).$settings['cache']['bins']['render'] = 'cache.backend.null';

○ disable Dynamic Page Cache.$settings['cache']['bins']['dynamic_page_cache'] = 'cache.backend.null';

Devel and Kint

drush dl devel

Kint, the new Krumohttp://raveren.github.io/kint/

Let’s try!

○ Create new theme with drupal console;

○ Theme debug on;

○ Add CSS with libraries file;

○ Disable classy libraries;

The Twig template engine.

Twig: what & why

What?

○ A template engine for PHP

Why?

○ Twig was created by people behind Symfony2

○ Drupal 8 uses some components of Symfony2

Twig was chosen because it was the best choice after comparing various templating languages.

"… We don't have Twig because we have Symfony. It's more that, we have Twig because it's AWESOME"

- Scott Reeves, @Cottser

“Twig…because it's AWESOME”

But why abandoning PHPtemplate?

1. Syntax2. Complexity3. Redundancy4. Security

#1. D8 twig syntax: TWIG

All variables are printed the same way

#1. D8 twig syntax: TWIG: no more var drilling

Drupal 7 and PHPtemplate

Drupal 8 and Twig

#2. D7: complexity

Drupal 7 was funny!

#2. D8: less complexity

D8 is boring!

https://sqndr.github.io/d8-theming-guide/new-theming-layer/index.html

#3. D7: redundancy

There's a lot of duplicated code in themes, we often have multiple files with the same lines of code.

#3. D8: less redundancy

No need to repeat code between templates, we can extend templates with Twig.

#4. Security

D7In a PHPTemplate file you can print all sort of unsanitized data, even delete a table from your DB.

D8In Twig this is not possible, Twig's autoescape feature is enabled by default.

Twig: syntax

Twig: setting vars

Twig: controls

Twig: loops

Twig: |Functions (filters)

Twig: translate

Twig: |Functions (filters custom)

Twig can be extended in many ways; you can add extra tags, filters, tests, operators, global variables, and

functions.

http://twig.sensiolabs.org/doc/2.x/advanced.htmlhttp://symfony.com/doc/current/templating/twig_extension.htmlhttp://web4pro.net/blog-news/custom-twig-filter/http://leopathu.com/content/create-custom-twig-filter-drupal-8

Twig: blocks and extends

page.html.twig

Twig: blocks and extends

page--front.html.twig

Twig coding standard (T.c.s.)

○ Generic Twig coding standards: http://twig.sensiolabs.org/doc/coding_standards.html

○ Twig in Drupal coding standards: http://drupal.org/node/1823416

T.c.s. - HTML attributes

In Drupal core, we will print only the class attribute specially, all the others will be printed as part of {{ attributes }}.

The reason for this is that it needs to be very easy for front end developers to be able to add a class, anywhere

block.html.twig

T.c.s. - Whitespaces

Use the spaceless tag to remove whitespace between HTML tags, not whitespace within HTML tags or whitespace in plain text.

T.c.s. - Comments

○ Singleline:

○ Multiline

Say me more...

https://www.drupal.org/project/twig_field_value

Filters:- field_label : Returns the field label value.- field_value : Returns the render array of the field value(s) without the

field wrappers.- field_raw: Returns raw field properties value(s).- field_target_entity: Returns the referenced entity object(s) of an

entity reference field.

Twig docs

twig.sensiolabs.org

And so, Twig advantages:

○ a clear separation between the logic and the view

○ no more PHP code inside your template files○ it's not only used in Drupal core, so it's not a

Drupaly-thing

Let’s try twig so!

○ Override a template;

○ Extend a template;

○ hook_suggestions_hook_alter;

○ Work in a exemple template file.

Resources

○ Twig official: http://twig.sensiolabs.org/

○ Theming Drupal 8: https://drupal.org/theme-guide/8

○ The Drupal 8 Theming guide: http://d8.sqndr.com/

More articles

○ Drupal 8 Theming Fundamentals, Part 1

○ Drupal 8 Theming Fundamentals, Part 2

○ A Tale of Two Base Themes in Drupal 8 core