SOLD OUT - Theming Drupal 8

Conference: 

We're sorry, but this workshop is currently sold out. You can sign up to access the tutorials on our webiste, or join our maililng list to be notified of other oportunities to attend this workshop at local camps/conferences throughout the year. Feel free to contact us if you have any questions.


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.

This workshop will familiarize front-end developers with Drupal 8's theme system through a combination of presentations and hands-on exercises. 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

Attendees should be familiar with HTML and CSS and understand how to administer content on a Drupal website. This workshop will be relevant for both people who are new to Drupal theming as well as those looking to move from Drupal 7 to Drupal 8.

This course is based on the Drupalize.Me Drupal 8 Theming Guide. Attendees will receive one month of full access to the complete Drupalize.Me tutorial library so that they can review and continue to learn after the workshop is over.

Trainer(s): 
eojthebrave
Amber Himes Matz
blakehall
Experience level: 
Beginner
Status: 
Accepted
Training Company: 
Drupalize.Me
Learning Objectives: 

Students will be able to:

  • Explain how the Drupal theme layer relates to the rest of the application
  • Understand the terminology, workflow, and processes related to creating custom themes
  • Override any of Drupal's HTML output
  • Explain the relationship between base themes, and sub-themes and identify them when in use
  • Use the Twig template language to manipulate and output dynamic content within Drupal templates
  • Add both custom and third-party CSS and JavaScript libraries
  • Use breakpoints in conjunction with Drupal’s image styles to handle responsive images
  • Use a variety of tools for introspecting and debugging a theme
  • Understand how to get started using common front-end development tools like CSS preprocessors, and task runners, in conjunction with Drupal theme development
Syllabus/Agenda: 

The general plan for the workshop is as follows. With details about each section below.

  • Intro - 15 min
  • Theming overview
    • Presentation - 30 minutes
  • Getting started with a new theme
    • Presentation - 10 minutes
    • Exercise - 30 minutes
  • Overriding default markup
    • Presentation - 15 min
    • Exercise - 25 min
  • Twig
    • Presentation - 15 min
    • Exercise - 25 min
  • CSS & JS Libraries
    • Presentation - 15 min
    • Exercise - 25 min
  • Breakpoints & Responsive images
    • Presentation - 15 min
    • Exercise - 25 min
  • Preprocessing
    • Presentation - 15 min
  • Recap / Q&A - 20-30 min

 

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.

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.

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.

Breakpoints and Responsive Images: In this section, we’ll review the concepts of breakpoints and responsive images in web design. We’ll convert our CSS media queries to YAML for Drupal’s Breakpoints and Responsive Image modules. Then use the Responsive Image module to create image styles for each of our theme’s breakpoints that you’ll then be able to utilize in your site’s views and image field settings.

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.

Who Will Gain the Most From This Training?: 

Students who are already proficient with HTML and CSS will learn how to apply those skills to Drupal. Especially those who have worked with Drupal as content editors or site admins already and are looking to learn how to further customize the look and feel of their site beyond what’s possible via the user interface.

 

This workshop will be useful for both people who are new to Drupal theming as well as those looking to move from Drupal 7 to Drupal 8. It provides a solid foundation in Drupal 8 theming fundamentals aimed at ensuring students have the knowledge they need to be able to get started developing custom Drupal themes while continuing to learn.

Prerequisites for this Course: 

Attendees should be familiar with HTML and CSS and prepared to make edits to both on their own. Attendees should understand how to administer content on a Drupal website, including adding/editing nodes, installing modules, changing system settings, and managing users. You don’t need to be an expert in any of these things, but we will be using them in class with the assumption that you’re comfortable with them.

 

Attendees who wish to follow along with exercises will need to have a working copy of Drupal 8 on their laptop on which they have permission to edit files, and administrator access to the site. We will not be covering setting up a local environment during the class, however Drupalize.Me has related resources and we can provide instructions on how to do so ahead of time for anyone that needs them.

Drupal Version: 
Drupal 8.x
Dev Environments: 
Works for any environment, assumes the user has permission to edit files on the environment.
Training Type: 
Beginner