Articles

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.

Upgrade your Drupal 6/7 site to Drupal 11

Upgrading a Drupal site means changing its major version, such as going from Drupal 6 to Drupal 11 or from Drupal 7 to Drupal 11. This documentation guide focuses on upgrading a Drupal 6 or 7 site to Drupal 11.

 

Updating a Drupal site means updating from one minor version to another, such as from “8.0.2” to “8.3.0”. Please refer to the Drupal 11 site update documentation for more details about updating.