Drupal & Pattern Labun nuovo approccio al theming

Drupal Day 2017

Gian Mario Mereugmereu@wellnet.it

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