This workshop will familiarize front-end developers with Drupal'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
- 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
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
Target audience:
- Individual developers who want to learn to customize existing themes, or create entirely new custom themes, for Drupal 9 and 10
- Teams of developers working together who have one or more themes that need to be upgraded for Drupal 9 and 10
- Anyone who needs a refresher on how Drupal themes work, or whose only experience so far is theming Drupal 7 sites
Assumptions:
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 10.
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.
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.
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.