A presentation at Twin Cities Drupal Camp in in Minneapolis, MN, USA by Brian Perry
EXTERNAL DESIGN SYSTEMS IN PRACTICE Brian Perry June 7, 2019 Twin Cities Drupal Camp Slides: http://bit.ly/externalds-tcd
BRIAN PERRY • Lead Front End Dev at Bounteous • Rocking the Chicago ‘burbs • Lover of all things components… …and Nintendo • Increasingly JAMStack Curious 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. • Need to be strict about versioning. • Majority of tickets are Drupal specific • External approach can add overhead. 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
DECOUPLED DESIGN SYSTEMS Sharing between multiple templating engines
A PROGRESSIVELY DECOUPLED PROJECT Drupal • ‘Traditional’ Drupal Build • Provides APIs to React Dreact (DR8act?) • Traditional Drupal Content React • Consumes Drupal APIs • Authenticated User Portal and • Routes owned by React for User Portal Proprietary & Confidential 33
DX – MULTIPLE DEVELOPER CONTEXTS Drupal • Drupal implementation without React dependency. Proprietary & Confidential Combined • Test real world integration React • Develop and test without local Drupal environment. • Hot Module Replacement 34
TEMPLATING AND STYLES Drupal • Twig • Unique styles and components Combined • Global styles that apply to both. • Few (if any) shared React • JSX • Unique styles and components components Proprietary & Confidential 35
COULD A DESIGN SYSTEM SERVE BOTH PROJECTS? Drupal Design System React ??? • Twig • Unique styles and components Proprietary & Confidential • JSX • Global styles that apply to both. • Unique styles and components 36
CSS IN JS IS ALL THE RAGE* * occasional emphasis on RAGE Proprietary & Confidential 37
CSS MODULES • Not a package • Handled by a build process (typically Webpack) • Scopes styles locally by default • Can play nice with Sass • Has a super snarky logo Proprietary & Confidential 38
SCOPED CSS – PROJECT CARD Proprietary & Confidential 39
Proprietary & Confidential 40
Proprietary & Confidential 41
SCOPED CLASS NAMES Proprietary & Confidential 42
GLOBAL CSS Proprietary & Confidential 43
DESIGN SYSTEM INFORMS BOTH PROJECTS Drupal • Global CSS file combines design system partials and Drupal specific partials Proprietary & Confidential Design System • Gatsby site to demonstrate global styles • Projects consume partials as needed React • Imported in JS • Mix of global and component scope • Also project specific CSS 44
CONSUMING THE DESIGN SYSTEM • Use ~ for non-relative imports Proprietary & Confidential 45
WHAT WE AREN’T DOING (YET) • Sharing Components • Limited overlap thus far • Probably requires more js – React or Web Components. • Hot Module Replacement in Drupal Proprietary & Confidential 46
LESSONS LEARNED • Different Webpack build quirks can be a pain. • Versioning continues to be important • Additional automation could help here. • Most likely wouldn’t use Style Guide Guide project again • Gatsby Docz plugin as an alternative • Styling scope is an issue – style guide styles can leak into components Proprietary & Confidential 47
TO EXTERNAL OR NOT EXTERNAL or: Where should YOU put the mustard?
YOUR NEEDS MAY BE DIFFERENT Proprietary & Confidential 49
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? • Is locking down design system desirable? Proprietary & Confidential 50
FEELS RIGHT FOR BOUNTEOUS Proprietary & Confidential 51
Proprietary & Confidential 52 48
Proprietary & Confidential 53 48
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:
We’ll also explore approaches to using a shared design system on decoupled Drupal projects, 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 Official CSS Modules Documentation
A CSS modules series on CSS Tricks
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.
for free. You
can too.