Building a Theme in Drupal 8
After a huge effort by the community over the past few years Drupal 8 is nearly here, and some of the most significant improvements are in the front end.
I recently took D8 for a spin and tested out creating a basic theme to see what's changed and how it's done.
NB. whilst the information in this post is still correct, you may also like to see our more recent post on Drupal 8 theming.
What’s Changed Since Drupal 7?
The front-end layer in Drupal 8 has been brought up to date with what you'd expect from a modern web framework. It still all feels "Drupally" and is still easy enough to pick up and get going with, but instead of re-inventing the wheel everywhere, tried and tested third-party libraries are included and well thought-out standards are adhered to. There is also better support for responsive design, front-end performance optimisation and the whole theme layer is more extensible and (I think) it's nicer for developers to work with.
Some of the headline improvements to the front end include:
- Twig replaces PHPTemplate
- The entire theme layer has been overhauled and simplified
- WAI-ARIA attributes, schema.org and HTML5 elements are used throughout core
- ClassList & HTML5shiv Polyfill's are included, but loaded conditionally via Modernizr
- Responsive breakpoints can be defined by themes for use within modules such as the Picture module (which is now in core)
For a more comprehensive look at the theme system in Drupal 8 check out the following articles:
- Ultimate Guide to Drupal 8: Episode 5 - Front-End Developer Improvements (Acquia)
- Rethinking The Theme Layer in Drupal 8 (PDF - Jen Lampton, DrupalCamp Florida 2014 and here’s a video)
- DrupalCon Amsterdam 2014: Twig and the new Drupal 8 Theme System
I also suggest taking a look at what's changed in Drupal 8 generally, as a LOT has!
Creating a Theme in Drupal 8
To build a simple theme, I started by creating a new directory and a [themename].info.yml file, I called my theme ‘basis’.
I’ve started by just defining the basic meta-data for the theme and two stylesheets.
That’s it! Enabling the theme gives us a fairly minimal starting point to build from.
The [themename].info.yml file is where all the main theme settings and components are declared. Common settings for a Drupal 8 theme are:
- Theme info or meta-data (name, description, version etc)
- Stylesheets (including overrides)
By default the Drupal 8 theme regions provided are:
- Left sidebar
- Right sidebar
- Primary menu
- Secondary menu
- Page top
- Page bottom
To modify these regions we’ll need to declare all regions available to the theme in our .info.yml file. The page_top and page_bottom regions are special regions reserved for Drupal to add additional markup, they will not appear on the block layout page, they don’t have to be declared but it makes sense to declare all regions here, visible or not.
We can also use the new stylesheets-override and stylesheets-remove theme .info.yml file properties. Overriding a CSS file uses only the filename, so you can declare a stylesheets-override and place your CSS file within a theme subdirectory.
There also seems to be the ability for modules allow overrides to be declared in *.info.yml files. I've seen this in the quickedit and ckeditor module, see prius.info.yml for an example.
The new templating system in Drupal is the fantastic Twig, which enforces better separation of logic and presentation and should be more intuitive to use. Twig deserves a blog posts of it's own though, so I'll leave it here for today!
- Drupal 8 Breakpoints and Responsive Images (DrupalCon Amsterdam 2014 video)
- Drupal 8 Theming Guide (drupal.org documentation)
- Theme System Overview (api.drupal.org)