This workshop will familiarize front-end developers with Drupal 8's and Drupal 9’s theme system through a combination of presentations, hands-on exercises, and group activities. Whether your goal is to theme your personal site, pass the Acquia front-end developer certification, or upgrade your skills for a job, our goal is to provide students with a solid foundation and enough knowledge to continue to practice and learn on their own.
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
- 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
In addition to the real-time instructor-led workshop, attendees will also receive:
- Example code with extensive documentation suitable for use as reference material for future projects
- A PDF workbook with exercises, and solutions
- Access to pre-recorded explanations of the solutions for all exercises
- 1 month of free access to the entire Drupalize.Me tutorial catalog
- Individual developers who want to learn to customize existing themes, or create entirely new custom themes, for Drupal 8 and 9
- Teams of developers working together who have one or more themes that need to be upgraded for Drupal 8 and 9
- Anyone who needs a refresher on how Drupal themes work, or whose only experience so far is theming Drupal 7 sites
Attendees should be familiar with HTML and CSS and understand how to administer content on a Drupal website. This workshop will be relevant for people who are new to Drupal theming as well as those looking to move from Drupal 7 to Drupal 8 or Drupal 9.
Details about what we'll cover
The workshop will be broken down into sections, and each section will consist of a combination of live presentation, hands-on exercises, and group practice activities.
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.
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.
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