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

  • Published on
    16-Aug-2015

  • View
    495

  • Download
    1

Transcript

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