COMPONENT BASED THEMING WITH UI PATTERNS PRESENTED BY BRIAN PERRY - - PowerPoint PPT Presentation

▶
component based theming with ui patterns
SMART_READER_LITE
LIVE PREVIEW

COMPONENT BASED THEMING WITH UI PATTERNS PRESENTED BY BRIAN PERRY - - PowerPoint PPT Presentation

Aug 07, 2023 163 likes •649 views

COMPONENT BASED THEMING WITH UI PATTERNS PRESENTED BY BRIAN PERRY November 18, 2017 BRIAN PERRY Hi! Currently living in Chicago burbs Interactive Developer at HS2 Solutions Loves style guide driven development and all things

slide-1
SLIDE 1

COMPONENT BASED THEMING WITH UI PATTERNS

PRESENTED BY BRIAN PERRY

November 18, 2017

slide-2
SLIDE 2

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

BRIAN PERRY

  • Currently living in Chicago ‘burbs
  • Interactive Developer at HS2 Solutions
  • Loves style guide driven development and all things Nintendo

d.o: brianperry twitter: bricomedy nintendo: wabrian

Hi!

slide-3
SLIDE 3

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

HS2 SOLUTIONS

Pros:

  • Chicago area
  • Smart Drupal folks
  • Always looking for more smart Drupal Folks
  • Sent me here

Cons:

  • People in the Midwest say ‘Pop’ instead of ‘Soda’
  • Not HS1 Solutions

Totally Unapproved Company Info Slide

slide-4
SLIDE 4

Component Based Theming With UI Patterns

slide-5
SLIDE 5

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

5

  • Creating modular and re-usable elements
  • Building a design system, not a series of pages
  • Can use a living style guide for documentation and prototyping
  • Tools like KSS and Pattern Lab

WHAT IS IT? COMPONENT BASED THEMING

slide-6
SLIDE 6

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

6

  • Efficient re-use
  • Write once, use everywhere.
  • Within a single project and even across projects (beyond Drupal even)
  • Well isolated chunks of code
  • Decoupling front and back end development
  • Theming doesn’t have to come last
  • Living style guide
  • Simplifies coordination between designers and developers / developers and developers.
  • Rapid prototyping

WHY TAKE A COMPONENT BASED APPROACH? COMPONENT BASED THEMING

slide-7
SLIDE 7

Component Based Theming With Without UI Patterns

slide-8
SLIDE 8

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

8

OUR COMPONENT

slide-9
SLIDE 9

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

9

  • Everything lives inside component directory in Pattern

Library

  • SASS
  • Twig
  • JS
  • Other Assets
  • Pattern Data

THE COMPONENT DIRECTORY

slide-10
SLIDE 10

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

10

MARKUP AND STYLES

slide-11
SLIDE 11

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

11

paragraph--marketing-content-section.html.twig

MAPPING TO DRUPAL

slide-12
SLIDE 12

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

12

  • Requires quite a bit of debugging
  • Difficult for those not familiar with Twig / Render Array Structure
  • Easy to get carried away / break things Drupal depends on (Quickedit, Panels IPE)
  • card.twig is a black box to Drupal

IT WORKS, BUT… PAIN POINTS

slide-13
SLIDE 13

Component Based Theming With UI Patterns

slide-14
SLIDE 14

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

14

Define and manage components in a way that Drupal understands

UI PATTERNS MODULE

  • Define UI Patterns as Drupal Plugins
  • Use defined patterns with component friendly modules
  • Views, field groups, panels, display suite, paragraphs (requires field layout or display suite)
  • Configure data mappings in the UI
  • Optional Pattern Library page exposed in Drupal
  • Also allows Drupal to:
  • Preprocess patterns
  • Render patterns programmatically
slide-15
SLIDE 15

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

15

slide-16
SLIDE 16

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

16

UI PATTERNS LIBRARY SUBMODULE

slide-17
SLIDE 17

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

17

marketing-site-content-section.pattern.yml

DEFINING A PATTERN

slide-18
SLIDE 18

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

18

DEFINING A PATTERN

slide-19
SLIDE 19

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

19

DEFINING A PATTERN

slide-20
SLIDE 20

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

20

DEFINING A PATTERN

slide-21
SLIDE 21

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

21

pattern-marketing-site-content-section.html.twig

CAN I GET A SUGGESTION?

  • If ’use:’ doesn’t make sense for you, default template suggestions exist.
  • Could add your twig markup here
  • Can even include/extend/embed and map data.
  • Can preprocess to add additional suggestions.
  • See hook_theme_suggestions_alter()
slide-22
SLIDE 22

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

22

DRUPAL PATTERN LIBRARY

slide-23
SLIDE 23

EXPOSING YOUR PATTERN IN DRUPAL

And now for the part that everyone gets tripped up on…

slide-24
SLIDE 24

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

24

  • In 8.3 and above:
  • Enable Field Layout
  • Enable UI Patterns Layouts
  • Begin enjoying your patterns anywhere layouts are

available. Paragraphs are common component friendly option.

EXPOSING YOUR PATTERN IN DRUPAL INTEGRATION MODULES LOOKING FOR A PLACE TO START?

  • UI Patterns Layouts – makes patterns available via Layout

Discovery

  • UI Patterns Views – makes patterns available as views row

style

  • UI Patterns Display Suite – makes patterns available as

display suite field templates

  • UI Patterns Field Group – makes patterns available to field

groups

slide-25
SLIDE 25

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

25

CREATE PARAGRAPH TYPE

slide-26
SLIDE 26

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

26

Select your pattern from the list.

MANAGE DISPLAY: LAYOUT SETTINGS

slide-27
SLIDE 27

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

27

MAP PARAGRAPH FIELDS TO PATTERN FIELDS

slide-28
SLIDE 28

Beyond the Basics

slide-29
SLIDE 29

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

29

TESTIMONIAL BLOCK PATTERN

slide-30
SLIDE 30

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

30

UI PATTERNS VIEWS

slide-31
SLIDE 31

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

31

UI PATTERNS FIELD GROUP

slide-32
SLIDE 32

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

32

UI PATTERNS FIELD GROUP

slide-33
SLIDE 33

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

33

UI PATTERNS DISPLAY SUITE

slide-34
SLIDE 34

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

34

RENDER USING TWIG FUNCTION

slide-35
SLIDE 35

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

35

RENDER PATTERN PROGRAMMATICALLY

slide-36
SLIDE 36

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

36

Not yet formally supported, but…

SUB-PATTERNS

slide-37
SLIDE 37

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

37

Can use nested paragraphs for same end result

SUB-PATTERNS

slide-38
SLIDE 38

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

38

CAN RENDER PATTERNS IN YOUR PATTERN PREVIEW

slide-39
SLIDE 39

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

39

On roadmap, but twig variables may be enough in some cases

VARIANTS

slide-40
SLIDE 40

Workflow

slide-41
SLIDE 41

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

41

  • Components begin life in Pattern Lab
  • Developing components that don’t yet exist
  • Smaller sub-components
  • Larger scale prototyping
  • Components ‘graduate’ to a UI Pattern in Drupal
  • Documented both in code and in pattern library
  • Predictable re-use anywhere a UI Pattern can be rendered

UI PATTERNS WITH AN EXTERNAL PATTERN LIBRARY

slide-42
SLIDE 42

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

42

  • Many possible options:
  • The UI / various integration modules.
  • Programmatically
  • Twig functions
  • Pick an approach, stick to it. Document it.

INTEGRATING WITH UI PATTERNS

slide-43
SLIDE 43

UI Patterns in a Contributed Theme

slide-44
SLIDE 44

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

44

Exposes foundation building blocks – not opinionated about how they are used

FOUNDATION PATTERNS THEME

slide-45
SLIDE 45

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

45

Pre-packaged paragraph types to jump start the use of the theme

FOUNDATION PATTERNS CONFIGURATION MODULE

slide-46
SLIDE 46

Resources

slide-47
SLIDE 47

HS2 SOLUTIONS | COMPONENT BASED THEMING WITH UI PATTERNS

47

  • https://www.drupal.org/project/ui_patterns
  • Links to documentation and github repo / issue queue.
  • #ui_patterns on DrupalTwig Slack
  • UI Patterns Talk at DrupalCon Vienna
  • https://www.drupal.org/project/foundation_patterns
  • Github repo / developer sandbox

RESOURCES

slide-48
SLIDE 48

Questions?

brian.perry@hs2solutions.com