A First Run with Component Theming: Missteps, Learnings, and Success

By wheatpenny

"The world needs more people who are two days into learning something writing about the problems of people who are one day in." --Patrick McKenzie (https://twitter.com/patio11/status/803825771349426176)

Drupal 8 gives us the opportunity to explore new front end development patterns that were prohibitively difficult in Drupal 7. I used my own site rebuild to explore component theming in Drupal 8. In this talk, I'll explore what diving down this rabbit hole was like for someone new to this workflow.

We'll start with explaining why component design tools are so important to building responsive sites. I'll explain the concept of component theming and why it's useful. From there, we'll take a look at two specific examples from my site rebuild, one using Views and one using Paragraphs. I'll point out my missteps, what I did to fix them, and why I'm excited about component theming in Drupal 8. We'll end with a list of resources for you to explore component theming as well as how to get involved with the community.

We'll work to answer the following questions:

What is a component? (A self-contained grouping of HTML, CSS, and JS that looks and behaves the same no matter its location on the page.)
Isn't component theming hard in Drupal? (Well, kinda, but it's worth it. Isn't anything hard the first time you do it?)
Won't I need to be an expert in a bunch of new technologies before I can even get started? (Surprisingly, no.)
Aren't Photoshop mockups good enough to define a design? (No, they can't account for the multiple variables of responsive design.)
I haven't yet explored Twig, Pattern Lab, SASS...I'm definitely not qualified to even try, right? (You are actually in a great spot!)

Slides: https://wheatpenny.github.io/D8-component-theming/

Audience Level:
Beginner (just starting, know basic terminology, content creation)
Intermediate (install and configure modules/themes)
Advanced (sysadmin, module developer)

Track:
Front End & Design

Version:
Drupal 8

Prerequisites:
Experience with writing a theme in Drupal 7 is helpful, but not necessary.

https://www.drupalcampnj.org/program/sessions/first-run-component-theming-missteps-learnings-and-success

Drupal is a registered trademark of Dries Buytaert.