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

Embed Size (px)

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

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