Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 engi...
What’s new in Drupal 8 for
themers
D7
○ PHPTemplate
○ Theme functions +
template files
○ Structured markup in core
and ‘ha...
Theme folder structure
The directory structure
of Drupal 8 has
changed!
https://www.drupal.org/node/2349803
“sites/all/the...
Location of themes
Theme folder structure
Most common theme files
*.info.yml
*.libraries.yml
*.breakpoints.yml
*.theme
Theme folder structure: https://www.drupal.or...
*.info.yml (ex *.info)
○ A theme must contain an .info.yml file to define the theme.
○ Among other things the .info.yml fi...
*.libraries.yml
○ The .libraries.yml file is used to define JavaScript and CSS
libraries that can be loaded or not by the ...
*.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 po...
*.breakpoints.yml
○ Breakpoints define where a responsive design needs to
change in order to respond to different devices....
*.theme (ex template.php)
○ The .theme file is a PHP file that contains all the conditional
logic and data (pre)processing...
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...
The preprocess layer
○ The preprocess layer still exists, but it's used for a different purpose.
○ In Drupal 8, the prepro...
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
Defa...
Drupal 8 core themes: bartik
A flexible,
recolorable
theme with
many regions
and a
responsive,
mobile-first
layout.
The de...
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
C...
Drupal 8 core themes: stable
The Stable theme will function as a backwards
compatibility layer for Drupal 8's core markup,...
Drupal 8 core themes: classy
The classes from core have been moved into the classy
base theme.
Now all template files in c...
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
Bloc...
Development tools!
Development tools
Before start with theme development (Drupal
development) let’s get some tools:
Drush: http://www.drush.o...
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
...
Most useful console
commands:
○ Generate a theme:
drupal generate:theme
○ Generate a module:
drupal generate:module
○ Gene...
Enable debugging:
the manual way
○ Locate services.yml file (sites/default/services.yml)
○ If services.yml does not yet ex...
Enable debugging:
the manual way (continue)
parameters:
twig.config:
# Twig debugging:
debug: true
# Twig auto-reload:
aut...
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.
T...
Disable render cache
○ add the following lines at the bottom of settings.php
if (file_exists($app_root . '/' . $site_path ...
Disable render cache
In settings.local.php:
○ disable the render cache (this includes the page cache).
$settings['cache'][...
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 libra...
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 ...
Twig was chosen because it was the best choice after
comparing various templating languages.
"… We don't have Twig because...
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: 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, gl...
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...
T.c.s. - HTML attributes
In Drupal core, we will print only the class
attribute specially, all the others will be printed
...
T.c.s. - Whitespaces
Use the spaceless tag to remove whitespace between HTML tags, not
whitespace within HTML tags or whit...
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.
- f...
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...
Let’s try twig so!
○ Override a template;
○ Extend a template;
○ hook_suggestions_hook_alter;
○ Work in a exemple template...
Resources
○ Twig official: http://twig.sensiolabs.org/
○ Theming Drupal 8: https://drupal.org/theme-guide/8
○ The Drupal 8...
Drupal 8: frontend development
Drupal 8: frontend development
Upcoming SlideShare
Loading in …5
×

Drupal 8: frontend development

634 views

Published on

Formazione sul theming per drupal 8: partendo da una breve panoramica di che cos'è cambiato rispetto alla versione precedente, vedremo quali sono le novità introdotte con la nuova versione ma soprattutto faremo alcuni esempi pratici utili per chi vuole iniziare a creare un tema per drupal 8 e… vivere sereno!

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Drupal 8: frontend development

  1. 1. Drupal 8 frontend development Beginner level
  2. 2. Almost done…* *only 2 more hours
  3. 3. Who are you? I’m Enrico Sato. I work in as frontend developer. … and I am a Drupal 8 survivor!
  4. 4. 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
  5. 5. 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
  6. 6. Theme folder structure The directory structure of Drupal 8 has changed! https://www.drupal.org/node/2349803 “sites/all/themes…” MISSING!!
  7. 7. Location of themes
  8. 8. Theme folder structure
  9. 9. Most common theme files *.info.yml *.libraries.yml *.breakpoints.yml *.theme Theme folder structure: https://www.drupal.org/node/2349803
  10. 10. *.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.
  11. 11. *.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
  12. 12. *.libraries.yml Libraries are called in the info file: and defined in the *.libraries.yml file:
  13. 13. *.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/
  14. 14. *.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!
  15. 15. *.theme (ex template.php) ○ The .theme file is a PHP file that contains all the conditional logic and data (pre)processing of the output.
  16. 16. Bye bye theming functions! ALL GONE: All of the theme() functions have been converted to Twig templates.
  17. 17. 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)
  18. 18. 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.
  19. 19. The preprocess layer #2 ○ This should be done in the template files. https://www.drupal.org/node/2325067
  20. 20. Drupal 8 core templates core/modules/system/templates
  21. 21. Drupal 8 core themes
  22. 22. 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
  23. 23. Drupal 8 core themes: bartik A flexible, recolorable theme with many regions and a responsive, mobile-first layout. The default theme in Drupal 8.
  24. 24. Drupal 8 core themes: seven The default administration theme for Drupal 8. Now fully responsive.
  25. 25. 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
  26. 26. 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.
  27. 27. 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.
  28. 28. Classy vs Stable https://www.lullabot.com/articles/a-tale-of-two-base-themes-in-drupal-8-core
  29. 29. New CSS architecture SMACSS Scalable and Modular Architecture for CSS • Base • Layout • Component • State • Theme BEM Block Element Modifier naming convention .block__element--modifier
  30. 30. Development tools!
  31. 31. 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
  32. 32. Install Drupal console / drush Edit (global) composer.json and then run composer update
  33. 33. 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
  34. 34. 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
  35. 35. 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
  36. 36. 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
  37. 37. Enable debugging: Drupal Console https://www.drupal.org/node/1903374 drupal site:mode dev
  38. 38. Do you know?
  39. 39. 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.
  40. 40. 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.
  41. 41. 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';
  42. 42. Devel and Kint drush dl devel Kint, the new Krumo http://raveren.github.io/kint/
  43. 43. Let’s try! ○ Create new theme with drupal console; ○ Theme debug on; ○ Add CSS with libraries file; ○ Disable classy libraries;
  44. 44. The Twig template engine.
  45. 45. Twig: what & why What? ○ A template engine for PHP Why? ○ Twig was created by people behind Symfony2 ○ Drupal 8 uses some components of Symfony2
  46. 46. 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”
  47. 47. But why abandoning PHPtemplate? 1. Syntax 2. Complexity 3. Redundancy 4. Security
  48. 48. #1. D8 twig syntax: TWIG All variables are printed the same way
  49. 49. #1. D8 twig syntax: TWIG: no more var drilling Drupal 7 and PHPtemplate Drupal 8 and Twig
  50. 50. #2. D7: complexity Drupal 7 was funny!
  51. 51. #2. D8: less complexity D8 is boring! https://sqndr.github.io/d8-theming-guide/new-theming-layer/index.html
  52. 52. #3. D7: redundancy There's a lot of duplicated code in themes, we often have multiple files with the same lines of code.
  53. 53. #3. D8: less redundancy No need to repeat code between templates, we can extend templates with Twig.
  54. 54. #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.
  55. 55. Twig: syntax
  56. 56. Twig: setting vars
  57. 57. Twig: controls
  58. 58. Twig: loops
  59. 59. Twig: |Functions (filters)
  60. 60. Twig: translate
  61. 61. 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
  62. 62. Twig: blocks and extends page.html.twig
  63. 63. Twig: blocks and extends page--front.html.twig
  64. 64. 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
  65. 65. 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
  66. 66. T.c.s. - Whitespaces Use the spaceless tag to remove whitespace between HTML tags, not whitespace within HTML tags or whitespace in plain text.
  67. 67. T.c.s. - Comments ○ Singleline: ○ Multiline
  68. 68. 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.
  69. 69. Twig docs twig.sensiolabs.org
  70. 70. 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
  71. 71. Let’s try twig so! ○ Override a template; ○ Extend a template; ○ hook_suggestions_hook_alter; ○ Work in a exemple template file.
  72. 72. 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

×