Component Theming Ui Patterns - Drupal GovCon
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 Nintendo d.o: brianperry twitter: bricomedy HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS nintendo: wabrian
HS2 SOLUTIONS Totally Unapproved Company Info Slide 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 HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS
Component Based Theming With UI Patterns
COMPONENT BASED THEMING WHAT IS IT? 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 HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 5
COMPONENT BASED THEMING WHY TAKE A COMPONENT BASED APPROACH? 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 HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 6
Component Based Theming With Without UI Patterns
OUR COMPONENT HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 8
THE COMPONENT DIRECTORY Everything lives inside component directory in Pattern Library SASS Twig JS Other Assets Pattern Data HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 9
MARKUP AND STYLES HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 10
MAPPING TO DRUPAL paragraph--marketing-content-section.html.twig HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 11
PAIN POINTS IT WORKS, BUT 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 HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 12
Component Based Theming With UI Patterns
UI PATTERNS MODULE Define and manage components in a way that Drupal understands 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 HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 14
HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 15
UI PATTERNS LIBRARY SUBMODULE HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 16
DEFINING A PATTERN marketing-site-content-section.pattern.yml HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 17
DEFINING A PATTERN HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 18
DEFINING A PATTERN HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 19
DEFINING A PATTERN HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 20
CAN I GET A SUGGESTION? pattern-marketing-site-content-section.html.twig 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() HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 21
DRUPAL PATTERN LIBRARY HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 22
EXPOSING YOUR PATTERN IN DRUPAL And now for the part that everyone gets tripped up on
EXPOSING YOUR PATTERN IN DRUPAL INTEGRATION MODULES LOOKING FOR A PLACE TO START? UI Patterns Layouts – makes patterns available via Layout In 8.3 and above: 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 Enable Field Layout Enable UI Patterns Layouts Begin enjoying your patterns anywhere layouts are available. Paragraphs are common component friendly option. groups HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 24
CREATE PARAGRAPH TYPE HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 25
MANAGE DISPLAY: LAYOUT SETTINGS Select your pattern from the list. HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 26
MAP PARAGRAPH FIELDS TO PATTERN FIELDS HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 27
Beyond the Basics
TESTIMONIAL BLOCK PATTERN HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 29
UI PATTERNS VIEWS HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 30
UI PATTERNS FIELD GROUP HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 31
UI PATTERNS FIELD GROUP HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 32
UI PATTERNS DISPLAY SUITE HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 33
RENDER USING TWIG FUNCTION HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 34
RENDER PATTERN PROGRAMMATICALLY HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 35
SUB-PATTERNS Not yet formally supported, but HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 36
SUB-PATTERNS Can use nested paragraphs for same end result HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 37
CAN RENDER PATTERNS IN YOUR PATTERN PREVIEW HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 38
VARIANTS On roadmap, but twig variables may be enough in some cases HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 39
Workflow
UI PATTERNS WITH AN EXTERNAL PATTERN LIBRARY 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 HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 41
INTEGRATING WITH UI PATTERNS Many possible options: The UI / various integration modules. Programmatically Twig functions Pick an approach, stick to it. Document it. HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 42
UI Patterns in a Contributed Theme
FOUNDATION PATTERNS THEME Exposes foundation building blocks – not opinionated about how they are used HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 44
FOUNDATION PATTERNS CONFIGURATION MODULE Pre-packaged paragraph types to jump start the use of the theme HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 45
Resources
RESOURCES 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 HS2 SOLUTIONS COMPONENT BASED THEMING WITH UI PATTERNS 47
Questions? brian.perry@hs2solutions.com
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)
How to create custom content to store in your Drupal database using CCK Implementing seo in drupal website Drupal custom theme development (Html to drupal theme development) Drupal 8.0 content management system syllabus 1. Drupal's requirements and how it works: drupal architecture Drupal 8 Basics o How Drupal began o What is Drupal 8
guided migration from Drupal 6 or 7 to Drupal 8. Assisted upgrades to Drupal 8 can now be done, much more easily than they used to be able to earlier. Three modules were added in order to facilitate the custom migrations as well as the Drupal 6 or Drupal 7 to Drupal 8 migrations: Migrate Migrate Drupal Migrate Drupal UI Chapter 2
Logo format is SVG.! . Not so many things to learn compared to Drupal 7.!! Easier with Drupal 8! Thanks! Q&A. Title: Drupal 8 Theming Deep Dive - Drupal Dev Dayss Montpellier 17 avril 2015.key Author: Romain Jarraud Created Date: 5/18/2015 9:23:08 AM .
Chapter 1: Developing for Drupal 8. 7. Introducing Drupal (for developers) 8. Developing for Drupal 8. 8. Technologies that drive Drupal. 9 PHP 10 Databases and MySQL 10 The web server 11 HTML, CSS, and JavaScript 11. Drupal architecture. 11 Drupal core, modules, and themes 11 Hooks, plugins, and events 12 Services and the dependency injection .
Customer Identity and Access Management in a global Drupal setup Drupal Business Days, Frankfurt, 19.05.17. . Sponsor of multiple Drupal camps and European Drupal Business Days Active community work through contributions . Document and assign all tasks. Solutions. Be bold. Solutions. Get into the lead.
This is a free introductory course for people who are curious about Drupal, and want to find out more. Your Drupal guide will help you get up to speed with Drupal more quickly than if you tried on your own. First youʼll find out about your Drupal Guide delivering the Hello Drupal tour, and also learn about the other people in the room with you.
serez invité à choisir la version de Drupal à télécharger. Je recommande de sélectionner le dernier. Ainsi, lorsque Drupal est téléchargé, vous devez l'installer. drupal site:install Après quelques étapes simples, votre site Drupal sera prêt. Avec cette méthodologie, une nouvelle installation de Drupal nous prend entre 5 et 7 .
The threat profile for SECRET anticipates the need to defend against a higher level of capability than would be typical for the OFFICIAL level. This includes sophisticated, well resourced and determined threat actors, such as some highly capable serious organised crime groups and some state actors. Reasonable steps will be taken to protect information and services from compromise by these .
