1. 13 juin 2018 Meetup Drupal Montpellier
Alexandre Todorov
1
Drupal presentation layer components
● Goals
● Theme layer
● Display structure
● UI patterns
● Layout and settings
● Responsive

2. 13 juin 2018 Meetup Drupal Montpellier
Alexandre Todorov
2
Goals
● Separate front works
● Shared, reusable front components
– Web components : polymer, bower, …
– Connection to external front tools
ex. http://patternlab.io
● Config for business layer and site specific
● Data layer
– See Structuration de contenus hétérogènes

3. 13 juin 2018 Meetup Drupal Montpellier
Alexandre Todorov
3
Theme layer : Renderable array
● #type (FAPI, Element)
reusable elements
● #theme
● #template (inline template)
● #markup
● #plain_text
● #lazy_builder
(placeholders)
● Theme wrappers
● Theme suggestions
● Renderer : Html, Dialog, Modal, Ajax

4. 13 juin 2018 Meetup Drupal Montpellier
Alexandre Todorov
4
Display structure
● Block layout : block.block settings [+ context]
● Entity view display : layout, groups, formatters
– Content or config (ex. block.block) reference
– Extra fields + settings (like formatters) vs « Display Suite »
● Exposed fields like : title, read more,
● Token, copy field
– Display Suite template field
● Views style plugins
– content (table, list, )
– row (fields [formatters], view mode, )

5. 13 juin 2018 Meetup Drupal Montpellier
Alexandre Todorov
5
UI patterns
● Split in UI patterns all html static mockups
● Unique « Info » entry using pattern-PATERN_ID.yml
– @RenderElement("pattern") : #type = 'pattern'
– For libraries : $element['#attached']['library'][]
– Wrapper of hook_theme ($variables) and libraries.info
● Create ui pattern (twig, css, js) instead hook theme
● Catalog preview, but missing for different configuration
instances of the same pattern
● Possible overrides
– theme hook (default : pattern_[id]), only the template file
– use : stand-alone Twig file as template (twig namespaces)

6. 13 juin 2018 Meetup Drupal Montpellier
Alexandre Todorov
6
UI patterns overview
Settings !Field templates

7. 13 juin 2018 Meetup Drupal Montpellier
Alexandre Todorov
7
Layouts and Settings
●
Have Layout « project specific » variants for
– « entity view displays » (view mode)
– « field group » (nested layout)
– « views row plugin »
– « Display Suite » field template
●
Operating mode
– Use shared components (data models, ui patterns)
– New issues only form specific or missing features, after site building
● What's next
– Data contextual (by delta item) styling settings :
● Different styling for the same brick bundle in different contexts
– Spacing, Hn for SEO, ...
●
Brick already has contextual view mode
– Layouts by grouping delta Items : To test nested bricks

8. 13 juin 2018 Meetup Drupal Montpellier
Alexandre Todorov
8
Responsive – client side
● Why only client side (not found http header for that)
– Changes the view-port from portrait to landscape
– Resize the web-browser window
– Change the default zoom
– An element in a page is responsive to other elements
When hidding the right sidebar, the main content must
response to the change
● Css media queries
● Js window.matchMedia(mediaQueryString)

9. 13 juin 2018 Meetup Drupal Montpellier
Alexandre Todorov
9
Responsive – Hybrid + Drupal headless
● The right question :
How to present the same information for each device ?
– Compiled AngularJS with Drupal headless
– What about the « Drupal presentation layer » presented just
before ?
● Apache Cordova
The old PhoneGap
● Ionic : Built on Cordova
Overlay using mainly
AngularJS
● React Native
Facebook