Resources

Fully functional D8 theme

• A fully functional Drupal 8 theme which includes all code in this training can be downloaded from github.

• Google drive resources

Drupal

• Drupal Composer Project Templates

• Drupal 8 Theming

• Drupal 8 Theming Guide

• Adding CSS and JavaScript to a Drupal 8 theme

• Drupal Behaviors

• Drupal Attributes

• Twig Field Value module

• Twig Tweak module

• Ensuring Drupal 8 Block Cache Tags bubble up to the Page

• Render API

• Setting Up Twig Debugging

• Limit Kint levels

• Cropping images in Drupal

• Managing images in large scale websites (screencast)

Layout Builder

• Advanced Techniques with Layout Builder

Twig

• Twig documentation
• Twig for Template Designers
• Twig blocks
• When to use Include, embed or extends
• Twig in Drupal
• Limit Kint levels when debugging
• Twig for Drupal 8/9 Development (Part 1 & 2)
• Upgrade Pattern Lab to Twig 2.0

JavaScript

• JavaScript30 (Video course by Wes Bos)

Blog Posts/Tutorials

• Responsive Images
• BEM 101
• Building and integrating drupal menus
• A walkthrough of the Theme Generator

Screencasts/Video Tutorials

• A Walkthrough of Mediacurrent's Theme Generator

Tools and Utilities

• Mediacurrent Theme Generator
• Pattern Lab
• Free stock image from Unsplash.com
• SMACSS
• Aspect ratio calculator
• Font sizing with REM
• Command line tutorial
• Inclusive Components

Snippets

Create hook alter for user template suggestons

/**
 * Implements hook_theme_suggestions_user_alter().
 *
 *   An array of alternate, more specific names for template files or theme
 *   functions for users.
 */
function training_theme_theme_suggestions_user_alter(&$suggestions, $vars, $hook) {
  // Define the view mode.
  $mode = $vars['elements']['#view_mode'];
  // Create a theme hook suggestion which has the view mode name in it.
  $suggestions[] = 'user__' . $mode;
}

Fixing 403 Forbidden error in Pattern Lab

• Create an .htaccess file in the root of your theme with the following code: (Some have reported the file should be inside the patternlab directory. Try the theme's room first and recompile your theme).

  <FilesMatch "\.(twig)$">
  <IfModule mod_authz_core.c>
    Require all granted
  </IfModule>
  <IfModule !mod_authz_core.c>
    Order allow,deny
    Allow from all
  </IfModule>
  </FilesMatch>