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>