[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

@MorTenDk
CLAsSy
MAInTAInER
GEEk
RÖYALe
THE ANGrY
THEmER
TaG1
CONsULTiNG

sTocKhoLm
sYndRome

ACTuAL dRUPaL7
MARkUP

“IT’S A FEAtUrE”
dIviTis
<DIV><DIV><DIV><DIV><DIV><DIV><DIV><DI
V><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”>
fEatUre
THE 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 cOntRol
ThE
OF mARKuP & CSs

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

REAdY?

tWig
DRUpAl 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’) }}
fUncTion
PIBe
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

cLasSy
THE DRUpAl 8 BAsE ThEmE

7
corE
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 gRouPs
LAYoUT
FIElD
DATaSeT
VIEwS
BLOcK CONtENT-EDIt
CONtEnT
MISc
USEr
NAViGATiON
FORm

dEfiNe BasEthEme
base theme: classy
THEmENAmE.InFO.yML

sEtup
SETtING UP a THeME

[ROOt]/ThEMEs/[THEmENAmE]
I LiVE wHERe NOw ?

tHemE cOnfIg FilEs
*.InFO.yMl
*.LiBRArIES.YML
*.BrEAKpOINtS.YmL
*.ThEmE

*.inFo.Yml
THEmE CoNFIgURAtION, CSs & jS

BASiC
INFo
REGiOnS
LIBrARIeS
REMoVE cSS

*.liBraRieS.yMl
ADD 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 Lib
BASe
LAYoUt
COMpONEnT
STAtE
THEmE

{{ attach_library('classy/book-navigation') }}
cSs FilEs In TemPlaTe

[*].BreAkpOinTs.Yml
RESpONSiVE iMAGeS

*.BrEAKpOINtS.YmL

[*].TheMe
WAS
PHPtEMPlATE.PhP

.TheMe
.LIbRARiES.yML
.THeME

tOols
HOW 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

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 fiElds
FIElD.HtML.tWiG FIElD.HtML.tWiG FIElD.HtML.tWiG FIElD.HtML.tWiG

lAyoUt
THE MAGiC Of WItHOUt

@moRtenDk #dRupaLTWIg #srijAnwWNODe.HTmL.TwIG

{{ content|without(‘field’) }}
wIthOut fuNctIon
PIBe
NAMe
TWIg FUnCTIoN
VaR

conTeNt
imaGe
tagS
lAyoUt

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

CONtEnT
nOde.htMl.Twig

CONtENT.FIElD_ImAgE

CONtENT.FIElD_TaGS

mArkUp
OVErWRItE 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

NODe.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

tWigBloCk
MORe 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

CAUsE WhAT cOULd GO WROnG…
lIve deMo

TINyURL.COM/DIViTiS
dIviTis…

DRUpAL.oRG/tHEMe-GUiDe/8
DRUpAL.oRG/cODInG-StANDaRDS/CSS
SMAcSS.cOM 
TWIg.SEnSIOlABS.ORG/DOCuMENtATIoN
lInks

dOwnLoaD d8
BETa 14! - ONlY 11 BLoCKErS LeFT
DRUpAL.oRG/dRUPaL8

WEEkLY mEETiNG’S
THUrSDAy 1700 CEt
#DruPalTwig

USE TWItTER
#SRiJANwW
QUEsTIOnS, cOMMeNTS & FEeDBAcK
@MOrTENdK
qUesTioNs

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

More Related Content

Viewers also liked

More from Srijan Technologies

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