As in Drupal 7, you can influence the output of specific HTML using preprocess functions. For example, if you want to add a class to a menu and prefer to do it at the PHP level, you can. This is a good way to alter theme-related markup, but if you're making changes unrelated to the theme, it's better to write a custom module.
(Note: For documentation purposes here, “mytheme” is your theme’s machine name; for example, “bartik” is the machine name for the Bartik theme.)
To work with preprocess functions:
Drupal 8 does not have a user interface for editing breakpoints. Because breakpoints are defined in configuration files, it's also not possible to provide a UI in contrib.
Breakpoints are used to segment the height or width of viewports (screens, printers, and other media output types) into stages, allowing responsive design to adapt for proper display across various devices. The Breakpoints module standardizes the use of breakpoints and allows modules and themes to expose or use each other's breakpoints. It tracks breakpoints by height, width, and resolution.
In the Drupal administration section, each theme has its own settings page at admin/Appearance/Settings/themeName. This page contains a form with standard options such as "Logo image settings" and "Shortcut icon settings".
This is a list of some of the most notable changes in Drupal 8 that affect theming.
Changes to Core Classes
Simplified "element-x" Helper Class Names
Drupal 7 introduced several new classes: element-hidden, element-invisible, and element-focusable. It was difficult to understand exactly what these classes did based on their names, so the class names were changed. The new names should make it easier to understand their function and are more aligned with HTML 5 Boilerplate, a popular HTML 5 framework. Here's a conversion and usage table:
This document was used throughout most of the Twig conversion process for Drupal 8 and may also be useful to you when updating your own themes and modules to use the Twig template engine in Drupal 8.
Note: all Twig-related work is now done in the Drupal core issue queue. Use the Twig conversion sandbox only to find previously converted templates and functions.
Steps for core contributors:
Using automation tools simplifies the task of theme development. Here we’ll use Gulp.js to build an automation tool for a custom theme.
Works with Gulp 3.x and Node 10.x or lower
Steps:
1. Install Node.js
Download and install the latest version of NodeJS from nodejs.org. The installation process may vary depending on your operating system.
2. Install Gulp
npm install gulp-cli -g
3. Set up gulpfile.js
Navigate to the custom theme directory.
In the previous section, we explored how a sub-theme is created along with the inheritance of various properties.
The list below summarizes the inheritance properties:
Working with z-index (layers) in Drupal, developers may need to experiment to determine whether an element they move up or down in the stack will cover or be covered by an element themed by a core module or theme.
To save time figuring out what’s happening at the stacking level, the table below lists all instances of z-index values in core. A module or theme with inherited cells includes only a few entries if inheritance doesn't alter the z-index value; otherwise, it receives a new row.