[srijan wednesday webinars] drupal 8: goodbye to 10 years of theming headaches
TRANSCRIPT
![Page 1: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/1.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
tHemIngSRIjAN wEDNeSDAy WEbINArS
DRUpAL
![Page 2: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/2.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
DRUpAl 8 BEtA 14 (DRuPAL.ORG/DRUpAl-8.0.0-BEtA1)
WEBiNAR D8 THeMe GIThUB.cOM/mORTeNDK/WEBiNAR-SRIjANWw
dOwnLoad
![Page 3: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/3.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
@MorTenDk
CLAsSy MAInTAInERGEEk
RÖYALe THE ANGrY THEmER
TaG1 CONsULTiNG
![Page 4: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/4.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
sTocKhoLm sYndRome
![Page 5: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/5.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
ACTuAL dRUPaL7 MARkUP
![Page 6: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/6.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
“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>
![Page 7: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/7.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
5000LINeS Of PHpTEMpLATe.PHp
TotAllY oK
![Page 8: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/8.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
<div class=“foo bar baz foo-more-more bar-more-yet another one”>
fEatUreTHE CLAsS SoUP IS AnOTHeR
![Page 9: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/9.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
nO mOre aAaaRgh!
![Page 10: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/10.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
nEw
tHemE eNgiNe
GOOd-BYe PHPtEMPlAtEHELlO TwIG
![Page 11: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/11.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
tHemE fUncTioNs
dEad!
![Page 12: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/12.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
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
![Page 13: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/13.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
tHemE iS iN cOntRolThE
OF mARKuP & CSs
![Page 14: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/14.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
uNleArn pHptEmpLa
te<? pHP dIe(‘PHPtEMPlAtE’) ?>
![Page 15: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/15.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
REAdY?
![Page 16: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/16.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
tWigDRUpAl 8
![Page 17: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/17.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
IS a “MODeRN” TEmPLAtE LaNGUaGe -> sYMPhONY
USEd BY OTHeR SySTEmS + ItS EaSY tO LeARN :)
tWig
![Page 18: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/18.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
{{ var }}
{# comment #}
oUtpUt
![Page 19: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/19.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
{{ data.is.here }}
{{ also.this[#hashtags] }}
vAr DriLliNg$yo[‘drupal_where ’]->is[‘und’][0]->my_data7
![Page 20: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/20.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
{{ var|makemepretty(‘now’) }}
fUncTionPIBe
TWIg FUnCTIoNVaR
![Page 21: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/21.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
{{ username|uppercase }}
MORTENDK
fUncTion(mortendk)
![Page 22: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/22.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
{{ ‘Copenhagen’|t }} København
{% trans %} Copenhagen {{ var }} {% endtrans %}
tRanSlaTe
![Page 23: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/23.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
{% if person=“mortendk” %} <h1>Loves Drupal8</h1> {% endif %}
cOntRol
![Page 24: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/24.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
{{ sushi|raw}}
aUtoEscApe
SECuRITy IS SOMeTHInG DEVeLOPeRS LIKe
![Page 25: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/25.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
{% set foo = “bar” %}
{{ foo }}
bar
cReaTe Var
![Page 26: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/26.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
TWIg.SEnSIOlABS.ORG/DOCuMENtATIoN
tWig
![Page 27: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/27.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
cLasSyTHE DRUpAl 8 BAsE ThEmE
![Page 28: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/28.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
7corE
claSsy
<HTmL> .CSs CLAsS=“FoO”
<HTmL> .CSs CLAsS=“FoO”
![Page 29: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/29.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
bAseTheMe
corE claSsy
my ThemE
? barTik
sevEn$VArS
![Page 30: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/30.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
bAseTheMe
<div> {{ foo }} </div>
corE claSsy“MY tHEMe”
NOT DEFiNeD
![Page 31: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/31.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
bAseTheMe
<div class=“node node—article”> {{ foo }} </div>
corE claSsy“MY tHEMe”
BASe THeME: CLAsSY
![Page 32: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/32.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
gRouPing
![Page 33: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/33.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
tEmpLatE gRouPsLAYoUT
FIElD
DATaSeT
VIEwS
BLOcK CONtENT-EDIt
CONtEnT
MISc
USEr
NAViGATiON
FORm
![Page 34: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/34.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
dEfiNe BasEthEme
base theme: classy
THEmENAmE.InFO.yML
![Page 35: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/35.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
sEtupSETtING UP a THeME
![Page 36: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/36.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
[ROOt]/ThEMEs/[THEmENAmE]
I LiVE wHERe NOw ?
![Page 37: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/37.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
tHemE cOnfIg FilEs
*.InFO.yMl *.LiBRArIES.YML *.BrEAKpOINtS.YmL *.ThEmE
![Page 38: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/38.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
*.inFo.YmlTHEmE CoNFIgURAtION, CSs & jS
![Page 39: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/39.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
BASiC INFo
REGiOnS
LIBrARIeS
REMoVE cSS
![Page 40: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/40.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
![Page 41: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/41.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
*.liBraRieS.yMlADD Js & CSs FIlES
![Page 42: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/42.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
.INfO.YmL
.LIbRARiES.yML
![Page 43: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/43.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
NAMe
DEPeNDEnCIEs
CSS FILeS
*.liBraRieS.yMl
JS fILEs
![Page 44: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/44.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
global: version: VERSION css: component: css/user/user.theme.css: {} theme: css/layout.css: {}
cSs LibBASe LAYoUt COMpONEnT STAtE THEmE
![Page 45: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/45.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
{{ attach_library('classy/book-navigation') }}
cSs FilEs In TemPlaTe
![Page 46: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/46.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
[*].BreAkpOinTs.YmlRESpONSiVE iMAGeS
![Page 47: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/47.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
*.BrEAKpOINtS.YmL
![Page 48: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/48.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
*.BrEAKpOINtS.YmL
![Page 49: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/49.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
[*].TheMe
WAS PHPtEMPlATE.PhP
![Page 50: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/50.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
.TheMe
.LIbRARiES.yML
.THeME
![Page 51: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/51.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
tOolsHOW TO fIND STUfF & DEbUg
![Page 52: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/52.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
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
![Page 53: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/53.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
DOWnLOAd DEvEL mODUlE INStALL DEVeL + KINt
INStALL DRUsH DRUsH En KInT
DOCs.DRuSH.oRG/eN/MaSTEr/INsTALl/
dEveL mOduLe
![Page 54: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/54.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
dIsaBle csS cAche
![Page 55: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/55.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
dEbuG fTw
LETs LOoK At THe THeME nOw (LIvE CoDE dEMO)
![Page 56: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/56.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
FILe NAmE SuGGEsTIOnS
![Page 57: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/57.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
kInt{{ kint( foo ) }}
KRUmO FoR DrUPAl 8
{{ content.field_image }}
![Page 58: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/58.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
TWIg DEbUg: SITeS/AlL/DeFAUlT/SeRVIcES.yMl
DRUsH Cr {{ KInT(FoO) }}
dEbuG:
![Page 59: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/59.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
tEmpLatE sTruCtuRe
HOW IS iT StRUCtUREd IN D8
![Page 60: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/60.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
hTml
HTMl.HTmL.TwIG
CSS + Js
HEAdER
![Page 61: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/61.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
HTMl.HTmL.TwIG
pAge
PAGe.HTmL.TwIG
![Page 62: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/62.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
HTMl.HTmL.TwIGREGiON.hTML.TWIg
REGiON.hTML.TWIg
REGiON.hTML.TWIg
rEgiOn's
PAGe.HTmL.TwIG
![Page 63: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/63.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
HTMl.HTmL.TwIG
cOntEnt
BLOcK.HtML.tWiG NODe.HTmL.TwIG VIEw.HTmL.TwIG
REGiON.hTML.TWIg
![Page 64: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/64.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
nOde
FIElD.HtML.tWiG
NODe.HTmL.TwIG
FIElD.HtML.tWiGFIElD.HtML.tWiG
FIElD-—IMAgE.HtML.tWiGFIElD.HtML.tWiG
![Page 65: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/65.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
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
FIElD.HtML.tWiG FIElD.HtML.tWiG FIElD.HtML.tWiG FIElD.HtML.tWiG
FIElD.HtML.tWiG FIElD.HtML.tWiG FIElD.HtML.tWiG FIElD.HtML.tWiG
![Page 66: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/66.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
lAyoUtTHE MAGiC Of WItHOUt
![Page 67: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/67.jpg)
@moRtenDk #dRupaLTWIg #srijAnwWNODe.HTmL.TwIG
![Page 68: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/68.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
![Page 69: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/69.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
{{ content|without(‘field’) }}
wIthOut fuNctIonPIBe
NAMeTWIg FUnCTIoN
VaR
![Page 70: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/70.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
conTeNt
imaGe
tagS
lAyoUt
![Page 71: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/71.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
{{ coNtenT }}
{{ imAge }}
{{ content }}
{{ teXt }} {{ taGs }}
![Page 72: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/72.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
{{ coNtenT | WithOut(*) }}
{{ imAge }}
{{ content|without(‘image’) }}
{{ content.image }}
{{ teXt }} {{ taGs }}
![Page 73: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/73.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
{{ coNtenT | WithOut(**) }}
{{ imAge }}
{{ content|without(‘image’,‘tags’) }}
{{ content.image }}
{{ teXt }} {{ taGs }}
{{ content.tags }}
![Page 74: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/74.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
{{ coNtenT | WithOut(**) }}
{{ imAge }}
{{ content|without(‘image’,‘tags’) }}
{{ content.image }}
{{ teXt }} {{ taGs }}
{{ content.tags }}
{{ neW }}
NEW FIElD
![Page 75: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/75.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
CONtEnTnOde.htMl.Twig
![Page 76: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/76.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
CONtENT.FIElD_ImAgE
![Page 77: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/77.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
CONtENT.FIElD_TaGS
![Page 78: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/78.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
mArkUpOVErWRItE FiELDs
![Page 79: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/79.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
nOde.htMl.Twig
![Page 80: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/80.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
fIle naMe SugGesTioNs
![Page 81: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/81.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
fIelD-[Foo].hTml.twIg
FIElD--nODE--FIeLD-tAGS--ARtICLe.HTmL.TwIG
![Page 82: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/82.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
![Page 83: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/83.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
<div {{ attributes }}> class=“foo” data-drupal-foo aria-hidden=“true”
aTtrIbuTes
![Page 84: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/84.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
CLAsSY
<DIv CLaSs=“FOO FOO-BAR FOO-BAR-BaZ”>
*.TpL.PhP
THEmE FuNCTiOnS
PREpROCeSS
$VArS
DRUpAL7
7
![Page 85: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/85.jpg)
@moRtenDk #dRupaLTWIg #srijAnwWNODe.HTmL.TwIG
![Page 86: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/86.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
{% set classes = [ 'tags', 'field-' ~ field_name|clean_class ~ ' ] %}
<div {{ attributes.addClass(classes) }}>…</div>
<div class=“tags field-tags”>…
aDdcLass
![Page 87: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/87.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
<i {{ attributes.removeClass(red) }}> … </i>
<i class=“blue”>…</i>
<div class=“red blue”> … </div>BAD MODuLE oUTPuT
rEmoVe ClaSs
![Page 88: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/88.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
CLAsSYMODuLECORe
<DIv CLaSs=“CORe”>
ESSeNTIaL ClASSeS Ex: “IS-vISIbLE”
![Page 89: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/89.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
CLAsSYMODuLECORe
<DIv CLaSs=“CORe MOdUlE”>
$vaR[‘attRibuTes’]->AddCLass(‘modUle’)
![Page 90: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/90.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
CLAsSYMODuLECORe
<DIv CLaSs=“CORe MOdULE THEmE”>
{{ ATtRIBuTES.ADDcLASs(‘THEmE’) }}
![Page 91: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/91.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
CLAsSYMODuLECORe
<DIv CLaSs=“CORe THeME”>
{{ ATtRIBuTES.REMoVe(‘MODuLE’) }}
![Page 92: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/92.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
CLAsSYMODuLECORe
<DIv CLaSs=“THEmE”>
{{ ATtRIBuTES.REMoVe(‘MODuLE’,’CORe’) }}
![Page 93: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/93.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
jS- PreFix
<DIv CLaSs=“JS-fOO fOO”>…
$(.jS-FoO) .FOo{…}
![Page 94: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/94.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
<div class="blablabla"> {{ attributes .removeClass(‘blablabla’) .addClass(‘hero-main’) .setAttribute('id', 'top') }} <div id="top" class="hero-main">
aTtrIbuTes
![Page 95: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/95.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
tWigBloCkMORe COoLNEsS FrOM tWiG
![Page 96: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/96.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
datA (pAge.Html.twiG)
PAGe.HTmL.TwIGD8
datA (pAge.Html.twiG)
![Page 97: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/97.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
datA (pAge.Html.twiG)
{% block foo %} {% endblock %}
PAGe.HTmL.TwIGD8
datA (pAge.Html.twiG)
![Page 98: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/98.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
datA (pAge.Html.twiG)
(paGe-—froNt.hTml.Twig)
{% extends "page.html.twig" %}
PAGe.HTmL.TwIGD8
datA (pAge.Html.twiG)
![Page 99: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/99.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
PAGe.HTmL.TwIG
PAGe—FROnT.HtML.tWiG
![Page 100: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/100.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
PAGe.HTmL.TwIG
PAGe—FROnT.HtML.tWiG
![Page 101: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/101.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
CAUsE WhAT cOULd GO WROnG…
lIve deMo
![Page 103: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/103.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
DRUpAL.oRG/tHEMe-GUiDe/8
DRUpAL.oRG/cODInG-StANDaRDS/CSS
SMAcSS.cOM
TWIg.SEnSIOlABS.ORG/DOCuMENtATIoN
lInks
![Page 104: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/104.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
dOwnLoaD d8
BETa 14! - ONlY 11 BLoCKErS LeFT
DRUpAL.oRG/dRUPaL8
![Page 105: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/105.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
WEEkLY mEETiNG’S THUrSDAy 1700 CEt
#DruPalTwig
![Page 106: [Srijan Wednesday Webinars] Drupal 8: Goodbye to 10 Years of Theming Headaches](https://reader037.vdocuments.mx/reader037/viewer/2022102817/55d096d6bb61ebed0f8b46e9/html5/thumbnails/106.jpg)
@moRtenDk #dRupaLTWIg #srijAnwW
USE TWItTER #SRiJANwW
QUEsTIOnS, cOMMeNTS & FEeDBAcK @MOrTENdK
qUesTioNs