null

#DCMuc16
Component-driven theming
workflow with Pattern Lab and
Drupal 8
Thomas Keitel, Steffen Rühlmann
T
#DCMuc16
Introduction
Who we are?
Thomas Keitel @hctom Senior Drupal Developer
Thomas Keitel, Steffen Rühlmann
Steffen Rühlmann @_SteffenR Senior Drupal Developer
T
#DCMuc16
undpaul
• Drupal agency based in Hanover
• 14 people passionate about working with Drupal
• distributed team - several location in Germany (Hanover, München, Bremen, Halle,
Braunschweig, Goslar, Saarland)
• active in the Drupal community
• working for clients from several industries (Burda, Warner Music, …)
Thomas Keitel, Steffen Rühlmann
T
#DCMuc16
Talking about
Pattern Lab
Thomas Keitel, Steffen Rühlmann
T
#DCMuc16
Pattern Lab helps you and your
team build thoughtful, patterndriven user interfaces using atomic
design principles.
patternlab.io
Thomas Keitel, Steffen Rühlmann
T
#DCMuc16
Atomic Design Process
Thomas Keitel, Steffen Rühlmann
T
#DCMuc16
Atoms
• smallest components of an interface
• HTML elements (labels, inputs, buttons, headlines etc.)
• reusable mixins, functions, variables, colors
• self-contained (structure and assets)
Thomas Keitel, Steffen Rühlmann
T
#DCMuc16
Atoms by example
Card title
Card image
Thomas Keitel, Steffen Rühlmann
Card body
T
#DCMuc16
Molecules
• combination of several atoms
• markup not suitable in atoms or organisms
• self-contained (structure and assets)
Thomas Keitel, Steffen Rühlmann
T
#DCMuc16
Molecules by example
Card
Card variant (image right)
Card variant (image left, dark)
Thomas Keitel, Steffen Rühlmann
T
#DCMuc16
Organisms
• combination of molecules (and sometimes atoms)
• create specific part of interface (e.g. listing, grids)
• self-contained (structure and assets)
Thomas Keitel, Steffen Rühlmann
T
#DCMuc16
Organisms by example
Card list
Thomas Keitel, Steffen Rühlmann
Card grid
T
#DCMuc16
Templates
• put together from organisms (and sometimes molecules/atoms)
• wireframe for pages filled with placeholders
• self-contained (structure and assets)
Thomas Keitel, Steffen Rühlmann
T
#DCMuc16
Templates by example
Page content
Thomas Keitel, Steffen Rühlmann
T
#DCMuc16
Pages
• instances of templates (placeholders replaced with content)
• clients can use it as real-world demo
Thomas Keitel, Steffen Rühlmann
T
#DCMuc16
Pages by example
Article page
Thomas Keitel, Steffen Rühlmann
T
#DCMuc16
All together now
Thomas Keitel, Steffen Rühlmann
T
#DCMuc16
Let’s get engaged
Tools/ Libraries, that help you getting started
• Custom Setup with
• composer
• npm/nodejs
• gulp/grunt
• Pattern Lab Twig Standard Edition for Drupal • Prebuild setup with pattern-lab-starter theme by phase2
• recommended, cause it works out-of-the-box
• npm install && npm start = time to get your hands dirty :-)
Thomas Keitel, Steffen Rühlmann
T
#DCMuc16
Thomas Keitel, Steffen Rühlmann
T
#DCMuc16
Let’s start the wedding ceremony
• install Drupal “Component Libraries” module to get custom twig namespaces
injected for your component templates
• Drupal templates (e.g. node.html.twig, field.html.twig) are used as presenter
templates
• presenter templates prepare data and include/embed actual Pattern Lab
component templates
DONE
…in a perfect world ;-)
Thomas Keitel, Steffen Rühlmann
T
#DCMuc16
Component (section)
molecules/section/section.twig
molecules/section/_section.scss
molecules/section/section.yaml
Thomas Keitel, Steffen Rühlmann
T
#DCMuc16
Presenter template (section)
templates/content/node—article—full.html.twig (excerpt)
Thomas Keitel, Steffen Rühlmann
T
#DCMuc16
Component (card list)
organisms/list/card-list/card-list.twig
organisms/list/card-list/_card-list.scss
organisms/list/card-list/card-list.yaml
Thomas Keitel, Steffen Rühlmann
T
#DCMuc16
Advanced presenter template (card list)
templates/views/views-view-unformatted--articles-by-user.html.twig
Thomas Keitel, Steffen Rühlmann
T
#DCMuc16
Advanced presenter template (card)
templates/content/node--teaser-image-left.html.twig
Thomas Keitel, Steffen Rühlmann
T
#DCMuc16
WANT TO SEE A
DEMONSTRATION?
Thomas Keitel, Steffen Rühlmann
T
#DCMuc16
Pitfalls
• Whitespace issues (whitespaces/linebreaks in templates are handled as output)
• How to check for empty output (currently not really possible with render arrays)?
• Brainfuck due to deep nesting of templates (depends on the complexicity of the
layout)
Thomas Keitel, Steffen Rühlmann
T
#DCMuc16
Ressources
• Pattern Lab - http://www.patternlab.io
• “Atomic Design” book by Brad Frost - http://atomicdesign.bradfrost.com/
• Pattern Lab Twig Standard Edition for Drupal - http://bit.ly/2bNJ8sc
• pattern-lab-starter - https://github.com/phase2/pattern-lab-starter
• twig - http://twig.sensiolabs.org
Thomas Keitel, Steffen Rühlmann
T
#DCMuc16
Questions?
Thomas Keitel, Steffen Rühlmann
T
#DCMuc16
THANK YOU AND
PROST!
Thomas Keitel, Steffen Rühlmann
T

Download Report