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
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
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"
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
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