Component Based Theming at DrupalCon Baltimore

Last year, DrupalCon New Orleans was an exciting time for component-based theming in the Drupal community. A number of approaches were outlined demonstrating how Drupal 8 and Pattern Libraries, like Pattern Lab, could be configured to share the exact same markup and styles, providing a single source of truth throughout the design and development process. The core concepts discussed in Birds of a Feather and breakout sessions have colored much of my Drupal 8 theming work for the past year and, as a result, I was very excited to see how the conversation would continue this year at DrupalCon Baltimore.

Heading into Baltimore, I’d had success with this component-based theming approach, but also faced some new challenges that I focused on in my recent talk at MidCamp.  I’ve also been following along closely with the development of the UI Patterns module, which I think is on track to fill an important gap in the component theming process in Drupal. Finally, I had some great conversations at MidCamp about the various component theming approaches in Drupal 8, with a focus on why these approaches vary so much and often don’t take sufficient advantage of what is now offered in Drupal Core.

All of this colored the sessions and conversations I gravitated toward in Baltimore.

Tuesday Theme: The Future of Layouts

My early Tuesday was dominated by talk of the new experimental layout related modules in Drupal 8.3. The Driesnote dedicated some important real estate to showing these features in action. I then immediately followed that up with The Continuing Saga of Layouts in Drupal 8.  This session provided a helpful overview of past and present layout related modules in Drupal, and also gave some useful context on how the Layout Discovery and Field Layout came to be in 8.3.  And it also discussed an exciting long-term plan where aspects of the Panels and Panelizer modules would be incorporated into Drupal Core as part of the layout initiative.

While the future of layout looks bright, I also had a number of conversations at and around the conference about some challenges in the present. The upgrade to 8.3 has been painful for many who depend on layouts. The big takeaway is that it is taking time for many (me included) to adapt to Drupal’s new release cycle and understand the true impact of having experimental modules in Drupal Core. I wasn’t able to attend in person, but the session We Have Experimental Modules, Now What? did a great job addressing these issues.

Wednesday Theme: Component Theming Workflows

Wednesday morning, I grabbed a prime seat in the overflow section for Jim Birch’s Bootstrap Paragraphs session. It was great seeing Jim speak at DrupalCon, as back home he’s often volunteering his time organizing Meetups and Camps and giving others an opportunity to present. His talk validated some of the approaches related to using components with Paragraphs that we’ve been using on projects, and also helped inspire some ideas related to a contributed theme I’ve been working on.

Later in the day, I facilitated a Birds of a Feather session on Component-Based Theming Workflows. Having the opportunity to lead an open discussion on a topic I’m passionate about with a variety of members of the Drupal community is always a highlight of my DrupalCon experience, and this was no exception.  

Collectively, we created a living document outlining everyone’s approaches, questions, and challenges.  In general, I was extremely impressed with what everyone was doing and how far we’ve developed as a community since last year. The biggest takeaway for me was the strong consensus that your style guide and/or component library should exist outside of Drupal and be an external dependency of your theme, ideally managed via Composer.  I’ve always agreed with this conceptually, but would have expected more people to take the Drupal-centric shortcut of having their component library live in their theme.

Finally, I wrapped the day up with Pinterest’s Component-Based Design: Breaking Down Silos, Saving Time, and Empowering Content Editors.  It was a great overview of the process, and provided some interesting insight on how the Drupal edition of Pattern Lab came to be.  We’ve also been following a very similar process here at HS2, so it was nice to have still more validation of our approach.

Thursday Theme: What Did I Miss?

For a variety of reasons, I wasn’t able to follow along as closely with the component-based theming world on Thursday. But I did spend some time flagging a few sessions and posts that I wanted to follow-up on after Baltimore:

• The Right Tool for the Job: Content Layout in Drupal 8: This session overflowed so much that they had to close the doors and turn a bunch of people away. It provided a great overview of all of the content layout options for those who might be new to what is available in Drupal 8.
• Making Mass.gov Data-Driven and Constituent-Centric: Coming out of Wednesday’s Component-Based Theming Workflows discussion, I wanted to take a closer look at mass.gov’s Mayflower design system and OpenMass codebase.
• Fractal Iterations: I also learned on Wednesday that the Fractal pattern library was planning some major revisions in a v2 release. The problems they are trying to solve with this release address a number of pain points I’ve experienced with multiple audiences consuming a component library and I’m looking forward to evaluating this release of Fractal as it evolves.

Friday Theme: Sprints!

The code sprints always serve as a great opportunity to get hands on with all of the exciting concepts that filled your brain earlier in the conference. This year, I worked on an initial development release of the Foundation Patterns theme. Foundation Patterns serve as an easy way to use the Foundation Framework’s new Building Block Kits and as a working example of how to take advantage of patterns defined by the UI Patterns module in a Drupal theme. Inspired by the work related to Layouts and Bootstrap Paragraphs, I also created an initial Foundation Patterns Configuration module. Foundations Patterns Configuration aims to provide pre-packaged configuration and Paragraphs bundles in order to to jumpstart the use of the Foundation Patterns theme.

Both of these projects are very, very early, but I encourage you to follow along and try them out.  Any feedback is greatly appreciated.

Beyond

There is still a lot to unpack (thankfully not my luggage) and follow up on after DrupalCon, but there has already been some great follow-up activity in the #pattern-lab channel in the Drupaltwig Slack and a related Github organization and Github Pages site. I can’t wait to find out what we’ll be talking about next year in Nashville, beyond all of the great places to hear live music, of course!