Release Day: Our Drupal 8 Theming Guide

Image

Themes in Drupal are responsible for the look and feel of your site. They provide the HTML markup, CSS, typography, images, and interactive experience that people encounter when they view your site. Your site's theme is responsible for that oh-so-important first impression of your organization when they visit your Drupal site. So we at Drupalize.Me want to make sure that it's easy for everyone to put their best foot forward and make a good impression.

Today, we're super excited to publish our Drupal 8 Theming guide, a collection of tutorials that will teach you everything you need to know to create amazing Drupal 8 themes. We've put hundreds of hours into researching, digesting and understanding the Drupal 8 theme system. We've poured over the existing documentation and helped to update it whenever we could. We've read the code that makes it all possible, we've dissected core and contributed themes, and talked with front-end developers at Lullabot about their experiences, in order to learn about best practices and unique challenges. And then we boiled it all down into the ultimate Drupal 8 theming guide.

Image

As you might imagine, there’s a lot to learn about developing themes for Drupal 8. We’ve tried to break things up into manageable units, but the truth is, much of it’s intertwined. Our goal is to let you easily skip over the stuff you already know, and just as easily get more information about any related topic you might not be familiar with. Feel free to go through all the tutorials in order, or jump around to those that answer your immediate questions.

Ready to start learning how to create awesome Drupal 8 themes? Here's what we're publishing today:

Basics

• What Is a Theme? (FREE)
• Install and Uninstall Themes (FREE)
• Structure of a Theme
• Describe Your Theme with an Info File
• Fast by Default
• Regions
• Add Regions to a Theme
• Theme Inheritance with Base Themes
• Drupal Base Themes: Stable and Classy
• Use a Base Theme
• Configure Your Environment for Theme Development

Templates

• What Are Template Files?
• Override a Template File
• Determine the Base Name of a Template
• Inspect Variables Available in a Template
• Render API Overview
• Add Logic with THEMENAME.theme
• What Are Preprocess Functions?
• Change Variables with Preprocess Functions
• Add Variables to a Template File
• Make Strings Translatable

Twig

• Twig in Drupal
• Twig Syntax Basics
• Arrays and Objects in Twig
• Loops and Iterators in Twig
• Print Values from a Field with a For Loop
• Twig Filters and Functions
• Make Your Theme Translatable
• Classes and Attributes in Twig Templates
• Routes, URLs, and Links in Twig Templates
• Twig Template Inheritance

CSS and JavaScript

• What Are Libraries?
• Define an Asset Library
• Attach a Library
• JavaScript in Drupal

We believe that this covers everything you'll need to know to get started creating killer Drupal 8 themes. However, our goal isn't to get you started; it's to provide you with a comprehensive guide to putting your best foot forward with an amazing Drupal 8 theme. So, in the coming weeks we'll also be publishing content on:

• Evaluating and choosing a contributed theme, or base theme
• Additional Drupalisms like adding a screenshot to your theme, and contributing your theme back to the community
• Theming forms
• Improving the performance of Drupal 8 themes
• Breakpoints and responsive images
• Adding administrator configurable settings to your theme
• Drupal JavaScript API, coding standards, and using the 3rd party libraries included in core
• Using CSS preprocessors like Sass, and front-end automation tools like Gulp

These additional tutorials are already well underway, but we are so proud of what we’ve accomplished so far we just couldn’t wait any longer to share with you. We’ll continue to add tutorials to the Drupal 8 theming guide as quickly as we finish them.