[Gian Mario Mereu] - Drupal & Patternlab: un nuovo approccio al theming
-
Upload
wellnet-srl -
Category
Technology
-
view
70 -
download
1
Transcript of [Gian Mario Mereu] - Drupal & Patternlab: un nuovo approccio al theming
Drupal & Pattern Labun nuovo approccio al theming
Drupal Day 2017
Gian Mario [email protected]
Twig
Twig
Twig
Stampa qualcosa: {{ ... }}
esegui il comando: {% ... %}
commenti: {# ... #}
Twig
Accesso variabili{{ object.pippo }}
Twig
Includere file
{% include “file.html.twig” with { var1: value } %}
{% include “file.html.twig” with { var1: value } only %}
Twig
blocchi“page.html.twig”
Twig
estendere un twig
Problema: Drupal theming
il Drupal themer
Theme accoppiato alle strutture dati
Pipeline: 1) sviluppo e/o building; 2) theming;
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
Metodologie per la progettazione e strumenti a supporto dello sviluppo
Atomic Design prende ispirazione dai ricordi di chimica dell’ideatore
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
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
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
Metodologie per la progettazione e strumenti a supporto dello sviluppo
i template raggruppano oggetti: organismi, molecole ed atomi, in uno specifico layout
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
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
Metodologie per la progettazione e strumenti a supporto dello sviluppo (pattern lab)
source
root directory
Metodologie per la progettazione e strumenti a supporto dello sviluppo (pattern lab)
source/_patterns
http://demo.patternlab.io/
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
Strumenti esistenti in Drupal (elenco non completo)
Moduli
● componentsPermette 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" %}
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
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>
Demo
Team Member
Conclusioni
il Drupal themer
Theme accoppiato alle strutture dati
Pipeline: 1) sviluppo e/o building; 2) theming;
http://atomicdesign.bradfrost.comhttp://patternlab.io
https://www.aleksip.net // https://github.com/aleksip/shila-drupal-themehttps://www.phase2technology.com // https://github.com/phase2/pattern-lab-starter
Domande