implementing an enterprise design system the red hat … · derek "tachyon" reese is a...
TRANSCRIPT
![Page 1: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/1.jpg)
IMPLEMENTING ANENTERPRISE DESIGNSYSTEM THE RED HAT WAY
![Page 2: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/2.jpg)
Derek "tachyon" Reese is a developer at Red Hat.
blurb: Derek Reese is a self-directed full-stack developer experienced with enterprisesoftware 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.
![Page 3: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/3.jpg)
PREREQUISITES
BUILDING DRUPAL SITES WITH COMPONENTS
https://www.slideshare.net/DerekReese1/building-drupal-sites-with-componentshttps://www.youtube.com/watch?v=SJVGNpOovJw
![Page 4: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/4.jpg)
IMPLEMENTING ANENTERPRISE DESIGNSYSTEM THE RED HAT WAY
A DRUPAL STORY
![Page 5: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/5.jpg)
DESIGN SYSTEMSThe Red Hat Way
Digital Design Philosophy Design SystemsImplementation
Drupal Integration
![Page 6: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/6.jpg)
DIGITAL DESIGNPHILOSOPHY
![Page 7: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/7.jpg)
DIGITAL DESIGNPHILOSOPHY
![Page 8: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/8.jpg)
BRANDINGMARKETINGUX
![Page 9: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/9.jpg)
BRANDING
![Page 10: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/10.jpg)
IN ORDER TO TALKABOUT DESIGN SYSTEMS,
WE NEED TO TALKABOUT...
![Page 11: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/11.jpg)
DESIGN LANGUAGESvs
DESIGN SYSTEMS
![Page 12: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/12.jpg)
DESIGN (VISUAL)
LANGUAGES
Communication Graphical
![Page 13: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/13.jpg)
EXAMPLES
(past, present, & future)
![Page 14: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/14.jpg)
DESIGN (VISUAL)
LANGUAGESSkeuomorphic Design
Infographic by Edward Korcheq, viahttp://glasscanopy.com/flat-design-vs-skeuomorphism-pros-cons/
![Page 15: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/15.jpg)
DESIGN (VISUAL)
LANGUAGESSkeuomorphic DesignFlat Design
via
and
drupal.com
https://www.tillamook.com/our-story/our-story.html
![Page 16: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/16.jpg)
DESIGN (VISUAL)
LANGUAGESSkeuomorphic DesignFlat DesignMaterial Design
![Page 17: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/17.jpg)
DESIGN (VISUAL)
LANGUAGESSkeuomorphic DesignFlat DesignMaterial DesignVertical Design
via http://highline.huffingtonpost.com/articles/en/poor-millennials/
![Page 18: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/18.jpg)
DESIGN (VISUAL)
LANGUAGESSkeuomorphic DesignFlat DesignMaterial DesignVertical Design...and more! (US Web, AirBnB, Microsoft, etc.)
(you can google any of these for tons of examples)
![Page 19: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/19.jpg)
DESIGN (ORGANIZATIONAL)SYSTEMS
Work with other developers
Structural
![Page 20: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/20.jpg)
EXAMPLES
(past, present, & future)
![Page 21: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/21.jpg)
DESIGN (ORGANIZATIONAL)SYSTEMS
Monolithic DesignModular DesignAtomic Design / Style Tiles
via http://atomicdesign.bradfrost.com/chapter-2/
![Page 22: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/22.jpg)
DIGITAL DESIGN PHILOSOPHYall together now
Branding, Marketing, & UX Design Languages Design Systems
![Page 23: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/23.jpg)
DESIGN DELIVERABLES
Mood Boards
Design Specification PDF
Initial CSS / HTML Mockups
![Page 24: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/24.jpg)
...BUT HOW DO WE GETFROM OUR
DESIGN DELIVERABLESTO A
WORKINGIMPLEMENTATION
ACROSS MULTIPLEENTERPRISE-SCALEWEB PROPERTIES?
![Page 25: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/25.jpg)
DESIGN SYSTEMSIMPLEMENTATION
![Page 26: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/26.jpg)
THE IMPLEMENTATION LISTRulesets
Design Spec DocsStyle Guides
Design Guides / Full ImplementationsPattern LibrariesFrameworks
![Page 27: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/27.jpg)
RED HAT'SDESIGN SYSTEMFRAMEWORKS
![Page 28: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/28.jpg)
WEBRHStyle Ruleset & ImplementationSASS / CSSTwig Patterns, JSON Schema, YAML DocsComplicated
Editors & builders
Tightly coupled
Multiple properties @ Red Hat
![Page 29: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/29.jpg)
WEBRH
![Page 30: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/30.jpg)
WEBRH
![Page 31: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/31.jpg)
PATTERNFLYStyle Ruleset & Guide
SASS / CSSDocumentation
Bootstrap
Scalable
Skinnable: RCUE
Openshift
![Page 32: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/32.jpg)
PATTERNFLY
![Page 33: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/33.jpg)
MY TEAM (CONNECT)'SFRAMEWORK
Style Ruleset, ImplementationSASS / CSSTwig Patterns, JSON Schema, YAML Docs
WebRH & PatternFly
Dev-centric
![Page 34: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/34.jpg)
MY TEAM (CONNECT)'SFRAMEWORK
![Page 35: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/35.jpg)
IMPLEMENTATION PT. 2
Adoption, Education, Tooling
![Page 36: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/36.jpg)
ADOPTION
Selling it to the business
Cost Studies & Comparisons
Selling it to developers
Scrum of Scrums
Learn from other teams
![Page 37: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/37.jpg)
DOCUMENTATION
Include w/ Style Guides
Not just local: Hosted
Knowledge Shares
![Page 38: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/38.jpg)
TOOLING
Current Status:PatternKit REST Server + Composer + Grunt + Bower / Pattern Builder Importer module or PatternKit modulesKSS + Composer + Gulp / Custom Twig PresentersPatternFly Custom App + Custom ImplementationTesting out WebComponents Lib
WIP:PatternLab + Composer + Gulp & PatternKitTwig Patterns w/Web Component Compatibility
Unify Dev Tools, Train & Maintain
![Page 39: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/39.jpg)
DRUPALINTEGRATIONS
![Page 40: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/40.jpg)
{%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)
![Page 41: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/41.jpg)
UI PATTERNS (DRUPAL 8)
Multiple Integrations
Views
1:1 Mapping
Works with PatternLab
https://www.drupal.org/project/ui_patterns
![Page 42: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/42.jpg)
UI PATTERNS (DRUPAL 8)
![Page 43: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/43.jpg)
PATTERNKIT (DRUPAL 7)
Panels
Data Mapping
TFD7-beta3 + namespaces patch
![Page 44: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/44.jpg)
![Page 45: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/45.jpg)
DEMO
![Page 46: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/46.jpg)
CAVEATS
TFD7 issues - patches neededbeta3,
Zurb Foundation node-sass issuesBase theme is outdated, needs updating
Drupal theme builds are still complicated
not everything is "npm run build"
... or "./configure; make"
![Page 47: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/47.jpg)
THE FUTURE
![Page 48: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/48.jpg)
TWIG / NUNJUCKSCOMPONENTS
PHPTEMPLATE PATTERNLAB WEBCOMPONENTS
PATTERNKIT
Server-side rendering
Client & Server-side rendering
![Page 49: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/49.jpg)
IMPLEMENTINGA DESIGN SYSTEMYOUR 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
![Page 50: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/50.jpg)
GET INVOLVEDSTART HERE
PatternLab
https://github.com/drupal-pattern-lab/roadmap/issues/8
https://github.com/pattern-lab/patternlab-php-core/issues/116
![Page 51: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/51.jpg)
RESOURCESPatternFly
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/
![Page 52: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/52.jpg)
COMMAND REFERENCEStart a local docker
Create a new Drupal install
Install UI Patterns Drupal Module
Install PatternKit Drupal Module
npm install -g generator-docker4drupalyo 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
![Page 53: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/53.jpg)
SPECIAL THANKSJOHN 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 fromRed Hat.com, Connect, Customer Portal andother teams
as well as the Drupal community
![Page 54: IMPLEMENTING AN ENTERPRISE DESIGN SYSTEM THE RED HAT … · Derek "tachyon" Reese is a developer at Red Hat. blurb: Derek Reese is a self-directed full-stack developer experienced](https://reader033.vdocuments.mx/reader033/viewer/2022042919/5f61fd0df5829e7968257a35/html5/thumbnails/54.jpg)
Q&A
THANKS!