Theming Drupal 8

Theming guide for Drupal 8.

Defining a theme with an .info.yml file

Define a Drupal 8 theme with an .info.yml file.

Drupal 8 Theme folder structure

A theme is a collection of files that define the presentation layer. You can also create one or more "sub-themes" or variations on a theme.

Adding Regions to a Theme

Adding regions to a theme requires:

Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 theme

In Drupal 8, stylesheets (CSS) and JavaScript (JS) are loaded through the same system for modules (code) and themes, for everything: asset

Twig in Drupal 8

Twig is the default template engine for Drupal 8.

Creating a Drupal 8 sub-theme, or sub-theme of sub-theme

Sub-themes are just like any other theme, with one difference: they inherit the parent theme's resources. There are no limits on the

Using Classy as a base theme

Classy is a theme in Drupal 8 core that is used as a base theme for Bartik and Seven. Its purpose is to provide many classes throughout the

Classy themes css selectors

Document all css class selectors that are in the classy theme Drupal8 RC 2

Including Default Image Styles With Your Theme

Drupal has a powerful image manipulation system that allows for the creation of image styles that can perform various effects on an image

Including Part Template

Many themers prefer to keep header / footer codes in a separate file and call the file in page.html.twig

Using attributes in templates

Many Twig templates will have one or more attribute objects passed in as variables. The job of the Attribute object is to store a set of

Preprocessing and modifying attributes in a .theme file

Just like Drupal 7, you can affect the output of certain HTML via preprocess functions. For example, if you wanted to add a class to a menu

Working with breakpoints in Drupal 8

There is no user interface for editing breakpoints in Drupal 8. Due to the fact that breakpoints are config, it's not possible to provide a

Creating advanced theme settings

In the Drupal administration section, each theme has its own settings page at admin/appearance/settings/themeName. And this page has a form

Theming differences between Drupal 6, 7 & 8

This is a list of some of the most noteworthy changes in Drupal 8 that affect theming.

Upgrading 7.x themes to 8.x

Changes to core classes

Drupal Twig conversion instructions (tpl.php to html.twig)

This document was used during much of the Twig conversion process for Drupal 8 and could be useful to you too for updating your own themes

Creating automation tools for custom themes (Gulpjs)

Using automation tools simplifies the task of creating themes. Here we are going to use gulpjs to create an automation tool for a custom

Sub-Theme inheritance

Which properties of a base theme do and don't get inherited by a sub-theme.

Z-indexes in Drupal 8

A table showing all elements with z-indexes in Drupal 8 core themes, modules and libraries.

Related projects

DrupalExp Lite 8.x-1.0+

Guide maintainers