@mortendk #drupaltwig - drupalcon | be human, think … · theming drupalcon barcelona 2015 drupal...

@moRtenDk #drUpaltWIG

7


tHemIngDRUpALCoN BaRCElONA 2015

DRUpAl 8


SLIdES aRE oNLInE In 60 MInUTEs

sLidEs


@morTenDk

CLAsSy MAInTAInER

GEEk RÖYALe THE ANGrY

THEmER

TaG1 CONsULTiNG


@MOrTENdK


#DRuPALtWiG


sOrryRc 1


bOoOOooOoLET THE ANGeR OuT


sTocKhoLm sYndRome


DRUpAL7 MARkUP


“IT’S A FEAtUrE”

dIviTis<DIV><DIV><DIV><DIV><DIV><DIV><DIV><DIV><DIV><DIV><DIV><DIV><DIV><DIV><DIV><DIV><DIV><DIV><DIV><DIV><DIV><DIV><DIV><DIV><DIV><DIV><DIV><DIV><DIV><DIV>

</DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV>


5000LINeS Of PHpTEMpLATe.PHp

TotAllY oK


<div class=“foo bar baz foo-more-more bar-more-yet another one”>

fEatUreTHE CLAsS SoUP IS AnOTHeR


nO mOre aAaaRgh!


nEw

tHemE eNgiNe

GOOd-BYe PHPtEMPlAtEHELlO TwIG


tHemE fUncTioNs

dEad!


tWig tEmpLatEs

EVErYTHiNG iS

BLOcK.HtML.tWiG

MARk.HTmL.TwIG

TABlE.HtML.tWiG

PAGe.HTmL.TwIGNODe.HTmL.TwIG

VIEw.HTmL.TwIG

FIElD.HtML.tWiG IMAgE-WiDGEt.HTmL.TwIG


tHemE iS iN cOntRolThE

OF mARKuP & CSs


uNleArn pHptEmpLa

te<? pHP dIe(‘PHPtEMPlAtE’) ?>


REAdY?


tWigDRUpAl 8


IS a “MODeRN” TEmPLAtE LaNGUaGe -> sYMPhONY

USEd BY OTHeR SySTEmS + It’S EaSY tO LeARN :)

tWig


{{ var }} {# comment #}

{% functionality %}

{ # %


{{ data.is.here }}

{{ also.this[#hashtags] }}

vAr DriLliNg$yo[‘drupal_where ’]->is[‘und’][0]->my_data7


{{ var|makemepretty(‘now’) }}

fUncTionPIPe

TWIg FUnCTIoNVaR


{{ username|uppercase }}

MORTENDK

fUncTion(mortendk)


{{ ‘Copenhagen’|t }}

{% trans %} by {{ user }} date {{ date }} {% endtrans %}

tRanSlaTe


{% if person=“mortendk” %} <h1>Loves Drupal8</h1> {% endif %}

cOntRol


{{ sushi|raw}}

aUtoEscApe

SECuRITy IS SOMeTHInG DEVeLOPeRS LIKe


{% set foo = “bar” %}

{{ foo }}

bar

cReaTe Var


cLasSyTHE DRUpAl 8 BAsE ThEmE


7corE

claSsy

<HTmL> .CSs CLAsS=“FoO”

<HTmL> .CSs CLAsS=“FoO”


bAseTheMe

corE claSsy

my ThemE

? barTik

sevEn$VArS


bAseTheMe

<div> {{ foo }} </div>

corE claSsy“MY tHEMe”

NO bASEtHEMe DEfINEd


bAseTheMe

<div class=“node node—article”> {{ foo }} </div>

corE claSsy“MY tHEMe”

BASe THeME: CLAsSY


tEmpLatEs

CORe/THeME/cLASsY/*

MODuLES/[MODuLENaME]/*7aniMatiOn eXplaIninG how we MoveD shIt

outTa cOre And Into claSsy


dRupAl8 teMplAtes

CORe/THeMES/CLAsSy/


dEfiNe BasEthEme

base theme: classy

[THEmENAmE].iNFO.YmL


yOu DecIde!

corE claSsy

CLEaN As COrE CLAsSES YOU CAN TRUsT


corE

claSsy

7

ZeN

MOThERShIP

wAitAmiNutE!


MORtENDk

JOHn ALbIN

corE

claSsy

7

ZeN

MOThERShIP

MAInTAInERS ?


sEtupSETtING UP a THeME


[ROOt]/ThEMEs/[THEmENAmE]

I LiVE wHERe NOw ?


tHemE cOnfIg FilEs

*.InFO.yMl *.LiBRArIES.YML *.BrEAKpOINtS.YmL *.ThEmE


*.inFo.YmlTHEmE CoNFIgURAtION, CSs & jS


BASiC INFo

REGiOnS

LIBrARIeS

REMoVE cSS


*.liBraRieS.yMlADDiNG jS & CSs TO THE THEmE


FOO.INFo.YAmL

FOO.LIBrARIeS.YaML

SLIdER.cSSSLIdER.jS

SLIdER

FOO.CsSBAR.JS

AWEsOmE


.INfO.YmL

.LIbRARiES.yML


NAMe

DEPeNDEnCIEs

CSS FILeS

*.liBraRieS.yMl

JS fILEs


global: version: VERSION css: component: css/user/user.theme.css: {} theme: css/layout.css: {}

cSs OrgAniZingBASe LAYoUt COMpONEnT STAtE THEmE


[*].BreAkpOinTs.YmlRESpONSiVE iMAGeS


*.BrEAKpOINtS.YmL


[*].TheMe

WAS PHPtEMPlATE.PhP


.TheMe

.LIbRARiES.yML

.THeME


tOolsHOW TO fIND STUfF & DEbUg


sEttIngS.pHp

if (file_exists(__DIR__ . '/settings.local.php')) { include __DIR__ . '/settings.local.php'; }

COPy: SiTES/EXAmPLE.SETtINGs.LOcAL.pHP

TO: SITeS/DeFAUlT/SeTTInGS.lOCAl.PHp

UNCoMMEnT In SEtTINgS.PhP


DOWnLOAd DEvEL mODUlE INStALL DEVeL + KINt

INStALL DRUsH DRUsH En KInT

DOCs.DRuSH.oRG/eN/MaSTEr/INsTALl/

dEvel

http://docs.drush.org/en/master/install/


dIsaBle csS cAche


THEmE DeBUG FTW!

SERvICEs.YMl


FILe NAmE SuGGEsTIOnSFILe NAmE SuGGEsTIOnS


PATh TO ACTiVE tEMPlAtE


kInt{{ kint( foo ) }}

KRUmO FoR DrUPAl 8

{{ content.field_image }}

screenshot af kint fra video


SITeS/AlL/DeFAUlT/SeRVIcES.yMl

DRUsH Cr

{{ KInT(FoO) }}

tWig deBug:


tEmpLatE sTruCtuRe

EVErYTHiNG iS A TEMpLATe FIlE


125 TemPlaTesWE nUKEd THe THeME fUNCtIONs*

TURnED iT AlL INTo A mETRiCFUCkTON

OF tEMPlATEs


gRouPsdo we really need this here ?


tEmpLatE gRouPsLAYoUT

FIElD

DATaSeT

VIEwS

BLOcK CONtENT-EDIt

CONtEnT

MISc

USEr

NAViGATiON

FORm


hTml

HTMl.HTmL.TwIG

CSS + Js

HEAdER


HTMl.HTmL.TwIG

pAge

PAGe.HTmL.TwIG


HTMl.HTmL.TwIGREGiON.hTML.TWIg

REGiON.hTML.TWIg

REGiON.hTML.TWIg

rEgiOn's

PAGe.HTmL.TwIG


HTMl.HTmL.TwIG

cOntEnt

BLOcK.HtML.tWiG NODe.HTmL.TwIG VIEw.HTmL.TwIG

REGiON.hTML.TWIg


nOde

FIElD.HtML.tWiG

NODe.HTmL.TwIG

FIElD.HtML.tWiGFIElD.HtML.tWiG

FIElD-—IMAgE.HtML.tWiGFIElD.HtML.tWiG

FIElD.HtML.tWiG


aLl The fiEldsFIElD.HtML.tWiG FIElD.HtML.tWiG FIElD.HtML.tWiG FIElD.HtML.tWiG

FIElD.HtML.tWiG FIElD.HtML.tWiG FIElD.HtML.tWiG FIElD.HtML.tWiG



WE’RE gONNa TAlK AbOUT FIElDS lATEr


lAyoUtTHE MAGiC Of WItHOUt


{{ content|without(‘field’) }}

wIthOut fuNctIonPIPe

NAMeTWIg FUnCTIoN

VaR


NODe.HTmL.TwIG


conTeNt

imaGe

tagS

wIthOut


{{ coNtenT | WithOut(**) }}

{{ imAge }}

{{ content|without(‘image’,‘tags’) }}

{{ content.image }}

{{ teXt }} {{ taGs }}

{{ content.tags }}


{{ coNtenT | WithOut(**) }}

{{ imAge }}

{{ content|without(‘image’,‘tags’) }}

{{ content.image }}

{{ teXt }} {{ taGs }}

{{ content.tags }}

{{ neW }}

NEW FIElD


CONtEnTnOde.htMl.Twig


CONtENT.FIElD_ImAgE


CONtENT.FIElD_TaGS


fIeldTHE HEArT Of DRuPaL


HOW MANy <DiV>S DOEs IT TAKe TO MAKe A “SINgLE fIELd WItH OnE

VaLuE” NO lABEl?


Yo!


Yo!

<div class=“field-items”>

</div>

<div class=“field field-name-field-single field-type-text field-label-hidden”>

</div>

</div>

<div class=“field-item even”> 7


Yo!

<div class=“field field--name-field-single field--type-string field--label-hidden field__items”>

</div> CLAsSY


Yo!<div> </div>


Yo!<div> </div>

ONE DIV ZERo CLaSSEs 100% DrUPAl


Yo!<div class=“yolo”> </div>

ONE DIV ZERo CLaSSEs 100% DrUPAl


sIngLenAked

WHAt DO I UsE A

<DIv>

dUde grEat


WHAtEVErYOU

WANt IT TO


fIelD mArkUp


fIeldLABeL VALuE


SINgLE

MULtIPLe

LABeL

LABeL

}}


FIElD.HtML.tWiG


SINgLE MULtIPLe

SINgLE + LAbEL MULtIPLe + lABEl


LABeL DiSPLaY

mAnaGe DisPlay


“INLiNE”

“VISuALLy HIDdEN”

“ABOvE”


FIElD.HtML.tWiG


NO lABEl

LABeL


{% if label_hidden %} {% if multiple %}

{% else %} {% endif %} {% else %} {% if multiple %}

{% else %}

{% endif %} {% endif %}


<div> yo </div>

<div> <div> label</div> <div>yo </div> </div>

<div> <div>label</div> <div> <div>yo </div> <div>lo </div> </div> </div>


aTtrIbuTesPURe CLaSS


<div {{ attributes }}> class=“foo” data-drupal-foo aria-hidden=“true”

aTtrIbuTes


CLAsSY

<DIv CLaSs=“FOO FOO-BAR FOO-BAR-BaZ”>

*.TpL.PhP

THEmE FuNCTiOnS

PREpROCeSS

$VArS

DRUpAL7

7


{% set classes = [ ‘field-' ~ field_name|clean_class ~ ' ] %}

<div {{ attributes.addClass(classes) }}>…</div>

<div class=“tags field-tags”>…

aDdcLass


<i {{ attributes.removeClass(red) }}> … </i>

<i class=“blue”>…</i>

<div class=“red blue”> … </div>BAD MODuLE oUTPuT

rEmoVe ClaSs


CLAsSYMODuLECORe

<DIv CLaSs=“CORe”>

ESSeNTIaL ClASSeS Ex: “IS-vISIbLE”


CLAsSYMODuLECORe

<DIv CLaSs=“CORe MOdUlE”>

$vaR[‘attRibuTes’]->AddCLass(‘modUle’)


CLAsSYMODuLECORe

<DIv CLaSs=“CORe MOdULE THEmE”>

{{ ATtRIBuTES.ADDcLASs(‘THEmE’) }}


CLAsSYMODuLECORe

<DIv CLaSs=“CORe THeME”>

{{ ATtRIBuTES.REMoVe(‘MODuLE’) }}


CLAsSYMODuLECORe

<DIv CLaSs=“THEmE”>

{{ ATtRIBuTES.REMoVe(‘MODuLE’,’CORe’) }}


jS- PreFix

<DIv CLaSs=“JS-fOO fOO”>…

$(.jS-FoO) .FOo{…}


<div class="blablabla"> {{ attributes .removeClass(‘blablabla’) .addClass(‘hero-main’) .setAttribute('id', 'top') }} <div id="top" class="hero-main">

aTtrIbuTes


fIelD & atTriButEs

KISsING IN a TReEEEeEEEeEEEeE


<div> yo </div>

<div> <div> label</div> <div>yo </div> </div>

<div> <div>label</div> <div> <div>yo </div> <div>hej </div> </div> </div>


<div class=“field field__item”> yo </div>

<div class=“field”> <div class=“field__label”> label</div> <div class=“field__item”>yo </div> </div>

<div class=“field”> <div class=“field__label”>label</div> <div class=“field__items”> <div class=“field__item”>yo </div> <div class=“field__item”>lo </div> </div> </div>


LABeL VALuE

.field__item.field__label

.field


.field__item.field__label

.field__items

.field


FIX THE MARkUP


ADD & REmOVE CLAsSES


CHAnGE sTUFf WHeN 8


{{ attach_library('classy/book-navigation') }}

cSs FilEs In TemPlaTe


tWigBloCkMORe COoLNEsS FrOM tWiG


datA (pAge.Html.twiG)

PAGe.HTmL.TwIGD8




{% block foo %} {% endblock %}

PAGe.HTmL.TwIGD8




(paGe-—froNt.hTml.Twig)

{% extends "page.html.twig" %}

PAGe.HTmL.TwIGD8


@moRtenDk #drUpaltWiG


PAGe.HTmL.TwIG

PAGe—FROnT.HtML.tWiG


hAppY ?ARE YOU NOT ENTeRTAiNED ?


SCReENShOt 2.0


mEnupAgeRs

ONLy 1 (OnE) tEMPlATE FILe

MENu.HTmL.TwIG


pAgerFUN FOR EVErYBOdY ?PAGeR.HtML.tWiG


8 thIngS cHanGed

T L ; D L TOO LONg - DIDn'T lISTeN!


1. iE sUppOrt?

NO mORE SUPpORT FOR IE6, Ie7 & iE8


2. mArkUp CleAnup

HTMl5 CSS IS sMACsS & BEm BAsEd

“MODeRN” PRaCTIcE #iD ReMOVeD SEVeN Is REsPONsIvE


jS sEpeRatIonSEPaRATeD

JAVaSCRiPT’S FuNCTiONAlITY CSS STYlING IS sEPArATEd

.JS-FOObAR{ …} .FOoBaR{ COlOR: BLUe}


dIviTis

90% OF tHE mARKuP Is GOnE


jQueRy DepEndEncy

DONt WAnT 32K Of LOvE ? … THeN DoN’T


cLasSy!

CLAsSY SEPaRATeD ThE MaRKUp

FROm COrE


sAluTe!FOR THOsE ThAT rOCKeD ThE TwIG

WE sALUtE YoU!


i loOovE uUuCOTtSeR

JOEl

LEWiS

EMMa

LAUrII

#FReERUbEN

DAViD HeRNAnDeZ

JOHn ALbINWIM LEErS

JEN LAMpToN

FABiAN


DRUpAl 7


DRUpAL.oRG/tHEMe-GUiDe/8

DRUpAL.oRG/cODInG-StANDaRDS/CSS

SMAcSS.cOM

TWIg.SEnSIOlABS.ORG/DOCuMENtATIoN

lInks

http://drupal.org/theme-guide/8

http://drupal.org/coding-standards/css

https://smacss.com/

http://twig.sensiolabs.org/documentation


dOwnLoaD d8

BUIlD StUFF NOW!

DRUpAL.oRG/dRUPaL8

https://www.drupal.org/drupal8


WEEkLY mEETiNG’S THUrSDAy 17:00 CEt

#DruPalTwig


USE TWItTER #DRuPALtWIG

QUEsTIOnS, cOMMeNTS & FEeDBAcK @MOrTENdK

qUesTioNs


sEssIonsDRUpALCoN


FROnTENd UNiTED BELuGAM

BOF ROOm XXx

FROnTENd UNiTeD


ALL WEEk !DRUpAL fRONtEND SPRiNt

CODeR LoUNGe

SPRiNT lEADeRs:(FRoNTEnD UnITEd)


FONtS: DAFt BRuSH, BRUsH Up, BiTTEr

ICOnS: SMAlL IcONS 2

cRedIts

@mortendk #drupaltwig - drupalcon | be human, think … · theming drupalcon barcelona 2015 drupal...

Documents