[drupalday2017] - Drupal & Patternlab: un nuovo approccio al theming
0 likes225 views
Il documento esplora un nuovo approccio al theming in Drupal attraverso l'uso di Pattern Lab e del design atomico. Viene descritto il processo di sviluppo, che include la creazione di componenti UI come atomi, molecole e organismi, gestiti tramite template Twig. Infine, vengono elencati strumenti e moduli disponibili in Drupal che supportano questa metodologia.
![[drupalday2017] - Drupal & Patternlab: un nuovo approccio al theming](https://image.slidesharecdn.com/gianmariomereudrupalpatternlabunnuovoapproccioaltheming-170315153824/85/drupalday2017-Drupal-Patternlab-un-nuovo-approccio-al-theming-1-320.jpg)
![Strumenti esistenti in Drupal (elenco non completo)
Moduli
● components
Permette rendere accessibili nuovi componenti definiti in un tema o modulo come namespace Twig
mymodule.info.yml [mymodule directory]/myModuleComponets/box/box.twig
component-libraries:
myModule:
paths:
- myModuleComponets {% include "@myModule/box/box.twig" %}](https://image.slidesharecdn.com/gianmariomereudrupalpatternlabunnuovoapproccioaltheming-170315153824/85/drupalday2017-Drupal-Patternlab-un-nuovo-approccio-al-theming-23-320.jpg)
![[drupalday2017] - Drupal & Patternlab: un nuovo approccio al theming](https://image.slidesharecdn.com/gianmariomereudrupalpatternlabunnuovoapproccioaltheming-170315153824/85/drupalday2017-Drupal-Patternlab-un-nuovo-approccio-al-theming-31-320.jpg)
[drupalday2017] - Drupal & Patternlab: un nuovo approccio al theming
- 2. Drupal & Pattern Lab un nuovo approccio al theming Drupal Day 2017
- 4. Twig
- 5. Twig
- 6. Twig Stampa qualcosa: {{ ... }} esegui il comando: {% ... %} commenti: {# ... #}
- 8. Twig Includere file {% include “file.html.twig” with { var1: value } %} {% include “file.html.twig” with { var1: value } only %}
- 11. Problema: Drupal theming il Drupal themer Theme accoppiato alle strutture dati Pipeline: 1) sviluppo e/o building; 2) theming;
- 12. Metodologie per la progettazione e strumenti a supporto dello sviluppo Metodo di progettazione di sistemi (design system) chiamato: Atomic Design Strumento a supporto: Pattern Lab
- 13. Metodologie per la progettazione e strumenti a supporto dello sviluppo Atomic Design prende ispirazione dai ricordi di chimica dell’ideatore
- 14. Metodologie per la progettazione e strumenti a supporto dello sviluppo tag html a, input, label, h*, li, ol, p, table, button, image label input button
- 15. Metodologie per la progettazione e strumenti a supporto dello sviluppo le molecole sono dei raggruppamenti di elementi (tag) e che funzionano come una unità Il form (molecola) viene formato dagli elementi (atomi) della slide precedente
- 16. Metodologie per la progettazione e strumenti a supporto dello sviluppo gli organismi sono dei componenti della UI mediamente complessi composti da atomi e/o molecole e/o altri organismi Ad esempio l’header è un organismo
- 17. Metodologie per la progettazione e strumenti a supporto dello sviluppo i template raggruppano oggetti: organismi, molecole ed atomi, in uno specifico layout
- 18. Metodologie per la progettazione e strumenti a supporto dello sviluppo gli organismi sono dei componenti della UI mediamente complessi composti da atomi e/o molecole e/o altri organismi
- 19. Metodologie per la progettazione e strumenti a supporto dello sviluppo Pattern Lab “At its core, Pattern Lab is a static site generator (powered by either PHP or Node) that stitches together UI components.” definizione da http://patternlab.io/ Il sito statico viene generato a partire da una serie di template (twig o mustache)/css/js organizzati in una gerarchia di directory
- 20. Metodologie per la progettazione e strumenti a supporto dello sviluppo (pattern lab) source root directory
- 21. Metodologie per la progettazione e strumenti a supporto dello sviluppo (pattern lab) source/_patterns http://demo.patternlab.io/
- 22. Strumenti esistenti in Drupal (elenco non completo) Pattern Lab ● Pattern Lab Twig Standard Edition for Drupal (github) plugin-drupal-twig-components (t, without, link, path …. ) Drupal 8 theme ● Phase2 Drupal 8 base theme with Pattern Lab (github) gulp, sass, singularity - ottimamente documentato ● Shila theme for Drupal 8 (github) gulp, sass, singularity
- 23. Strumenti esistenti in Drupal (elenco non completo) Moduli ● components Permette rendere accessibili nuovi componenti definiti in un tema o modulo come namespace Twig mymodule.info.yml [mymodule directory]/myModuleComponets/box/box.twig component-libraries: myModule: paths: - myModuleComponets {% include "@myModule/box/box.twig" %}
- 24. Strumenti esistenti in Drupal (elenco non completo) Moduli ● ui patterns permette di definire dei pattern ed usarli in: panels, field groups, views, paragraphs teammember: label: Team Member description: Display a team member. fields: name: type: text label: Name description: Name of the team member. preview: Nome Cognome ………. use: '@molecules/components/shila-team-member/shila-team-member.html.twig' libraries: - shila_theme/team-member my-pattern.ui_patterns.yml
- 25. Strumenti esistenti in Drupal (elenco non completo) <div class="team-member"> <div class="team-member__picture"> <image src=”{{ image }}”> </div> <h2 class="team-member__name"> {{ name }} </h2> <span class="team-member__nikname">{{ nikname }}</span> // <span class="team-member__email">{{ email }}</span> <div class="team-member__bio"> <div class="team-member__bio__button">-</div> <p class="team-member__bio__content collapse"> {{ bio }} </p> </div> </div>
- 26. Demo
- 27. Team Member
- 28. Conclusioni il Drupal themer Theme accoppiato alle strutture dati Pipeline: 1) sviluppo e/o building; 2) theming;
- 29. http://atomicdesign.bradfrost.com http://patternlab.io https://www.aleksip.net // https://github.com/aleksip/shila-drupal-theme https://www.phase2technology.com // https://github.com/phase2/pattern-lab-starter
- 30. Domande