Building your first d8 theme
0 likes611 views
The document discusses building a first Drupal 8 theme. It covers meaningful changes in Drupal 8 like the use of Twig and YAML, adding CSS and JavaScript, responsive design using breakpoints, and debugging themes. The presentation provides an overview of these topic areas and demonstrates building a basic Drupal 8 theme through a hands-on demo.
![Now available on D7!
@Mediacurrent
$conf['theme_debug'] = TRUE;
http://zoocha.com/blog/theming-drupal-7-just-got-easier](https://image.slidesharecdn.com/buildingyourfirstd8theme-150827025048-lva1-app6892/85/Building-your-first-d8-theme-20-320.jpg)
Building your first d8 theme
- 1. Building your first Drupal 8 theme By: Mario Hernandez August 29, 2015
- 2. Mario Hernandez Sr. Front-End Developer @imariohernandez
- 3. 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
- 4. ● Meaningful D8 Changes ● Twig and YAML ● Adding CSS/JS ● Responsive in D8 ● Building our theme @Mediacurrent Agenda
- 5. Meaningful D8 Changes Theming related @Mediacurrent
- 6. Core changes ● Modernizr is in core ● CSS or JQuery are not on by default ● drush cr ● No IE6, 7 or 8 support … Yeahhhhhhh!!!!!!!! @Mediacurrent
- 7. Structure Changes ● /themes ● /modules @Mediacurrent
- 8. Cache HTML, CSS and JS caching is turned on by default @Mediacurrent
- 9. ● 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.php if (file_exists(__DIR__ . 'settings.local.php')) { include __DIR__ . ‘/settings.local.php'; } @Mediacurrent How to turn cache off
- 10. 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.
- 11. screenshot.png @Mediacurrent if placed in theme’s root, Drupal will detect and use it. Screenshot.png can also be declared in info.yml.
- 12. New File Types Twig and YAML to the rescue @Mediacurrent
- 13. THEME.info.yml @Mediacurrent Replaces THEME.info YAML Ain't Markup Language
- 14. @Mediacurrent
- 16. TWIG The new templating engine @Mediacurrent
- 17. ● 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
- 18. ● To Print: {{my_variable}} ● To comment: {# Your comment here #} ● To operate {% if content.title %} @Mediacurrent TWIG code basics
- 19. ● 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
- 20. Now available on D7! @Mediacurrent $conf['theme_debug'] = TRUE; http://zoocha.com/blog/theming-drupal-7-just-got-easier
- 21. Adding CSS & JS @Mediacurrent
- 23. Defining a Library @Mediacurrent Create THEME.libraries.ym
- 25. Adding Breakpoints @Mediacurrent ● Breakpoints and Picture Modules are in core ● Create THEME.breakpoints.yml ● https://www.drupal.org/documentation/modules/breakpoint