A presentation at DrupalCon Seattle in in Seattle, WA, USA by Brian Perry
AN EXTERNAL DESIGN SYSTEM IN PRACTICE Brian Perry April 10, 2019 DrupalCon Seattle Slides: http://bit.ly/externalds-seattle
BRIAN PERRY • Lead Front End Dev at Bounteous • Rocking the Chicago ‘burbs • Lover of all things components… …and Nintendo d.o: brianperry twitter: bricomedy github: backlineint nintendo: wabrian brianperryinteractive.com 2
3
A REBRANDING STORY or: How I Fell Into Using an External Design System
REBRANDING • Brand launch targeted for November 5, 2018 • Website is only one part in a larger coordinated effort Proprietary & Confidential 6
MIGRATION Nate Dev Proprietary & Confidential 7
MEANWHILE… Leon Brian XD FE Dev Proprietary & Confidential 8
PROTOTYPING Joleen Brian UX FE Dev Proprietary & Confidential 9
DRUPAL INTEGRATION or: Deciding Where To Put The Mustard
VS Past projects: Pattern Lab embedded in theme Current state: Independent Projects • Easier for Drupal to access components • Drupal Repository • Simplified build process • Design System Repository • Easier for developers to understand Promotes use beyond a single Drupal project. • Prone to Drupalisms leaking into components Where should we put the mustard? 11
LET’S KEEP THE MUSTARD SEPARATE • Keeps components Drupal agnostic • Continues to encourage prototyping • Already has been living as a separate project • Some gut feelings: • Conceptually feels like the right thing • Advocated by many in the community who I trust • May be able to re-use on other web projects related to our brand. • Feels right for a company with diverse skills Proprietary & Confidential 12
FEELS RIGHT FOR BOUNTEOUS Proprietary & Confidential 13
REQUIRING THE DESIGN SYSTEM composer.json – in design system Proprietary & Confidential 14
REQUIRING THE DESIGN SYSTEM composer.json – in Drupal project Add Design system repository Proprietary & Confidential 15
REQUIRING THE DESIGN SYSTEM composer.json – in Drupal project Define how to handle design-system installer types Proprietary & Confidential 16
REQUIRING THE DESIGN SYSTEM composer require hs2studio/hs2solutionsdesignsystem • Required dev for pre-launch cycle Updating composer update hs2studio/hs2solutionsdesignsystem • Releases are tagged in design system • Can require design system at a specific release Proprietary & Confidential 17
INCORPORATING INTO THEME hsnew.libraries.yml Global library with compiled assets Proprietary & Confidential 18
INCORPORATING INTO THEME hsnew.info.yml Twig namespaces for ‘atomic’ component categories Proprietary & Confidential 19
COMPONENT WORKFLOW Sean Wade Design System Drupal Design System Components Drupal Component Integration • Created the bulk of design system • Wired design system components to components, primarily outside of Drupal. • Only 2 commits in Drupal repo Proprietary & Confidential Drupal content and layouts. • Majority of effort in Drupal repository • Minor design system refactoring when necessary 20
WE’RE GOING TO NEED MORE MUSTARD or: How an External Design System Helped Us Handle Changes in Scope
LUNAMETRICS TRAINING SITE SCOPE Training registration rebuild descoped • Existing WordPress site lives on at training.bounteous.com subdomain. • Needs to match look and feel of D8 site This design system thing seems pretty handy now. Proprietary & Confidential 22
WORDPRESS INTEGRATION Worked with Wahila Creative to re-theme the site. • Introduced us to Timber plugin which makes it possible to use Twig in WordPress. • Initial prototype used Timber and design system. Proprietary & Confidential 23
TIMBER COMPONENT – TRAINING ITEMS Proprietary & Confidential 24
TIMBER COMPONENT – TRAINING ITEMS training-module.php Proprietary & Confidential 25
TIMBER COMPONENT – TRAINING ITEMS training-element.php Proprietary & Confidential 26
Proprietary & Confidential 27
DEMAC MEDIA Demac Media joins the family… very close to launch. • Rebranded as bounteous.ca • Smaller scale site, will differ from bounteous.com look and feel. • More manual / selective use of design system assets. Proprietary & Confidential 28
POST LAUNCH
ONBOARDING Lessons Learned • Documentation is important • Kyle Developer Steve Developer Not just how, but why. • Must have an efficient workflow for design system experimentation in CMS. • Post launch, team members rotate. • External approach can add overhead. • Majority of tickets are Drupal specific fixes. Faced with the design system they may wonder: Why can’t I just Drupal? Proprietary & Confidential 30
LINES BETWEEN CMSES BLUR People will expect front-end changes to apply everywhere. Kristen Jon QA ‘Marketing’ Proprietary & Confidential 31
TO EXTERNAL OR NOT EXTERNAL or: Where should YOU put the mustard?
YOUR NEEDS MAY BE DIFFERENT Proprietary & Confidential 33
THINGS TO CONSIDER • Would there be value in re-using these components? • Sometimes hard to know for sure. • What role do prototypes play in project? • Is prototyping in code important? • Will design system be published independently? • How will this align with your team’s workflow? • How compatible is this with your team’s makeup? • Will it allow more people to contribute? Proprietary & Confidential 34
FEELS RIGHT FOR BOUNTEOUS Proprietary & Confidential 35
WHAT ABOUT DECOUPLED SITES? Proprietary & Confidential 36
Thank You! Brian Perry Lead Front End Developer Email: brian.perry@bounteous.com
When developing a pattern library or design system that will be used in support of a Drupal project, a key decision must be made regarding where the design system should live. Conceptually, many agree that it should be an external dependency of a Drupal theme in order to promote reuse, but a large number of projects still embed the design system inside of the theme in order to simplify workflow and component integration.
While in the past I’ve occasionally found it difficult to justify developing a design system independently from Drupal, on a recent rebranding project I made the case to configure a workflow using this approach. At the start, our plan was to migrate 3 sites into Drupal 8. By the end of the project we ended up with a partial migration to Drupal 8, with two supporting sites still in WordPress - all under the same brand and using the exact same components. In the middle it became apparent that choosing to use an external design system up front allowed us to make decisions that would have otherwise been impossible, and had a major impact on our ability to still hit our planned launch date as the project evolved.
In reviewing this rebranding effort, we’ll take a closer look at our approach to a shared design system including:
By the end of this session you will have a better understanding of when using an external design system could benefit your project, along with a clearer understanding of how this approach could be implemented.
The following resources were mentioned during the presentation or are useful additional information.
I’d love it it you could fill out the feedback form on the session page.
The new Bounteous site (Drupal 8)
The training section of the Bounteous site (WordPress)
Allows you to use Twig in WordPress
An example of a build that might not benefit from an external design system. This blog post outlines their rationale to move to a more traditional Drupal architecture.
Lullabot Podcast with more detail on the decisions that influenced Lullabot’s approach to a rebuild.
Here’s what was said about this presentation on social media.
for free. You
can too.