Training: Theming - Drupalize.me

Themes combine HTML, CSS, JavaScript, and Drupal in order to make beautiful websites. Creating truly unique themes requires knowing how to use the Twig template language to manipulate HTML, how to add CSS and JavaScript assets in a way that's compatible with Drupal's caching, all while maintaining the flexibility that Drupal is known for.

Whether you’re creating an entirely new theme from scratch, or making nips and tucks to an existing design, understanding how Drupal’s theme system works, or having someone on your team who does, is essential.

You'll come away from this course knowing:
● How the Drupal theme layer relates to the rest of the system
● Common theming terminology and processes
● How to override any of Drupal's HTML output
● The relationship between base themes and sub themes
● Everything you need to know about Twig when working with Drupal templates
● How to add both custom and third-party CSS and JavaScript libraries
● Tools for introspecting and debugging a theme
● Tips and tricks for using common front-end development tools like CSS preprocessors and task runners, in conjunction with Drupal

Prerequisites:
Attendees should be familiar with HTML and CSS and understand how to administer content on a Drupal website including adding/editing nodes, installing modules, and administering user accounts. Attendees who wish to follow along with exercises will need to have a working copy of Drupal on their laptop, the ability to edit files in the Drupal code base, and administrator access to the site. We will not be covering setting up a local environment during the class.

Basic Syllabus/Agenda:

Day #1:

Introduction
Get to know the trainers, the other students, and give an overview of what to expect out of the day long training.

Theming overview
In this section we’ll talk about the role that themes play in the creation of a Drupal site, get an overview of the types of things you can, and can not, do with a theme, go over the structure of a theme, and discuss theming specific concepts like regions, libraries, and inheritance.

Getting started with a new theme
In this section we’ll look at how Drupal uses *.info.yml files to collect metadata about available themes. Then, as an exercise we’ll create the foundation for a new custom theme, and discuss where the markup you see in a Drupal theme comes from. We’ll also walk through some things you can do when setting up your local environment in order to make theme development easier.

CSS & JavaScript libraries
There are a couple of different ways that you can add CSS and JavaScript to your theme, and we’ll walk through them while discussing the pros and cons of each. We’ll also look at how to use CSS preprocessors like Sass, and task runners like Grunt in conjunction with Drupal themes. Opening up the possibility to use a variety of existing front-end frameworks and libraries as part of your custom theme.

Overriding default markup
In this section we’ll examine Drupal’s use of Twig template files to generate HTML markup, and walk through the process of overriding that markup in our custom theme. We’ll look at how Drupal determines which template file to use, dynamic template file naming, and how to manipulate the HTML output in a template file.

Day #2:

Twig
Having a firm grasp of the Twig template language is essential. So we’ll spend some time going over the language’s syntax, look at how to print output, and use filters and functions to manipulate variables. Then we’ll walk through a couple of exercises that require using Twig to modify elements in our theme.

Preprocessing and more
In this section we’ll talk about using {theme-name}.theme files to add, and manipulate the variables available in a Twig template, and to conditionally add CSS and JavaScript libraries on only the pages where they are needed in order to increase page speed.

Recap / Q&A
Spend some time reviewing the material that was covered throughout the day and make sure there is plenty of time for questions about anything covered or what to work on next.