In the hopes of helping fellow young themers, here is an overview of the main changes to the Drupal 8 theming layer, with a collection of technical details that can help you begin working on a Drupal 8 site.
My first experience building and theming a Drupal 8 site was with the World IA website. It was a beta release at that point, and most modules still weren't available; when I reached the theming stage, I discovered in horror that I couldn't find enough classes to target my CSS on. However, all was not lost and slowly the advantages of Drupal 8 theming became apparent. Drupal 8 has introduced three main changes:
- Thinner HTML markup with fewer default classes
- Twig templates replace PHP templates
- Improved responsive behaviour
Markup and Classes
HTML Markup and the default classes have been put on a strict diet. Most class definitions were removed from preprocessors, and put in Twig template files in two new base themes that were added to core: Stable and Classy. Stable is the default base theme, providing minimal markup and very few CSS classes, and could be useful for integration with other theming frameworks. Classy extends Stable, and supplies more styling hooks. The base theme is declared in the theme’s .info.yml, which replaces the .info file from Drupal 7.
See more on this here: https://www.lullabot.com/articles/a-tale-of-two-base-themes-in-drupal-8-core
Twig Template
Twig is templating tool for outputting variables in the HTML markup. The shift from PHP templates to twig templates was meant to increase security (with its sandbox mode), improve template standards, and make templates easier to manipulate - especially for designer/themers. Twig has a simple syntax. Double-curly-braces {{ … }} are used to print things to the markup, and {% … %} curly-percent are used to “do something” like add ‘for’ or ‘if’ statements. Other useful features are the Twig filters and functions.
Twig debug can be activated through the sites/default services.yml file. This adds information specifying the template file that created the different html elements on the page, to the page markup. It also adds a list suggestions for template file names that could be used to override the current template. To make overrides, you can copy the content of the current template into a suggested new template file, and make your changes. This great tool was also backported to drupal 7, and can be activated from the settings.php file.
Another useful thing you can do in debug mode is inspect the variables available in the template. This can be done by adding the ‘dump()’ function into the template, or by adding the ‘kint()’ function using the Devel module and Kint submodule. A new feature added to Devel for drupal 8 is the WebProfiler submodule, which adds an admin footer, with useful information like the database query info for the current page, views on the page, and more.
An important details to remember is to rebuild the cache (“drush cr” in Drupal 8) after making any changes to the twig templates.
More on Twig debugging: https://www.drupal.org/node/1906392
Also recommended are:
- https://www.lullabot.com/articles/drupal-8-theming-fundamentals-part-1
- https://www.lullabot.com/articles/drupal-8-theming-fundamentals-part-2
Responsive additions
The main development towards responsive behaviour in Drupal 8 comes from three contributed modules that were available for Drupal 7, and are now part of core: breakpoint, responsive image (previously called picture), and modernizr. Responsive Image module uses the breakpoints set for the breakpoint module, along with image styles to allow the application of different image styles for different breakpoints.
Modernizr tests which HTML5 and CSS3 features the browser supports, and adds the results of its tests as classes on the html, and as the JavaScript object Modernizr. This makes it easier to create fallbacks for browsers that lack support.
***
So there you are! Hopefully this brief summary will aid you in your D8 theming exploits.