Building your first d8 theme
-
Upload
mario-hernandez -
Category
Technology
-
view
455 -
download
0
Transcript of Building your first d8 theme
![Page 1: Building your first d8 theme](https://reader031.fdocuments.in/reader031/viewer/2022030307/58eb34651a28ab6d778b4709/html5/thumbnails/1.jpg)
Building your first Drupal 8 theme
By: Mario Hernandez
August 29, 2015
![Page 2: Building your first d8 theme](https://reader031.fdocuments.in/reader031/viewer/2022030307/58eb34651a28ab6d778b4709/html5/thumbnails/2.jpg)
Mario HernandezSr. Front-End Developer
@imariohernandez
![Page 3: Building your first d8 theme](https://reader031.fdocuments.in/reader031/viewer/2022030307/58eb34651a28ab6d778b4709/html5/thumbnails/3.jpg)
Design/Theming● Usability Testing
● Responsive Design
● Drupal Theming
● Annotated Wireframes
@Mediacurrent
Development● Drupal Support
● Custom Module Development
● Large Scale Systems Integration
● Security & Performance Expertise
We help organizations build highly impactful, elegantly designed Drupal websites that achieve the strategic results you need.
Digital Strategy● Content Strategy
● Content Generation
● Result Metrics
● Marketing Automation Integration
![Page 4: Building your first d8 theme](https://reader031.fdocuments.in/reader031/viewer/2022030307/58eb34651a28ab6d778b4709/html5/thumbnails/4.jpg)
● Meaningful D8 Changes
● Twig and YAML
● Adding CSS/JS
● Responsive in D8
● Building our theme
@Mediacurrent
Agenda
![Page 5: Building your first d8 theme](https://reader031.fdocuments.in/reader031/viewer/2022030307/58eb34651a28ab6d778b4709/html5/thumbnails/5.jpg)
Meaningful D8 ChangesTheming related
@Mediacurrent
![Page 6: Building your first d8 theme](https://reader031.fdocuments.in/reader031/viewer/2022030307/58eb34651a28ab6d778b4709/html5/thumbnails/6.jpg)
Core changes● Modernizr is in core
● CSS or JQuery are not on by default
● drush cr
● No IE6, 7 or 8 support … Yeahhhhhhh!!!!!!!!
@Mediacurrent
![Page 7: Building your first d8 theme](https://reader031.fdocuments.in/reader031/viewer/2022030307/58eb34651a28ab6d778b4709/html5/thumbnails/7.jpg)
Structure Changes● /themes
● /modules
@Mediacurrent
![Page 8: Building your first d8 theme](https://reader031.fdocuments.in/reader031/viewer/2022030307/58eb34651a28ab6d778b4709/html5/thumbnails/8.jpg)
CacheHTML, CSS and JS caching is turned on by default
@Mediacurrent
![Page 9: Building your first d8 theme](https://reader031.fdocuments.in/reader031/viewer/2022030307/58eb34651a28ab6d778b4709/html5/thumbnails/9.jpg)
● Disable caching through UI at /config/development/performance/
● Override settings.php with settings.local.php
○ (copy /sites/example.settings.php and rename settings.local.php)
○ uncomment these lines in default/settings.phpif (file_exists(__DIR__ . 'settings.local.php')) { include __DIR__ . ‘/settings.local.php'; }
@Mediacurrent
How to turn cache off
![Page 10: Building your first d8 theme](https://reader031.fdocuments.in/reader031/viewer/2022030307/58eb34651a28ab6d778b4709/html5/thumbnails/10.jpg)
logo.svg
@Mediacurrent
if placed in theme’s root, Drupal will detect and use it.
PNG versions of logo can be uploaded through theme’s appearance page.
![Page 11: Building your first d8 theme](https://reader031.fdocuments.in/reader031/viewer/2022030307/58eb34651a28ab6d778b4709/html5/thumbnails/11.jpg)
screenshot.png
@Mediacurrent
if placed in theme’s root, Drupal will detect and use it.
Screenshot.png can also be declared in info.yml.
![Page 12: Building your first d8 theme](https://reader031.fdocuments.in/reader031/viewer/2022030307/58eb34651a28ab6d778b4709/html5/thumbnails/12.jpg)
New File TypesTwig and YAML to the rescue
@Mediacurrent
![Page 13: Building your first d8 theme](https://reader031.fdocuments.in/reader031/viewer/2022030307/58eb34651a28ab6d778b4709/html5/thumbnails/13.jpg)
THEME.info.yml
@Mediacurrent
Replaces THEME.info
YAML Ain't Markup Language
![Page 15: Building your first d8 theme](https://reader031.fdocuments.in/reader031/viewer/2022030307/58eb34651a28ab6d778b4709/html5/thumbnails/15.jpg)
page.html.twig
@Mediacurrent
Replaces page.tpl.php
![Page 16: Building your first d8 theme](https://reader031.fdocuments.in/reader031/viewer/2022030307/58eb34651a28ab6d778b4709/html5/thumbnails/16.jpg)
TWIGThe new templating engine
@Mediacurrent
![Page 17: Building your first d8 theme](https://reader031.fdocuments.in/reader031/viewer/2022030307/58eb34651a28ab6d778b4709/html5/thumbnails/17.jpg)
● Markup changes are done in twig
● To override copy *.html.twig in theme folder and don’t forget to drush cr
@Mediacurrent
More about TWIG
![Page 18: Building your first d8 theme](https://reader031.fdocuments.in/reader031/viewer/2022030307/58eb34651a28ab6d778b4709/html5/thumbnails/18.jpg)
● To Print:{{my_variable}}
● To comment:{# Your comment here #}
● To operate{% if content.title %}
@Mediacurrent
TWIG code basics
![Page 19: Building your first d8 theme](https://reader031.fdocuments.in/reader031/viewer/2022030307/58eb34651a28ab6d778b4709/html5/thumbnails/19.jpg)
● Copy default.services.yml to services.yml
● Place in /sites/default or same folder as your settings.local.yml
● Set debug: TRUE
● Don’t forget to drush cr
@Mediacurrent
Debugging Twig
![Page 20: Building your first d8 theme](https://reader031.fdocuments.in/reader031/viewer/2022030307/58eb34651a28ab6d778b4709/html5/thumbnails/20.jpg)
Now available on D7!
@Mediacurrent
$conf['theme_debug'] = TRUE;
http://zoocha.com/blog/theming-drupal-7-just-got-easier
![Page 22: Building your first d8 theme](https://reader031.fdocuments.in/reader031/viewer/2022030307/58eb34651a28ab6d778b4709/html5/thumbnails/22.jpg)
Adding Libraries
@Mediacurrent
https://www.drupal.org/theme-guide/8/assets
![Page 23: Building your first d8 theme](https://reader031.fdocuments.in/reader031/viewer/2022030307/58eb34651a28ab6d778b4709/html5/thumbnails/23.jpg)
Defining a Library
@Mediacurrent
Create THEME.libraries.ym
![Page 25: Building your first d8 theme](https://reader031.fdocuments.in/reader031/viewer/2022030307/58eb34651a28ab6d778b4709/html5/thumbnails/25.jpg)
Adding Breakpoints
@Mediacurrent
● Breakpoints and Picture Modules are in core
● Create THEME.breakpoints.yml
● https://www.drupal.org/documentation/modules/breakpoint
![Page 27: Building your first d8 theme](https://reader031.fdocuments.in/reader031/viewer/2022030307/58eb34651a28ab6d778b4709/html5/thumbnails/27.jpg)
Let’s do this!!!
@Mediacurrent
Hands-on demo
![Page 28: Building your first d8 theme](https://reader031.fdocuments.in/reader031/viewer/2022030307/58eb34651a28ab6d778b4709/html5/thumbnails/28.jpg)
Thank You!Questions?
@Mediacurrent Mediacurrent.com
slideshare.net/mediacurrent