Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis Drupal 8 front-end point of view
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Drupal 8 front-end point of view
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
About meHristina Hristova-Bozadzhieva Front-end developer at FFW
E-mail: [email protected]
SlideShare: drupal8-theming
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Agenda1. Drupal 8 the new things2. Custom theme structure3. Classy – new base theme4. Twig. What is Twig? 5. How to debbug and some examples in Drupal 86. Resources
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
What’s new in Drupal 8
27 Questions (and Answers) from My First Drupal 8 Site Build
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
A new template engineDrupal 7 = PHP Template Drupal 8 = TWIG Template
Conflict between Back-end & Front-end
Potential Security Issues
55 templates 154 functions
Keeps Back-end & Frontend Separated
More Secure – Autoescaping
149 templates 21 functions
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Responsive ThemingDrupal 8 Not just mobile friendly, But mobile - first
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Stop Divs It!!! – How it’s look drupal 7
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
HTML 5 out of the box
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Drupal 8 WON’T supportInternet Explorer 6Internet Explorer 7Internet Explorer 8
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
CSS build on SMACSS and BEMhttps://smacss.com/Bembase layout component state themehttps://www.drupal.org/node/1887918
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Views in Core
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Views = fully customizable…With the Drupal 8 views, you can customize:
Admin listings Sidebar content Image galleries Slideshows REST output
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
New field types• E-mail• Link/URL• Phone number• Data/Time• Entity Reference
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
New Front-end libraries
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Create custom theme
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
CLASSY – a new base themeCore/themes/classy
In D8, default classes are stripped from Drupal core and moved into the base theme Classy.
The role of the Classy theme is to provide default markup and CSS for Drupal.
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
No more - Sites/all/where/the/f*ck/is/my/themes
[root]/themes/my_themeHow to create theme: great article by Matt Korostoff
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Drupal 8 theme structure• my_theme.info.yml• my_theme.libraries.yml• my_theme.breakpoints.
yml• my_theme.theme
• Css folder• Templates folder• Sass folder• Img folder• Js folder
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
theme.info.ymlname: [themename]type: themedescription: This is my custom Drupal 8 Themebase theme: classycore: 8.xengine: twigscreenshot: screenshot.png
# --- CSS ------------------------------------------stylesheets: all: - css/styles.cssstylesheets-remove: - normalize.css
# --- REGIONS --------------------------------------regions: header: ‘Header’...
# --- LIBRARIES --------------------------------------libraries: - [themename]/[namespace]
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
theme.libraries.yml# Global for all pagesglobal: version: 1.x css:
css/slider.css: {} js: js/slider.js: {} dependencies: - core/jquery
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
theme.breakpoints.ymlmy_theme.mobile:
label: mobile mediaQuery: '' weight: 0 multipliers: - 1x
my_theme.narrow: label: narrow mediaQuery: 'all and (min-width: 560px) and (max-width: 850px)'
weight: 1 multipliers: - 1.5x // supports Android
-2x // supports Mac retina displaymy_theme.wide:
label: wide mediaQuery: 'all and (min-width: 851px)' weight: 2 multipliers: - 1x
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
theme.theme• THEME.theme replace template.php
• Theme functions go here.
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
What is TWIG? Twig is a “modern” template language ->
symphony, used by other systems
+ It’s easy to learn
Twig is a template framework that has replaced PHP Template in Drupal 8.
fast, secure and flexible.
http://twig.sensiolabs.org/documentation
http://twig.sensiolabs.org/pdf/Twig.pdf
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Intro to TwigThere are three delimiters you need to knows
• Print variables: {{ … }} • Comments: {# … #}• Execute statements: {% … %}
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
TWIGVariables can be accessed
directly in Twig.
Classes can be drilled into to show attributes:
<div {{ attributes }}> {{ content }} </div>
• Conditional statements: {% if … %}{% endif %}
• Loops: {% for … %}{% endfor %}
• Blocks: {% block blockname %}...{% endblock %}
• Extends:{% extends ‘.....’ %}
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Arrays1.PHP
<?phpprint $foo[‘bar’][‘und']->content['baz']['foo']['bar'];
?>
2. TWIG
{{ foo.bar.content.baz.foo.bar }}
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Finding Stuff in Twig1.Print all available variables
{{ dump() }}
2. Print content of specific variable{{ dump(foo) }}
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
LoopsTwig template:
<h2>Organizers</h2><ul>
{% for user in users %}<li>{{user.username}}</
li>{% endfor %}
</ul>
Output:
<h2>Organizers</h2><ul>
<li>Hrisi</li><li>John</li><li>Sean</li>
</ul>
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Loops{{ loop.length }}
{{ loop.first }}
{{ loop.last }}
{{ loop.index}}
{{% if loop.first %}}…{% elseif loop.index == 2 %}…{{% elseif loop.last %}}…{{% endif %}}
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
|FILTERTwig template
{% set name = ‘Hrisi’ %}<span> {{ name|length}}</span>
Output:
<span>5</span>
More info: http://twig.sensiolabs.org/doc/filters/index.html
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Filters Reference abs batch capitalize convert_encoding date date_modify default escape first format
join json_encode keys last length lower merge number_format raw
replace reverse round slice sort split striptags title trim upper url_encode
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
First template {# base.twig #}
{% for post in posts %}
{% block post %} <h1>{{ post.title }}</h1> <p>{{ post.body }}</p> {% endblock %}
{% endfor %}
Second template {# child.twig #}
{% extends "base.twig" %}
{% block post %} <article> <header>{{ post.title }}</header> <section>{{ post.text }}</section> </article>{% endblock %}
TWIG Basics inheritance
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
TWIG inheritance result{# child.twig #}
{% extends "base.twig" %}
{% block post %} <article> <header>{{ post.title }}</header> <section>{{ post.text }}</section> </article>{% endblock %}
Now, when rendering the child template
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
TOOLSHow to find stuff and debug
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Where are the twig files? In the system templates folder
(/core/modules/system/templates)
you’ll find more than 40 templates things like fields, nodes, pages, links.
All templates for the theme: [root]\core\themes\classy\templates\
They are separated in groups- layout- block- views- content- content-edit- field- navigation- dataset- forum- user- misc
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Services.yml If services.yml does not yet exist; copy default.services.yml and rename it to
services.yml.
Locate the twig.config parameters in your services.yml and make changes there.twig.config:
debug: true
Twig auto-reloadauto_reload: true - Not recommended in production environments (Default:
null).
Twig cachecache: false
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
SETTINGS.PHP Copy: sites/settings.local.php To: sites/default/settings.php
In Settings.php uncomment:
if (file_exists(__DIR__ . '/settings.local.php')) {include __DIR__ . '/settings.local.php';
}
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
FirebugIn firebug make sure that "Show Comments" is enabled:
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Disable CSS cache and clear the cache!!!
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
After refresh the page
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Another WayDevel module
• Download Devel module• Install Devel + Kint• Enable Devel and Kint
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Kint == Krumo for Drupal8
{{ kint(page) }}
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Resources and further reading• A brilliant blog post about D8 theming (Savas)• D8 theming guide (Sander)• YAML formatting (Symfony)• Intro to BEM (CSS Wizardry)• Adding assets to pages (drupal.org)• Twig documentation (Sensiolabs)• Drupal-specific Twig filters (drupal.org)• Twig coding standards (drupal.org)• Twig debugging and devel (drupalize.me)
Formerly known as Bysted, Propeople, Blink Reaction, Chainbizz and Geekpolis
Questions &
Answers
Thank you!