Drupal 8 makes use of Twig as it's new template engine and also provides a simpler theme layer. In this session we explored what Twig has to offer, as well as talked about some Drupal 7 theme problems and the solutions for them in Drupal 8. This session illustrated how Drupal 8 will improve the experience of themers and frontend developers.
13. Loop with Empty Text
<h2>Organizers</h2>
<ul>
{% for user in users %}
<li>{{ user.username}}</li>
{% else %}
<li>no results found</li>
{% endfor %}
</ul>
21. CSS Built on â¨
SMACSS & BEM
CSS
â¨
HTML
.ďŹeld {
margin: 20px 15px;
}
.ďŹeld.ďŹeldâname {
color: orange;
}
<div class=âďŹeld ďŹeld--nameâ>DCNJ</div>
22. Extra Bits
⢠Themes in /themes folderâ¨
no more /sites/all/themes/âŚ
⢠Templates are auto-loaded with hook_theme
implementation key!
⢠Drupal 8 Theme Layer
23. theme.info.yml
⢠Formerly theme.info (same data)
⢠No more stylesheets or scripts propertiesâ¨
(still have stylesheets-override & stylesheets-remove)
⢠Need to deďŹne CSS & JS in *.libraries.yml
why-slider:
version: 1.x
css:
theme:
css/why-slider.css: {}
js:
js/why-slider.js: {}
dependencies:
- core/jquery
28. Twig Debug
<!-- THEME DEBUG -->
<!-- CALL: _theme('page') -->
<!-- FILE NAME SUGGESTIONS:
* page--front.html.twig
* page--node.html.twig
x page.html.twig
-->
<!-- BEGIN OUTPUT from 'core/themes/bartik/templates/page.html.twig' -->
Enable in /sites/default/services.yml
29. Improving the â¨
Themer Experience
CONSENSUS BANANA
Phase 1â¨
Move classes from preprocess â¨
to templates
Phase 2â¨
Move templates from Core â¨
to the new Classy base themeâ¨