SlideShare a Scribd company logo
1 of 74
Download to read offline
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 in
as 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-drup
al-8-theme
https://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-theme
https://www.drupal.org/docs/8/creating-custom-modules/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-module
To 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
SMACSS
Scalable and Modular Architecture for CSS
• Base
• Layout
• Component
• State
• Theme
BEM
Block 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 cache
drush cr
○ Download / enable a module
drush en module_name
○ Uninstall a module
drush 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.ym
l
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.php
if (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 Krumo
http://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. Syntax
2. Complexity
3. Redundancy
4. 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
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: 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.html
http://symfony.com/doc/current/templating/twig_extension.html
http://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
Drupal 8: frontend development

More Related Content

What's hot

Drupal Presentation for CapitalCamp 2011: Features Driven Development
Drupal Presentation for CapitalCamp 2011: Features Driven DevelopmentDrupal Presentation for CapitalCamp 2011: Features Driven Development
Drupal Presentation for CapitalCamp 2011: Features Driven DevelopmentMediacurrent
 
Ninja Build: Simple Guide for Beginners
Ninja Build: Simple Guide for BeginnersNinja Build: Simple Guide for Beginners
Ninja Build: Simple Guide for BeginnersChang W. Doh
 
Drupal 8 improvements for developer productivity php symfony and more
Drupal 8 improvements for developer productivity  php symfony and moreDrupal 8 improvements for developer productivity  php symfony and more
Drupal 8 improvements for developer productivity php symfony and moreAcquia
 
[drupalday2017] - Speed-up your Drupal instance!
[drupalday2017] - Speed-up your Drupal instance![drupalday2017] - Speed-up your Drupal instance!
[drupalday2017] - Speed-up your Drupal instance!DrupalDay
 
Composer & Drupal
Composer & DrupalComposer & Drupal
Composer & Drupaldrubb
 
Speed up Drupal development with Drush
Speed up Drupal development with DrushSpeed up Drupal development with Drush
Speed up Drupal development with Drushkbasarab
 
Common Pitfalls for your Drupal Site, and How to Avoid Them
Common Pitfalls for your Drupal Site, and How to Avoid ThemCommon Pitfalls for your Drupal Site, and How to Avoid Them
Common Pitfalls for your Drupal Site, and How to Avoid ThemAcquia
 
Headless Drupal
Headless DrupalHeadless Drupal
Headless Drupaldrubb
 
[drupalday2017] - REST in pieces
[drupalday2017] - REST in pieces[drupalday2017] - REST in pieces
[drupalday2017] - REST in piecesDrupalDay
 
Drupal Console Deep Dive: How to Develop Faster and Smarter on Drupal 8
Drupal Console Deep Dive: How to Develop Faster and Smarter on Drupal 8Drupal Console Deep Dive: How to Develop Faster and Smarter on Drupal 8
Drupal Console Deep Dive: How to Develop Faster and Smarter on Drupal 8Jake Borr
 
Migrating to Drupal 8: How to Migrate Your Content and Minimize the Risks
Migrating to Drupal 8: How to Migrate Your Content and Minimize the RisksMigrating to Drupal 8: How to Migrate Your Content and Minimize the Risks
Migrating to Drupal 8: How to Migrate Your Content and Minimize the RisksAcquia
 
Drupal 8 Vocab Lesson
Drupal 8 Vocab LessonDrupal 8 Vocab Lesson
Drupal 8 Vocab LessonMediacurrent
 
Big query - Command line tools and Tips - (MOSG)
Big query - Command line tools and Tips - (MOSG)Big query - Command line tools and Tips - (MOSG)
Big query - Command line tools and Tips - (MOSG)Soshi Nemoto
 
Configuration as Dependency: Managing Drupal 8 Configuration with git and Com...
Configuration as Dependency: Managing Drupal 8 Configuration with git and Com...Configuration as Dependency: Managing Drupal 8 Configuration with git and Com...
Configuration as Dependency: Managing Drupal 8 Configuration with git and Com...Erich Beyrent
 
문서화에 날개를 달아주는 Flybook CLI
문서화에 날개를 달아주는 Flybook CLI문서화에 날개를 달아주는 Flybook CLI
문서화에 날개를 달아주는 Flybook CLIRhio Kim
 
Puppet Camp Ghent 2013
Puppet Camp Ghent 2013Puppet Camp Ghent 2013
Puppet Camp Ghent 2013Server Density
 
Writing and Publishing Puppet Modules
Writing and Publishing Puppet ModulesWriting and Publishing Puppet Modules
Writing and Publishing Puppet ModulesPuppet
 
OpenCms Days 2013 - How to update smoothly to OpenCms 9ms 9
OpenCms Days 2013 - How to update smoothly to OpenCms 9ms 9OpenCms Days 2013 - How to update smoothly to OpenCms 9ms 9
OpenCms Days 2013 - How to update smoothly to OpenCms 9ms 9Alkacon Software GmbH & Co. KG
 
Drupal + composer = new love !?
Drupal + composer = new love !?Drupal + composer = new love !?
Drupal + composer = new love !?nuppla
 

What's hot (20)

Drupal Presentation for CapitalCamp 2011: Features Driven Development
Drupal Presentation for CapitalCamp 2011: Features Driven DevelopmentDrupal Presentation for CapitalCamp 2011: Features Driven Development
Drupal Presentation for CapitalCamp 2011: Features Driven Development
 
Ninja Build: Simple Guide for Beginners
Ninja Build: Simple Guide for BeginnersNinja Build: Simple Guide for Beginners
Ninja Build: Simple Guide for Beginners
 
Drupal 8 improvements for developer productivity php symfony and more
Drupal 8 improvements for developer productivity  php symfony and moreDrupal 8 improvements for developer productivity  php symfony and more
Drupal 8 improvements for developer productivity php symfony and more
 
[drupalday2017] - Speed-up your Drupal instance!
[drupalday2017] - Speed-up your Drupal instance![drupalday2017] - Speed-up your Drupal instance!
[drupalday2017] - Speed-up your Drupal instance!
 
Composer & Drupal
Composer & DrupalComposer & Drupal
Composer & Drupal
 
Speed up Drupal development with Drush
Speed up Drupal development with DrushSpeed up Drupal development with Drush
Speed up Drupal development with Drush
 
Common Pitfalls for your Drupal Site, and How to Avoid Them
Common Pitfalls for your Drupal Site, and How to Avoid ThemCommon Pitfalls for your Drupal Site, and How to Avoid Them
Common Pitfalls for your Drupal Site, and How to Avoid Them
 
Headless Drupal
Headless DrupalHeadless Drupal
Headless Drupal
 
[drupalday2017] - REST in pieces
[drupalday2017] - REST in pieces[drupalday2017] - REST in pieces
[drupalday2017] - REST in pieces
 
Drupal Console Deep Dive: How to Develop Faster and Smarter on Drupal 8
Drupal Console Deep Dive: How to Develop Faster and Smarter on Drupal 8Drupal Console Deep Dive: How to Develop Faster and Smarter on Drupal 8
Drupal Console Deep Dive: How to Develop Faster and Smarter on Drupal 8
 
Migrating to Drupal 8: How to Migrate Your Content and Minimize the Risks
Migrating to Drupal 8: How to Migrate Your Content and Minimize the RisksMigrating to Drupal 8: How to Migrate Your Content and Minimize the Risks
Migrating to Drupal 8: How to Migrate Your Content and Minimize the Risks
 
Drupal 8 Vocab Lesson
Drupal 8 Vocab LessonDrupal 8 Vocab Lesson
Drupal 8 Vocab Lesson
 
Big query - Command line tools and Tips - (MOSG)
Big query - Command line tools and Tips - (MOSG)Big query - Command line tools and Tips - (MOSG)
Big query - Command line tools and Tips - (MOSG)
 
Configuration as Dependency: Managing Drupal 8 Configuration with git and Com...
Configuration as Dependency: Managing Drupal 8 Configuration with git and Com...Configuration as Dependency: Managing Drupal 8 Configuration with git and Com...
Configuration as Dependency: Managing Drupal 8 Configuration with git and Com...
 
OpenCms Days 2013 - Site Management Tool
OpenCms Days 2013 - Site Management ToolOpenCms Days 2013 - Site Management Tool
OpenCms Days 2013 - Site Management Tool
 
문서화에 날개를 달아주는 Flybook CLI
문서화에 날개를 달아주는 Flybook CLI문서화에 날개를 달아주는 Flybook CLI
문서화에 날개를 달아주는 Flybook CLI
 
Puppet Camp Ghent 2013
Puppet Camp Ghent 2013Puppet Camp Ghent 2013
Puppet Camp Ghent 2013
 
Writing and Publishing Puppet Modules
Writing and Publishing Puppet ModulesWriting and Publishing Puppet Modules
Writing and Publishing Puppet Modules
 
OpenCms Days 2013 - How to update smoothly to OpenCms 9ms 9
OpenCms Days 2013 - How to update smoothly to OpenCms 9ms 9OpenCms Days 2013 - How to update smoothly to OpenCms 9ms 9
OpenCms Days 2013 - How to update smoothly to OpenCms 9ms 9
 
Drupal + composer = new love !?
Drupal + composer = new love !?Drupal + composer = new love !?
Drupal + composer = new love !?
 

Similar to Drupal 8: frontend development

Drupal 8 - Corso frontend development
Drupal 8 - Corso frontend developmentDrupal 8 - Corso frontend development
Drupal 8 - Corso frontend developmentsparkfabrik
 
Building a Custom Theme in Drupal 8
Building a Custom Theme in Drupal 8Building a Custom Theme in Drupal 8
Building a Custom Theme in Drupal 8Anne Tomasevich
 
Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)Eugenio Minardi
 
Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010Emma Jane Hogbin Westby
 
7 Theming in Drupal
7 Theming in Drupal7 Theming in Drupal
7 Theming in DrupalWingston
 
Drupal 8 introduction to theming
Drupal 8  introduction to themingDrupal 8  introduction to theming
Drupal 8 introduction to themingBrahampal Singh
 
Twig in the wild august 2018 drupal govcon draft
Twig in the wild   august 2018 drupal govcon draftTwig in the wild   august 2018 drupal govcon draft
Twig in the wild august 2018 drupal govcon draftJeremyKoulish
 
Top 8 Improvements in Drupal 8
Top 8 Improvements in Drupal 8Top 8 Improvements in Drupal 8
Top 8 Improvements in Drupal 8Angela Byron
 
One-hour Drupal 8 Theming
One-hour Drupal 8 ThemingOne-hour Drupal 8 Theming
One-hour Drupal 8 ThemingMediacurrent
 
Decoupling Drupal mit dem Lupus Nuxt.js Drupal Stack
Decoupling Drupal mit dem Lupus Nuxt.js Drupal StackDecoupling Drupal mit dem Lupus Nuxt.js Drupal Stack
Decoupling Drupal mit dem Lupus Nuxt.js Drupal Stacknuppla
 
Converting (X)HTML/CSS template to Drupal 7 Theme
Converting (X)HTML/CSS template to Drupal 7 ThemeConverting (X)HTML/CSS template to Drupal 7 Theme
Converting (X)HTML/CSS template to Drupal 7 ThemeAdolfo Nasol
 
Learning PHP for Drupal Theming, DC Chicago 2009
Learning PHP for Drupal Theming, DC Chicago 2009Learning PHP for Drupal Theming, DC Chicago 2009
Learning PHP for Drupal Theming, DC Chicago 2009Emma Jane Hogbin Westby
 
Theming tips and tricks
Theming tips and tricksTheming tips and tricks
Theming tips and tricksaaroncouch
 

Similar to Drupal 8: frontend development (20)

Drupal 8 - Corso frontend development
Drupal 8 - Corso frontend developmentDrupal 8 - Corso frontend development
Drupal 8 - Corso frontend development
 
Building a Custom Theme in Drupal 8
Building a Custom Theme in Drupal 8Building a Custom Theme in Drupal 8
Building a Custom Theme in Drupal 8
 
Design to Theme @ CMSExpo
Design to Theme @ CMSExpoDesign to Theme @ CMSExpo
Design to Theme @ CMSExpo
 
Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)
 
Drupal theming
Drupal themingDrupal theming
Drupal theming
 
Forensic Theming for Drupal
Forensic Theming for DrupalForensic Theming for Drupal
Forensic Theming for Drupal
 
Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010
 
7 Theming in Drupal
7 Theming in Drupal7 Theming in Drupal
7 Theming in Drupal
 
Drupal 8 introduction to theming
Drupal 8  introduction to themingDrupal 8  introduction to theming
Drupal 8 introduction to theming
 
Drupal - Introduction to Drupal Creating Modules
Drupal - Introduction to Drupal Creating ModulesDrupal - Introduction to Drupal Creating Modules
Drupal - Introduction to Drupal Creating Modules
 
Designing with Drupal 8
Designing with Drupal 8Designing with Drupal 8
Designing with Drupal 8
 
Twig in the wild august 2018 drupal govcon draft
Twig in the wild   august 2018 drupal govcon draftTwig in the wild   august 2018 drupal govcon draft
Twig in the wild august 2018 drupal govcon draft
 
Top 8 Improvements in Drupal 8
Top 8 Improvements in Drupal 8Top 8 Improvements in Drupal 8
Top 8 Improvements in Drupal 8
 
One-hour Drupal 8 Theming
One-hour Drupal 8 ThemingOne-hour Drupal 8 Theming
One-hour Drupal 8 Theming
 
Decoupling Drupal mit dem Lupus Nuxt.js Drupal Stack
Decoupling Drupal mit dem Lupus Nuxt.js Drupal StackDecoupling Drupal mit dem Lupus Nuxt.js Drupal Stack
Decoupling Drupal mit dem Lupus Nuxt.js Drupal Stack
 
Drupal Best Practices
Drupal Best PracticesDrupal Best Practices
Drupal Best Practices
 
Converting (X)HTML/CSS template to Drupal 7 Theme
Converting (X)HTML/CSS template to Drupal 7 ThemeConverting (X)HTML/CSS template to Drupal 7 Theme
Converting (X)HTML/CSS template to Drupal 7 Theme
 
Learning PHP for Drupal Theming, DC Chicago 2009
Learning PHP for Drupal Theming, DC Chicago 2009Learning PHP for Drupal Theming, DC Chicago 2009
Learning PHP for Drupal Theming, DC Chicago 2009
 
Drupal Front End PHP
Drupal Front End PHPDrupal Front End PHP
Drupal Front End PHP
 
Theming tips and tricks
Theming tips and tricksTheming tips and tricks
Theming tips and tricks
 

More from sparkfabrik

KCD Italy 2023 - Secure Software Supply chain for OCI Artifact on Kubernetes
KCD Italy 2023 - Secure Software Supply chain for OCI Artifact on KubernetesKCD Italy 2023 - Secure Software Supply chain for OCI Artifact on Kubernetes
KCD Italy 2023 - Secure Software Supply chain for OCI Artifact on Kubernetessparkfabrik
 
20231129 - Platform @ localhost 2023 - Application-driven infrastructure with...
20231129 - Platform @ localhost 2023 - Application-driven infrastructure with...20231129 - Platform @ localhost 2023 - Application-driven infrastructure with...
20231129 - Platform @ localhost 2023 - Application-driven infrastructure with...sparkfabrik
 
IAD 2023 - 22 Years of Agile and all I got is this lousy t-shirt
IAD 2023 - 22 Years of Agile and all I got is this lousy t-shirtIAD 2023 - 22 Years of Agile and all I got is this lousy t-shirt
IAD 2023 - 22 Years of Agile and all I got is this lousy t-shirtsparkfabrik
 
2023 - Drupalcon - How Drupal builds your pages
2023 - Drupalcon - How Drupal builds your pages2023 - Drupalcon - How Drupal builds your pages
2023 - Drupalcon - How Drupal builds your pagessparkfabrik
 
2023 - TAC23 - Agile HR - Racconti dal fronte
2023 - TAC23 - Agile HR - Racconti dal fronte2023 - TAC23 - Agile HR - Racconti dal fronte
2023 - TAC23 - Agile HR - Racconti dal frontesparkfabrik
 
CodeMotion 2023 - Deep dive nella supply chain della nostra infrastruttura cl...
CodeMotion 2023 - Deep dive nella supply chain della nostra infrastruttura cl...CodeMotion 2023 - Deep dive nella supply chain della nostra infrastruttura cl...
CodeMotion 2023 - Deep dive nella supply chain della nostra infrastruttura cl...sparkfabrik
 
What is the Secure Supply Chain and the Current State of the PHP Ecosystem
What is the Secure Supply Chain and the Current State of the PHP EcosystemWhat is the Secure Supply Chain and the Current State of the PHP Ecosystem
What is the Secure Supply Chain and the Current State of the PHP Ecosystemsparkfabrik
 
UX e Web sostenibile (UXday 2023).pdf
UX e Web sostenibile (UXday 2023).pdfUX e Web sostenibile (UXday 2023).pdf
UX e Web sostenibile (UXday 2023).pdfsparkfabrik
 
Drupal Dev Days Vienna 2023 - What is the secure software supply chain and th...
Drupal Dev Days Vienna 2023 - What is the secure software supply chain and th...Drupal Dev Days Vienna 2023 - What is the secure software supply chain and th...
Drupal Dev Days Vienna 2023 - What is the secure software supply chain and th...sparkfabrik
 
Deep dive nella supply chain della nostra infrastruttura cloud
Deep dive nella supply chain della nostra infrastruttura cloudDeep dive nella supply chain della nostra infrastruttura cloud
Deep dive nella supply chain della nostra infrastruttura cloudsparkfabrik
 
KCD Italy 2022 - Application driven infrastructure with Crossplane
KCD Italy 2022 - Application driven infrastructure with CrossplaneKCD Italy 2022 - Application driven infrastructure with Crossplane
KCD Italy 2022 - Application driven infrastructure with Crossplanesparkfabrik
 
Come Drupal costruisce le tue pagine
Come Drupal costruisce le tue pagineCome Drupal costruisce le tue pagine
Come Drupal costruisce le tue paginesparkfabrik
 
Drupal 10: un framework PHP di sviluppo Cloud Native moderno
Drupal 10: un framework PHP di sviluppo Cloud Native modernoDrupal 10: un framework PHP di sviluppo Cloud Native moderno
Drupal 10: un framework PHP di sviluppo Cloud Native modernosparkfabrik
 
Do you know what your Drupal is doing Observe it! (DrupalCon Prague 2022)
Do you know what your Drupal is doing Observe it! (DrupalCon Prague 2022)Do you know what your Drupal is doing Observe it! (DrupalCon Prague 2022)
Do you know what your Drupal is doing Observe it! (DrupalCon Prague 2022)sparkfabrik
 
Do you know what your Drupal is doing_ Observe it!
Do you know what your Drupal is doing_ Observe it!Do you know what your Drupal is doing_ Observe it!
Do you know what your Drupal is doing_ Observe it!sparkfabrik
 
Progettare e sviluppare soluzioni serverless con AWS
Progettare e sviluppare soluzioni serverless con AWSProgettare e sviluppare soluzioni serverless con AWS
Progettare e sviluppare soluzioni serverless con AWSsparkfabrik
 
From React to React Native - Things I wish I knew when I started
From React to React Native - Things I wish I knew when I startedFrom React to React Native - Things I wish I knew when I started
From React to React Native - Things I wish I knew when I startedsparkfabrik
 
Headless Drupal: A modern approach to (micro)services and APIs
Headless Drupal: A modern approach to (micro)services and APIsHeadless Drupal: A modern approach to (micro)services and APIs
Headless Drupal: A modern approach to (micro)services and APIssparkfabrik
 
Cloud-Native Drupal: a survival guide
Cloud-Native Drupal: a survival guideCloud-Native Drupal: a survival guide
Cloud-Native Drupal: a survival guidesparkfabrik
 
Mobile Development: una introduzione per Web Developers
Mobile Development: una introduzione per Web DevelopersMobile Development: una introduzione per Web Developers
Mobile Development: una introduzione per Web Developerssparkfabrik
 

More from sparkfabrik (20)

KCD Italy 2023 - Secure Software Supply chain for OCI Artifact on Kubernetes
KCD Italy 2023 - Secure Software Supply chain for OCI Artifact on KubernetesKCD Italy 2023 - Secure Software Supply chain for OCI Artifact on Kubernetes
KCD Italy 2023 - Secure Software Supply chain for OCI Artifact on Kubernetes
 
20231129 - Platform @ localhost 2023 - Application-driven infrastructure with...
20231129 - Platform @ localhost 2023 - Application-driven infrastructure with...20231129 - Platform @ localhost 2023 - Application-driven infrastructure with...
20231129 - Platform @ localhost 2023 - Application-driven infrastructure with...
 
IAD 2023 - 22 Years of Agile and all I got is this lousy t-shirt
IAD 2023 - 22 Years of Agile and all I got is this lousy t-shirtIAD 2023 - 22 Years of Agile and all I got is this lousy t-shirt
IAD 2023 - 22 Years of Agile and all I got is this lousy t-shirt
 
2023 - Drupalcon - How Drupal builds your pages
2023 - Drupalcon - How Drupal builds your pages2023 - Drupalcon - How Drupal builds your pages
2023 - Drupalcon - How Drupal builds your pages
 
2023 - TAC23 - Agile HR - Racconti dal fronte
2023 - TAC23 - Agile HR - Racconti dal fronte2023 - TAC23 - Agile HR - Racconti dal fronte
2023 - TAC23 - Agile HR - Racconti dal fronte
 
CodeMotion 2023 - Deep dive nella supply chain della nostra infrastruttura cl...
CodeMotion 2023 - Deep dive nella supply chain della nostra infrastruttura cl...CodeMotion 2023 - Deep dive nella supply chain della nostra infrastruttura cl...
CodeMotion 2023 - Deep dive nella supply chain della nostra infrastruttura cl...
 
What is the Secure Supply Chain and the Current State of the PHP Ecosystem
What is the Secure Supply Chain and the Current State of the PHP EcosystemWhat is the Secure Supply Chain and the Current State of the PHP Ecosystem
What is the Secure Supply Chain and the Current State of the PHP Ecosystem
 
UX e Web sostenibile (UXday 2023).pdf
UX e Web sostenibile (UXday 2023).pdfUX e Web sostenibile (UXday 2023).pdf
UX e Web sostenibile (UXday 2023).pdf
 
Drupal Dev Days Vienna 2023 - What is the secure software supply chain and th...
Drupal Dev Days Vienna 2023 - What is the secure software supply chain and th...Drupal Dev Days Vienna 2023 - What is the secure software supply chain and th...
Drupal Dev Days Vienna 2023 - What is the secure software supply chain and th...
 
Deep dive nella supply chain della nostra infrastruttura cloud
Deep dive nella supply chain della nostra infrastruttura cloudDeep dive nella supply chain della nostra infrastruttura cloud
Deep dive nella supply chain della nostra infrastruttura cloud
 
KCD Italy 2022 - Application driven infrastructure with Crossplane
KCD Italy 2022 - Application driven infrastructure with CrossplaneKCD Italy 2022 - Application driven infrastructure with Crossplane
KCD Italy 2022 - Application driven infrastructure with Crossplane
 
Come Drupal costruisce le tue pagine
Come Drupal costruisce le tue pagineCome Drupal costruisce le tue pagine
Come Drupal costruisce le tue pagine
 
Drupal 10: un framework PHP di sviluppo Cloud Native moderno
Drupal 10: un framework PHP di sviluppo Cloud Native modernoDrupal 10: un framework PHP di sviluppo Cloud Native moderno
Drupal 10: un framework PHP di sviluppo Cloud Native moderno
 
Do you know what your Drupal is doing Observe it! (DrupalCon Prague 2022)
Do you know what your Drupal is doing Observe it! (DrupalCon Prague 2022)Do you know what your Drupal is doing Observe it! (DrupalCon Prague 2022)
Do you know what your Drupal is doing Observe it! (DrupalCon Prague 2022)
 
Do you know what your Drupal is doing_ Observe it!
Do you know what your Drupal is doing_ Observe it!Do you know what your Drupal is doing_ Observe it!
Do you know what your Drupal is doing_ Observe it!
 
Progettare e sviluppare soluzioni serverless con AWS
Progettare e sviluppare soluzioni serverless con AWSProgettare e sviluppare soluzioni serverless con AWS
Progettare e sviluppare soluzioni serverless con AWS
 
From React to React Native - Things I wish I knew when I started
From React to React Native - Things I wish I knew when I startedFrom React to React Native - Things I wish I knew when I started
From React to React Native - Things I wish I knew when I started
 
Headless Drupal: A modern approach to (micro)services and APIs
Headless Drupal: A modern approach to (micro)services and APIsHeadless Drupal: A modern approach to (micro)services and APIs
Headless Drupal: A modern approach to (micro)services and APIs
 
Cloud-Native Drupal: a survival guide
Cloud-Native Drupal: a survival guideCloud-Native Drupal: a survival guide
Cloud-Native Drupal: a survival guide
 
Mobile Development: una introduzione per Web Developers
Mobile Development: una introduzione per Web DevelopersMobile Development: una introduzione per Web Developers
Mobile Development: una introduzione per Web Developers
 

Recently uploaded

RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIUdaiappa Ramachandran
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataSafe Software
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxYounusS2
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdfJamie (Taka) Wang
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceMartin Humpolec
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 

Recently uploaded (20)

RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AI
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your Salesforce
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 

Drupal 8: frontend development

  • 4. Who are you? I’m Enrico Sato. I work in as frontend developer. … and I am a Drupal 8 survivor!
  • 5. 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
  • 6. 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
  • 7. Theme folder structure The directory structure of Drupal 8 has changed! https://www.drupal.org/node/2349803 “sites/all/themes…” MISSING!!
  • 10. Most common theme files *.info.yml *.libraries.yml *.breakpoints.yml *.theme Theme folder structure: https://www.drupal.org/node/2349803
  • 11. *.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.
  • 12. *.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-drup al-8-theme https://ffwagency.com/digital-strategies-blog/managing-css-and-javascript-files-drupal-8-libraries
  • 13. *.libraries.yml Libraries are called in the info file: and defined in the *.libraries.yml file:
  • 14. *.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-theme https://www.drupal.org/docs/8/creating-custom-modules/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-module To see some parameters for single asset: http://www.bradwade.com/drupal8/D8-3-Libraries/
  • 15. *.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!
  • 16. *.theme (ex template.php) ○ The .theme file is a PHP file that contains all the conditional logic and data (pre)processing of the output.
  • 17. Bye bye theming functions! ALL GONE: All of the theme() functions have been converted to Twig templates.
  • 18. 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)
  • 19. 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.
  • 20. The preprocess layer #2 ○ This should be done in the template files. https://www.drupal.org/node/2325067
  • 21. Drupal 8 core templates core/modules/system/templates
  • 22. Drupal 8 core themes
  • 23. 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
  • 24. Drupal 8 core themes: bartik A flexible, recolorable theme with many regions and a responsive, mobile-first layout. The default theme in Drupal 8.
  • 25. Drupal 8 core themes: seven The default administration theme for Drupal 8. Now fully responsive.
  • 26. 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
  • 27. 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.
  • 28. 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.
  • 30. New CSS architecture SMACSS Scalable and Modular Architecture for CSS • Base • Layout • Component • State • Theme BEM Block Element Modifier naming convention .block__element--modifier
  • 32. 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
  • 33. Install Drupal console / drush Edit (global) composer.json and then run composer update
  • 34. Most useful drush commands: ○ Clear cache drush cr ○ Download / enable a module drush en module_name ○ Uninstall a module drush pm-uninstall module_name ○ HELP ME! drush help
  • 35. 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
  • 36. 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
  • 37. Enable debugging: the manual way (continue) parameters: twig.config: # Twig debugging: debug: true # Twig auto-reload: auto_reload: true # Twig cache: cache: false services.ym l
  • 40. 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.
  • 41. Disable render cache ○ add the following lines at the bottom of settings.php if (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.
  • 42. 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';
  • 43. Devel and Kint drush dl devel Kint, the new Krumo http://raveren.github.io/kint/
  • 44. Let’s try! ○ Create new theme with drupal console; ○ Theme debug on; ○ Add CSS with libraries file; ○ Disable classy libraries;
  • 46. Twig: what & why What? ○ A template engine for PHP Why? ○ Twig was created by people behind Symfony2 ○ Drupal 8 uses some components of Symfony2
  • 47. 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”
  • 48. But why abandoning PHPtemplate? 1. Syntax 2. Complexity 3. Redundancy 4. Security
  • 49. #1. D8 twig syntax: TWIG All variables are printed the same way
  • 50. #1. D8 twig syntax: TWIG: no more var drilling Drupal 7 and PHPtemplate Drupal 8 and Twig
  • 52. #2. D8: less complexity D8 is boring! https://sqndr.github.io/d8-theming-guide/new-theming-layer/index.html
  • 53. #3. D7: redundancy There's a lot of duplicated code in themes, we often have multiple files with the same lines of code.
  • 54. #3. D8: less redundancy No need to repeat code between templates, we can extend templates with Twig.
  • 55. #4. 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.
  • 62. 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.html http://symfony.com/doc/current/templating/twig_extension.html http://web4pro.net/blog-news/custom-twig-filter/ http://leopathu.com/content/create-custom-twig-filter-drupal-8
  • 63. Twig: blocks and extends page.html.twig
  • 64. Twig: blocks and extends page--front.html.twig
  • 65. 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
  • 66. 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
  • 67. T.c.s. - Whitespaces Use the spaceless tag to remove whitespace between HTML tags, not whitespace within HTML tags or whitespace in plain text.
  • 68. T.c.s. - Comments ○ Singleline: ○ Multiline
  • 69. 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.
  • 71. 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
  • 72. Let’s try twig so! ○ Override a template; ○ Extend a template; ○ hook_suggestions_hook_alter; ○ Work in a exemple template file.
  • 73. 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