Drupal 8 frontend

development

for dummies

Exausted?

Almost done…**only 2 more hours

Andrea Panisson… Who?

I work in

as frontend developer.

I care UI, IA, Drupal Theming and I care aboutclients.

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

Twig?

Twig is a modern PHP-based compiled templating language.

What's new in Drupal 8 for themers

&

the Twig template engine.

PHPtemplate

theme functions

markup in core

Farewell to

Welcome to

No more markup in core

All through template files

HTML5

Twig

All through template files

Twig: what & why

What?

A template engine for PHP

Why?

Twig was created by people behind Synfony2

Synfony2 was integrated in Drupal 8 core

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

2. Inconsistency

3. Complexity

4. Redundancy

5. Security

“Twig…because it's

AWESOME”

Mixed data types in template files

#1. D8 syntax: TWIG

All variables are printed the same way

#2. Inconsistency

D7 different ways to do the same thing:

Template files or Theme functions.

Theme functions or render arrays

D8 Only template files

Only render arrays

#3. D7: complexity

Drupal 7 was funny!

#3. D8: less complexity

D8 is boring!

#4. D7: redundancy

There's a lot of duplicated code in themes, we often have multiple

files with the same lines of code.

#4. D8: less redundancy

No need to repeat code between templates, we can extend

templates with Twig.

#5. Security

D7

In a PHPTemplate file you can print all sort of unsanitized data,

even delete a table from your DB.

D8

In Twig this is not possible, Twig's autoescape feature is enabled by

default.

TWIG: no more conflict

backend - frontend

They are now separated!

TWIG: easy to learn!

Twig: syntax

Twig: no more var drilling

Drupal 7 and PHPtemplate

Drupal 8 and Twig

Twig: functions (filters)

Twig: |Functions (filters)

Twig: translate

Twig: controls

Twig: loops

Twig: setting vars

Twig: blocks

page.html.twig

Twig: blocks

page--front.html.twig

Twig: includes

Template files are reusable, thanks to Twig includes

http://twig.sensiolabs.org/doc/tags/include.html

{% include “footer.html.twig" %}

Or using namespaces:

{% include “@my_theme/partials/footer.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

T.c.s. - Whitespaces

T.c.s. - Comments

Singleline:

Multiline

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

and Twig disadvantages:

thing to learn

YAML

Yet Another Markup Language** YAML Ain't Markup Language

"YAML is a human friendly data serialization standard for all

programming languages."

-yaml.org

Pronounced “yamel” (rhymes with camel).

YAML

sites/default/services.yml

Why YAML?

YAML is both human editable and machine readable.

.yml files are not Drupal specific like .info files.

And why not XML?

XML would require a Drupal specific schema.

Or JSON?

JSON doesn't allow comments.

Non-ASCII characters require escaping in JSON.

Theme folder structure

The directory structure of Drupal 8 has

changed!

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

Location of themes

/themes

For themes that should be available to all sites.

/sites/{site}/themes

For themes that should be available on a specific site (on a

multisite installation).

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 files defines meta data, 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 by the theme.

A library as a collection of CSS and JS.

*.libraries.yml

Libraries are called in the info file:

and defined in the *.libraries.yml file:

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

*.theme (ex template.php)

The .theme file is a PHP file that contains all the conditional

logic and data (pre)processing of the output.

The theme layer

The new theme layer

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(&$variables, $hook), THEME_preprocess_HOOK(&$variables)

https://api.drupal.org/api/drupal/core!lib!Drupal!Core!Render!theme.api.php/group/themeable/8

Removed process hooks

The process layer (hook_process and hook_process_HOOK) is gone!

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.

This should be done in the template files.

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

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

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

@mortendk

Drupal 8 core templates

core/modules/system/templates

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

Installing composer…

curl -sS https://getcomposer.org/installer | php

mv composer.phar /usr/local/bin/composer

https://getcomposer.org/doc/00-intro.md#globally

Install Drupal console / drush

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

Install Drupal console / drush

composer global require drush/drush:dev-master

composer global require drupal/console:@stable

Remember to add the binaries composer directory to your path, i.e.

$ echo "PATH=$PATH:~/.composer/vendor/bin" >> ~/.bash_profile

Most useful drush commands:

Clear cache

drush cr

Download / enable a module

drush en module_name

HELP ME!

drush help

Most useful console

commands:

Generate a theme:

console generate:theme

More to come... *

* Please, RTFM!

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: true

Enable debugging:

Drupal Console

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

console site:mode dev

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

if (file_exists(__DIR__ . '/settings.local.php')) {

include __DIR__ . '/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 Krumo

http://raveren.github.io/kint/

Twig: compiled in PHP template

Twig template engine takes the template file and converts it into a 'compiled' PHP template in

sites/default/files/php/twig/*

(drush cr clean this folder too)

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