Download pdf - [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches

@moRtenDk #dRupaLTWIg #srijAnwW

tHemIngSRIjAN wEDNeSDAy WEbINArS

DRUpAL


DRUpAl 8 BEtA 14 (DRuPAL.ORG/DRUpAl-8.0.0-BEtA1)

WEBiNAR D8 THeMe GIThUB.cOM/mORTeNDK/WEBiNAR-SRIjANWw

dOwnLoad

https://www.drupal.org/drupal-8.0.0-beta1

http://github.com/mortendk/webinar-srijanww


@MorTenDk

CLAsSy MAInTAInERGEEk

RÖYALe THE ANGrY THEmER

TaG1 CONsULTiNG


sTocKhoLm sYndRome


ACTuAL 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 + ItS EaSY tO LeARN :)

tWig


{{ var }}

{# comment #}

oUtpUt


{{ data.is.here }}

{{ also.this[#hashtags] }}

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


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

fUncTionPIBe

TWIg FUnCTIoNVaR


{{ username|uppercase }}

MORTENDK

fUncTion(mortendk)


{{ ‘Copenhagen’|t }} København

{% trans %} Copenhagen {{ var }} {% 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


TWIg.SEnSIOlABS.ORG/DOCuMENtATIoN

tWig

http://twig.sensiolabs.org/documentation


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”

NOT DEFiNeD


bAseTheMe

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

corE claSsy“MY tHEMe”

BASe THeME: CLAsSY


gRouPing


tEmpLatE gRouPsLAYoUT

FIElD

DATaSeT

VIEwS

BLOcK CONtENT-EDIt

CONtEnT

MISc

USEr

NAViGATiON

FORm


dEfiNe BasEthEme

base theme: classy

THEmENAmE.InFO.yML


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.yMlADD Js & CSs FIlES


.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 LibBASe LAYoUt COMpONEnT STAtE THEmE


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

cSs FilEs In TemPlaTe


[*].BreAkpOinTs.YmlRESpONSiVE iMAGeS


*.BrEAKpOINtS.YmL


*.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 mOduLe

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


dIsaBle csS cAche


dEbuG fTw

LETs LOoK At THe THeME nOw (LIvE CoDE dEMO)


FILe NAmE SuGGEsTIOnS


kInt{{ kint( foo ) }}

KRUmO FoR DrUPAl 8

{{ content.field_image }}


TWIg DEbUg: SITeS/AlL/DeFAUlT/SeRVIcES.yMl

DRUsH Cr {{ KInT(FoO) }}

dEbuG:


tEmpLatE sTruCtuRe

HOW IS iT StRUCtUREd IN D8


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


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




lAyoUtTHE MAGiC Of WItHOUt

@moRtenDk #dRupaLTWIg #srijAnwWNODe.HTmL.TwIG



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

wIthOut fuNctIonPIBe

NAMeTWIg FUnCTIoN

VaR


conTeNt

imaGe

tagS

lAyoUt


{{ coNtenT }}

{{ imAge }}

{{ content }}

{{ teXt }} {{ taGs }}


{{ coNtenT | WithOut(*) }}

{{ imAge }}

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

{{ content.image }}

{{ teXt }} {{ taGs }}


{{ 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


mArkUpOVErWRItE FiELDs


nOde.htMl.Twig


fIle naMe SugGesTioNs


fIelD-[Foo].hTml.twIg

FIElD--nODE--FIeLD-tAGS--ARtICLe.HTmL.TwIG



<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

@moRtenDk #dRupaLTWIg #srijAnwWNODe.HTmL.TwIG


{% set classes = [ 'tags', '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


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



PAGe.HTmL.TwIG

PAGe—FROnT.HtML.tWiG


PAGe.HTmL.TwIG

PAGe—FROnT.HtML.tWiG


CAUsE WhAT cOULd GO WROnG…

lIve deMo


TINyURL.COM/DIViTiS

dIviTis…

http://tinyurl.com/divitis


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

BETa 14! - ONlY 11 BLoCKErS LeFT

DRUpAL.oRG/dRUPaL8

https://www.drupal.org/drupal8


WEEkLY mEETiNG’S THUrSDAy 1700 CEt

#DruPalTwig


USE TWItTER #SRiJANwW

QUEsTIOnS, cOMMeNTS & FEeDBAcK @MOrTENdK

qUesTioNs