Drupal 8 Theming - Gettin' Twiggy!

image

Here's this great graphic about popular CMS's I discovered that shows my relationship with Drupal perfectly:

 

Drupal 8 has been "live" for a few months now and I've started to dive into creating a Drupal 8 theme. Although I was wary of the of the ever present Drupal learning curve, this time (thankfully) my despair was short lived. I have zero experience with Twig, the "flexible, fast, and secure template engine for PHP", but have been with Drupal for many years now. I think experience in either will help tremendously for Drupal 8.

Twig is very easy to learn. There's already quite a few tutorials out there, and the twig website is a wealth of documentation, but I learn best by dissecting a theme locally and basically seeing what breaks. Acquia's Dev Desktop is handy in this regard. It's incredibly easy to spin up a new site (under a minute) so I can churn through a few "testing" out new features, modules, themes, etc.

Now let's go through a very quick/brief Drupal 8 theming overview. Contrib/custom themes are no longer located at sites/all, they are now located directly in the home directory under "themes" (there's a "modules" folder in the root as well for contrib/custom modules). The base themes that come with Drupal are located in a separate folder, under "core/themes".

The structure within the theme folder has also changed a bit. .info files have been replaced with .yml files. The same basic info will exist in your "theme.info.yml" file, but it's so much more powerful. It's awesome! It dictates the usual information, theme name, description, core, screenshot, regions, etc, but in addition you can select which stylesheets to remove. A new file is the "theme.libraries.yml", which houses all the "libraries" your site will use, which include JavaScript and stylesheet files.

Another new file was added, "theme.layouts.yml", which is also pretty great. Here's a look at the structure:

The first line is the machine name, then the "label" is what you'll see within the Drupal UI. You can also set the category name to better organize the template options, incase you need a large number of layouts. The "template" is the location within the theme folder (I'm using these with display suite so I create a folder titled "ds"), a CSS file if you have one and the regions. I really like this approach: Keeping the layouts within the theme and the options to keep things organized.

For anyone who themed previous versions of Drupal this is a huge leap in the right direction. Adding the ability to remove core classes/stylesheets alone is huge progress. Also the adjustments to the theming files should make it easier to learn for those new to Drupal. Instead of having to work within various modules, a lot of the control is directly within the .yml files within the theme.

Acquia's Dev Desktop makes it painless to spin up a site (or 5) so you don't have to worry about destroying it and losing time to set it up again. Download Drupal 8 and give it a try!

Subscribe to Our Newsletter

Stay In Touch