Design systems are a powerful tool in any company’s arsenal. They provide consistency, support brand recognition, and streamline the design process itself. There are many benefits, but implementing a system across a large product portfolio can be cumbersome for the most nimble of teams. Come and learn how one of Red Hat’s Front End teams has built a multi-use toolkit for implementing design systems within Drupal, including PatternFly, Red Hat’s open-source design system based on Bootstrap. See how products from OpenShift, to interactive Drupal partner toolkits, and even RedHat.com’s Drupal marketing site all utilize parts of the same-style implementations - ensuring each adheres to Red Hat’s corporate branding and design standard. You will leave the room with a clear understanding of massive-scale design systems implementation and a Drupal-compatible toolkit to take your design systems to the next level. Topics covered: Design Systems, Philosophy, and Frameworks Atomic Design PatternFly KSS-Node SASS + Twig / Nunjucks + JSON Schema Pattern stack PatternLab UI Patterns Drupal Module PatternKit Drupal Module

1. IMPLEMENTING AN
ENTERPRISE DESIGN
SYSTEM THE RED HAT WAY

2. Derek "tachyon" Reese is a developer at Red Hat.
blurb: Derek Reese is a self-directed full-stack developer experienced with enterprise
software and pipeline development and has been working with Drupal since Drupal 5.
Derek has experience speaking at both Drupal Camps and to private audiences.
He’s helped present everything from new technology pipelines to film pitches.

3. PREREQUISITES
BUILDING DRUPAL SITES WITH COMPONENTS
or
WEBPACK, ES6, PATTERN LAB, AND DRUPAL 8...
Christopher Bloom Saturday 10:15AM WILLAMETTE FALLS BALLROOM
THEMING DRUPAL 8 WITH TWIG...
Clint Robinson Saturday 4:15PM WILLAMETTE FALLS BALLROOM
https://www.slideshare.net/DerekReese1/building-drupal-sites-with-components
https://www.youtube.com/watch?v=SJVGNpOovJw

4. IMPLEMENTING AN
ENTERPRISE DESIGN
SYSTEM THE RED HAT WAY
A DRUPAL STORY

5. DESIGN SYSTEMS
The Red Hat Way
Digital Design Philosophy Design Systems
Implementation
Drupal Integration

6. DIGITAL DESIGN
PHILOSOPHY

7. DIGITAL DESIGN
PHILOSOPHY

8. BRANDING
MARKETING
UX

9. BRANDING

10. IN ORDER TO TALK
ABOUT DESIGN SYSTEMS,
WE NEED TO TALK
ABOUT...

11. DESIGN LANGUAGES
vs
DESIGN SYSTEMS

12. DESIGN (VISUAL)
LANGUAGES
Communication
Graphical

13. EXAMPLES
(past, present, & future)

14. DESIGN (VISUAL)
LANGUAGES
Skeuomorphic Design
Infographic by Edward Korcheq, via
http://glasscanopy.com/flat-design-vs-skeuomorphism-pros-cons/

15. DESIGN (VISUAL)
LANGUAGES
Skeuomorphic Design
Flat Design
via
and
drupal.com
https://www.tillamook.com/our-story/our-story.html

16. DESIGN (VISUAL)
LANGUAGES
Skeuomorphic Design
Flat Design
Material Design

17. DESIGN (VISUAL)
LANGUAGES
Skeuomorphic Design
Flat Design
Material Design
Vertical Design
via http://highline.huffingtonpost.com/articles/en/poor-millennials/

18. DESIGN (VISUAL)
LANGUAGES
Skeuomorphic Design
Flat Design
Material Design
Vertical Design
...and more! (US Web, AirBnB, Microsoft, etc.)
(you can google any of these for tons of examples)

19. DESIGN (ORGANIZATIONAL)
SYSTEMS
Work with other developers
Structural

20. EXAMPLES
(past, present, & future)

21. DESIGN (ORGANIZATIONAL)
SYSTEMS
Monolithic Design
Modular Design
Atomic Design
/ Style Tiles
via http://atomicdesign.bradfrost.com/chapter-2/

22. DIGITAL DESIGN PHILOSOPHY
all together now
Branding, Marketing, & UX Design Languages Design Systems

23. DESIGN DELIVERABLES
Mood Boards
Design Specification PDF
Initial CSS / HTML Mockups

24. ...BUT HOW DO WE GET
FROM OUR
DESIGN DELIVERABLES
TO A
WORKING
IMPLEMENTATION
ACROSS MULTIPLE
ENTERPRISE-SCALE
WEB PROPERTIES?

25. DESIGN SYSTEMS
IMPLEMENTATION

26. THE IMPLEMENTATION LIST
Rulesets
Design Spec Docs
Style Guides
Design Guides / Full Implementations
Pattern Libraries
Frameworks

27. RED HAT'S
DESIGN SYSTEM
FRAMEWORKS

28. WEBRH
Style Ruleset & Implementation
​SASS / CSS
Twig Patterns, JSON Schema, YAML Docs
Complicated
Editors & builders
Tightly coupled
Multiple properties @ Red Hat

29. WEBRH

30. WEBRH

31. PATTERNFLY
Style Ruleset & Guide
SASS / CSS
Documentation
Bootstrap
Scalable
Skinnable: RCUE
Openshift

32. PATTERNFLY

33. MY TEAM (CONNECT)'S
FRAMEWORK
Style Ruleset, Implementation
SASS / CSS
Twig Patterns, JSON Schema, YAML Docs
WebRH & PatternFly
Dev-centric

34. MY TEAM (CONNECT)'S
FRAMEWORK

35. IMPLEMENTATION PT. 2
Adoption, Education, Tooling

36. ADOPTION
Selling it to the business
​Cost Studies & Comparisons
Selling it to developers
​Scrum of Scrums
Learn from other teams

37. DOCUMENTATION
Include w/ Style Guides
Not just local: Hosted
Knowledge Shares

38. TOOLING
Current Status:
PatternKit REST Server + Composer + Grunt + Bower
/ Pattern Builder Importer module or PatternKit modules
KSS + Composer + Gulp / Custom Twig Presenters
PatternFly Custom App + Custom Implementation
Testing out WebComponents Lib
WIP:
​PatternLab + Composer + Gulp & PatternKit
Twig Patterns w/
Web Component Compatibility
Unify Dev Tools, Train & Maintain

39. DRUPAL
INTEGRATIONS

40. {%
include '@mypatternlibrary/atoms/image/image.twig' with {
'src': item.image.src,
'alt': item.image.alt,
'attributes': item.image['#attributes'],
'sources': item.image['#sources'],
} only
%}
TWIG PRESENTERS (MVP-STYLE)

41. UI PATTERNS (DRUPAL 8)
Multiple Integrations
Views
1:1 Mapping
Works with PatternLab
https://www.drupal.org/project/ui_patterns

42. UI PATTERNS (DRUPAL 8)

43. PATTERNKIT (DRUPAL 7)
Panels
Data Mapping
TFD7-beta3 + namespaces patch

45. DEMO

46. CAVEATS
TFD7 issues - patches needed
beta3,
Zurb Foundation node-sass issues
Base theme is outdated, needs updating
Drupal theme builds are still complicated
not everything is "npm run build"
... or "./configure; make"

47. THE FUTURE

48. TWIG / NUNJUCKS
COMPONENTS
PHPTEMPLATE PATTERNLAB WEB
COMPONENTS
PATTERNKIT
Server-side rendering
Client & Server-side rendering

49. IMPLEMENTING
A DESIGN SYSTEM
YOUR ACTION CHECKLIST
BRANDING/MARKETING/UX + DESIGN LANGUAGE + DESIGN SYSTEM
Start with the Visual Language of your Design
STYLEGUIDE + LIBRARY + FRAMEWORKS
Choose the option that best fits your timeline, system, and deliverables
DRUPAL INTEGRATION
Invest in a pattern-based system & the Twig/Nunjucks + JSON Schema + YAML Stack

50. GET INVOLVED
START HERE
PatternLab
https://github.com/drupal-pattern-lab/roadmap/issues/8
https://github.com/pattern-lab/patternlab-php-core/issues/116

51. RESOURCES
PatternFly
PatternKit
UI Patterns
PatternLab
https://patternfly.org
https://www.drupal.org/project/patternkit
https://www.drupal.org/project/ui_patterns
https://patternlab.io/
Twig for Drupal (7)
TFD7 Namespace Patch
ThemeKey
Nunjucks
https://www.drupal.org/project/tfd7
https://www.drupal.org/project/tfd7/issues/
2904991
https://www.drupal.org/project/themekey
https://mozilla.github.io/nunjucks/

52. COMMAND REFERENCE
Start a local docker
Create a new Drupal install
Install UI Patterns Drupal Module
Install PatternKit Drupal Module
npm install -g generator-docker4drupal
yo docker4drupal
composer create-project drupal-composer/drupal-project:8.x-dev
some-dir --stability dev --no-interaction
composer require drupal/ui_patterns
rush en -y patternkitd

53. SPECIAL THANKS
JOHN ALBIN
ERIK BALDWIN
ROB COFFMAN
BRENT DUNN
MICAH GODBOLT
ZACK HAWKINS
MIKE NIELSON
CASS ROBERTS
JASON SMITH
KENDALL TOTTEN
and everyone else who has contributed from
Red Hat.com, Connect, Customer Portal and
other teams
as well as the Drupal community

54. Q&A
THANKS!