| OSTraining News
New Class: Drupal 8 Layout and Theming

We're happy to add a large and highly-requested new class to the OSTraining library today, Drupal 8 Layout and Theming.

This class is a hands-on introduction to designing your Drupal 8 site. You'll learn how to customize your Drupal site with CSS, HTML, Javascript, custom fonts and more.

To take this class, you should already have good Drupal 8 site building skills, plus a knowledge of CSS, HTML and some PHP.

  • In the first part of the class, you'll learn how Drupal 8's theming system works. You'll see how PHP, HTML, CSS, Javascript and Twig combine to allow you to design your site.
  • In the second part of the class, you'll build your first custom theme. You'll create all the architecture needed for a theme, from the files and folders to the external scripts and mobile breakpoints.
  • In the third part of the class, you'll get a deeper understanding of all the elements found in a typical theme folder and how to customize them.
  • In the fourth part of the class, you'll take an existing design and turn it into a complete Drupal theme!

Outline of the Drupal 8 Theming Class

Getting Started

  • Introduction to Drupal 8 Theming
  • What You'll Need for This Class
  • Setting up Your Environment

Introduction to Themes

  • How Does Drupal Theming Work?
  • Who are Drupal Themers?
  • Finding and Evaluating Contributed Themes
  • Installing Themes
  • Static, Configurable and Responsive Themes

Build Your First Theme

  • Building a Custom Theme
  • Add a Screenshot and Logo
  • Clear the Theme Cache
  • Add Regions to a Drupal Theme
  • Add Libraries to a Drupal Theme
  • Add CSS to a Drupal Theme
  • Add External Scripts to a Drupal Theme
  • Add Google Fonts to a Drupal Theme
  • Advanced YML File Options
  • Mobile Breakpoints
  • Mobile Breakpoints Exercise
  • Drupal 8 Theming Quiz 1

Customizing Your Theme

  • Introduction to Theme Customization
  • Anatomy of a Drupal Theme
  • Drupal Coding Standards
  • Introduction to Twig Template Files
  • Template Overrides in Drupal
  • Installing the Devel Module
  • A Drupal Template Override Demo
  • Creating a Node Template Override
  • Creating a Maintenance Page Template Override
  • Add Custom Regions
  • Overriding Drupal Breacrumbs
  • Using Devel Kint
  • Drupal 8 Theming Quiz 2

Base Themes and Subthemes

  • Introduction to Base Themes and Subtheming
  • Best Practices for Subthemes
  • Create a Bartik Subtheme

Setting Up The Theme

  • How to Match an Existing Design
  • Creating the Custom Theme
  • Adding Block Regions

Site Building

  • Site Building for Our Theme
  • Create a Services Content Type
  • Create a Banner Content Type
  • Adding Content, Part 1
  • Adding Content, Part 2

Views

  • Creating Custom Blocks
  • The Services View
  • The Blog View
  • The Frontpage Banner View

Template Overrides

  • Create Template Overrides
  • Overrides for Frontpage Content
  • Adding CSS and Images

Final

  • How Would You Do That in Drupal?
  • Drupal 8 Theming Quiz 3

About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.