Feature

Disclaimer:

This article was written with Drupal 8 still under very active development; if something don’t work… maybe you can fix it.

With the release of Drupal 8, themers will be showered with pleasant surprises.

For starters, the theming engine has been changed from PHPTemplate to Twig. And while we were fixing that little issue, we also modernized the CSS architecture, removed all theme functions, shuttled control of markup and CSS into the theme, and added image styles, breakpoints, and responsive images.

Were you ever confused about where certain markup came from? Guess what: it’s now visible by viewing the page source.

Welcome to the epic world of Drupal 8 Theming: powered by a fearless horde of Norsemen and Shield Maidens! riding on mighty Unicorns! in the full moon! under the banner of Drupal 8! onwards to victory!
Or just a really delightful theming experience.

First Blood

Let’s start with a Drupal 8 theme. Create a new folder in [root]/themes/[themename]. This will make it available to all sites in your installation. For a site-specific theme, you could place it in sites/[sitename]/theme as is done in Drupal 7.

To register the theme, Drupal needs a .info file. That file must be placed inside the theme folder theme/[themename]/[themename].info.yml, and have the following contents:

name: yggdrasil
type: theme
description: A mighty theme
package: themes
core: 8.x
screenshot: yggdrasil.gif

base theme: classy

libraries:
- yggdrasil/global

stylesheets-remove: stylesheet-i-dont-need.css
stylesheets-overwrite: stylesheet-i-overwrite.css

regions:
header: Header
content: Main Content
footer: Footer

Let’s break down each part of the .info file.