Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
@moRtenDk #dRupaLTWIg #srijAnwW tHemIngSRIjAN wEDNeSDAy WEbINArS DRUpAL
@moRtenDk #dRupaLTWIg #srijAnwW DRUpAl 8 BEtA 14 (DRuPAL.ORG/DRUpAl-8.0.0-BEtA1) WEBiNAR D8 THeMe GIThUB.cOM/mORTeNDK/WEBi...
@moRtenDk #dRupaLTWIg #srijAnwW @MorTenDk CLAsSy MAInTAInER GEEk RÖYALe THE ANGrY THEmER TaG1 CONsULTiNG
@moRtenDk #dRupaLTWIg #srijAnwW sTocKhoLm sYndRome
@moRtenDk #dRupaLTWIg #srijAnwW ACTuAL dRUPaL7 MARkUP
@moRtenDk #dRupaLTWIg #srijAnwW “IT’S A FEAtUrE” dIviTis <DIV><DIV><DIV><DIV><DIV><DIV><DIV><DI V><DIV><DIV><DIV><DIV><DIV...
@moRtenDk #dRupaLTWIg #srijAnwW 5000LINeS Of PHpTEMpLATe.PHp TotAllY oK
@moRtenDk #dRupaLTWIg #srijAnwW <div class=“foo bar baz foo-more-more bar- more-yet another one”> fEatUre THE CLAsS SoUP I...
@moRtenDk #dRupaLTWIg #srijAnwW nO mOre aAaaRgh!
@moRtenDk #dRupaLTWIg #srijAnwW nEw tHemE eNgiNe GOOd-BYe PHPtEMPlAtEHELlO TwIG
@moRtenDk #dRupaLTWIg #srijAnwW tHemE fUncTioNs dEad!
@moRtenDk #dRupaLTWIg #srijAnwW tWig tEmpLatEs EVErYTHiNG iS BLOcK.HtML.tWiG MARk.HTmL.TwIG TABlE.HtML.tWiG PAGe.HTmL.TwIG...
@moRtenDk #dRupaLTWIg #srijAnwW tHemE iS iN cOntRol ThE OF mARKuP & CSs
@moRtenDk #dRupaLTWIg #srijAnwW uNleArn pHptEmpLa te <? pHP dIe(‘PHPtEMPlAtE’) ?>
@moRtenDk #dRupaLTWIg #srijAnwW REAdY?
@moRtenDk #dRupaLTWIg #srijAnwW tWig DRUpAl 8
@moRtenDk #dRupaLTWIg #srijAnwW IS a “MODeRN” TEmPLAtE LaNGUaGe -> sYMPhONY USEd BY OTHeR SySTEmS + ItS EaSY tO LeARN :) t...
@moRtenDk #dRupaLTWIg #srijAnwW {{ var }} {# comment #} oUtpUt
@moRtenDk #dRupaLTWIg #srijAnwW {{ data.is.here }} {{ also.this[#hashtags] }} vAr DriLliNg $yo[‘drupal_where ’]->is[‘und’]...
@moRtenDk #dRupaLTWIg #srijAnwW {{ var|makemepretty(‘now’) }} fUncTion PIBe TWIg FUnCTIoNVaR
@moRtenDk #dRupaLTWIg #srijAnwW {{ username|uppercase }} MORTENDK fUncTion (mortendk)
@moRtenDk #dRupaLTWIg #srijAnwW {{ ‘Copenhagen’|t }} København {% trans %} Copenhagen {{ var }} {% endtrans %} tRanSlaTe
@moRtenDk #dRupaLTWIg #srijAnwW {% if person=“mortendk” %} <h1>Loves Drupal8</h1> {% endif %} cOntRol
@moRtenDk #dRupaLTWIg #srijAnwW {{ sushi|raw}} aUtoEscApe SECuRITy IS SOMeTHInG DEVeLOPeRS LIKe
@moRtenDk #dRupaLTWIg #srijAnwW {% set foo = “bar” %} {{ foo }} bar cReaTe Var
@moRtenDk #dRupaLTWIg #srijAnwW TWIg.SEnSIOlABS.ORG/DOCuMENtATIoN tWig
@moRtenDk #dRupaLTWIg #srijAnwW cLasSy THE DRUpAl 8 BAsE ThEmE
@moRtenDk #dRupaLTWIg #srijAnwW 7 corE claSsy <HTmL> .CSs CLAsS=“FoO” <HTmL> .CSs CLAsS=“FoO”
@moRtenDk #dRupaLTWIg #srijAnwW bAseTheMe corE claSsy my ThemE ? barTik sevEn $VArS
@moRtenDk #dRupaLTWIg #srijAnwW bAseTheMe <div> {{ foo }} </div> corE claSsy“MY tHEMe” NOT DEFiNeD
@moRtenDk #dRupaLTWIg #srijAnwW bAseTheMe <div class=“node node—article”> {{ foo }} </div> corE claSsy“MY tHEMe” BASe THeM...
@moRtenDk #dRupaLTWIg #srijAnwW gRouPing
@moRtenDk #dRupaLTWIg #srijAnwW tEmpLatE gRouPs LAYoUT FIElD DATaSeT VIEwS BLOcK CONtENT-EDIt CONtEnT MISc USEr NAViGATiON...
@moRtenDk #dRupaLTWIg #srijAnwW dEfiNe BasEthEme base theme: classy THEmENAmE.InFO.yML
@moRtenDk #dRupaLTWIg #srijAnwW sEtup SETtING UP a THeME
@moRtenDk #dRupaLTWIg #srijAnwW [ROOt]/ThEMEs/[THEmENAmE] I LiVE wHERe NOw ?
@moRtenDk #dRupaLTWIg #srijAnwW tHemE cOnfIg FilEs *.InFO.yMl *.LiBRArIES.YML *.BrEAKpOINtS.YmL *.ThEmE
@moRtenDk #dRupaLTWIg #srijAnwW *.inFo.Yml THEmE CoNFIgURAtION, CSs & jS
@moRtenDk #dRupaLTWIg #srijAnwW BASiC INFo REGiOnS LIBrARIeS REMoVE cSS
@moRtenDk #dRupaLTWIg #srijAnwW
@moRtenDk #dRupaLTWIg #srijAnwW *.liBraRieS.yMl ADD Js & CSs FIlES
@moRtenDk #dRupaLTWIg #srijAnwW .INfO.YmL .LIbRARiES.yML
@moRtenDk #dRupaLTWIg #srijAnwW NAMe DEPeNDEnCIEs CSS FILeS *.liBraRieS.yMl JS fILEs
@moRtenDk #dRupaLTWIg #srijAnwW global: version: VERSION css: component: css/user/user.theme.css: {} theme: css/layout.css...
@moRtenDk #dRupaLTWIg #srijAnwW {{ attach_library('classy/book-navigation') }} cSs FilEs In TemPlaTe
@moRtenDk #dRupaLTWIg #srijAnwW [*].BreAkpOinTs.Yml RESpONSiVE iMAGeS
@moRtenDk #dRupaLTWIg #srijAnwW *.BrEAKpOINtS.YmL
@moRtenDk #dRupaLTWIg #srijAnwW *.BrEAKpOINtS.YmL
@moRtenDk #dRupaLTWIg #srijAnwW [*].TheMe WAS PHPtEMPlATE.PhP
@moRtenDk #dRupaLTWIg #srijAnwW .TheMe .LIbRARiES.yML .THeME
@moRtenDk #dRupaLTWIg #srijAnwW tOols HOW TO fIND STUfF & DEbUg
@moRtenDk #dRupaLTWIg #srijAnwW sEttIngS.pHp if (file_exists(__DIR__ . '/settings.local.php')) { include __DIR__ . '/setti...
@moRtenDk #dRupaLTWIg #srijAnwW DOWnLOAd DEvEL mODUlE INStALL DEVeL + KINt INStALL DRUsH DRUsH En KInT DOCs.DRuSH.oRG/eN/M...
@moRtenDk #dRupaLTWIg #srijAnwW dIsaBle csS cAche
@moRtenDk #dRupaLTWIg #srijAnwW dEbuG fTw LETs LOoK At THe THeME nOw (LIvE CoDE dEMO)
@moRtenDk #dRupaLTWIg #srijAnwW FILe NAmE SuGGEsTIOnS
@moRtenDk #dRupaLTWIg #srijAnwW kInt {{ kint( foo ) }} KRUmO FoR DrUPAl 8 {{ content.field_image }}
@moRtenDk #dRupaLTWIg #srijAnwW TWIg DEbUg:
 SITeS/AlL/DeFAUlT/SeRVIcES.yMl DRUsH Cr
 {{ KInT(FoO) }} dEbuG:
@moRtenDk #dRupaLTWIg #srijAnwW tEmpLatE sTruCtuRe HOW IS iT StRUCtUREd IN D8
@moRtenDk #dRupaLTWIg #srijAnwW hTml HTMl.HTmL.TwIG CSS + Js HEAdER
@moRtenDk #dRupaLTWIg #srijAnwW HTMl.HTmL.TwIG pAge PAGe.HTmL.TwIG
@moRtenDk #dRupaLTWIg #srijAnwW HTMl.HTmL.TwIGREGiON.hTML.TWIg REGiON.hTML.TWIg REGiON.hTML.TWIg rEgiOn's PAGe.HTmL.TwIG
@moRtenDk #dRupaLTWIg #srijAnwW HTMl.HTmL.TwIG cOntEnt BLOcK.HtML.tWiG NODe.HTmL.TwIG VIEw.HTmL.TwIG REGiON.hTML.TWIg
@moRtenDk #dRupaLTWIg #srijAnwW nOde FIElD.HtML.tWiG NODe.HTmL.TwIG FIElD.HtML.tWiGFIElD.HtML.tWiG FIElD-—IMAgE.HtML.tWiGF...
@moRtenDk #dRupaLTWIg #srijAnwW aLl The fiElds FIElD.HtML.tWiG FIElD.HtML.tWiG FIElD.HtML.tWiG FIElD.HtML.tWiG FIElD.HtML....
@moRtenDk #dRupaLTWIg #srijAnwW lAyoUt THE MAGiC Of WItHOUt
@moRtenDk #dRupaLTWIg #srijAnwWNODe.HTmL.TwIG
@moRtenDk #dRupaLTWIg #srijAnwW
@moRtenDk #dRupaLTWIg #srijAnwW {{ content|without(‘field’) }} wIthOut fuNctIon PIBe NAMe TWIg FUnCTIoN VaR
@moRtenDk #dRupaLTWIg #srijAnwW conTeNt imaGe tagS lAyoUt
@moRtenDk #dRupaLTWIg #srijAnwW {{ coNtenT }} {{ imAge }} {{ content }} {{ teXt }} {{ taGs }}
@moRtenDk #dRupaLTWIg #srijAnwW {{ coNtenT | WithOut(*) }} {{ imAge }} {{ content|without(‘image’) }} {{ content.image }} ...
@moRtenDk #dRupaLTWIg #srijAnwW {{ coNtenT | WithOut(**) }} {{ imAge }} {{ content|without(‘image’,‘tags’) }} {{ content.i...
@moRtenDk #dRupaLTWIg #srijAnwW {{ coNtenT | WithOut(**) }} {{ imAge }} {{ content|without(‘image’,‘tags’) }} {{ content.i...
@moRtenDk #dRupaLTWIg #srijAnwW CONtEnT nOde.htMl.Twig
@moRtenDk #dRupaLTWIg #srijAnwW CONtENT.FIElD_ImAgE
@moRtenDk #dRupaLTWIg #srijAnwW CONtENT.FIElD_TaGS
@moRtenDk #dRupaLTWIg #srijAnwW mArkUp OVErWRItE FiELDs
@moRtenDk #dRupaLTWIg #srijAnwW nOde.htMl.Twig
@moRtenDk #dRupaLTWIg #srijAnwW fIle naMe SugGesTioNs
@moRtenDk #dRupaLTWIg #srijAnwW fIelD-[Foo].hTml.twIg FIElD--nODE--FIeLD-tAGS--ARtICLe.HTmL.TwIG
@moRtenDk #dRupaLTWIg #srijAnwW
@moRtenDk #dRupaLTWIg #srijAnwW <div {{ attributes }}> class=“foo” data-drupal-foo aria-hidden=“true” aTtrIbuTes
@moRtenDk #dRupaLTWIg #srijAnwW CLAsSY <DIv CLaSs=“FOO FOO-BAR FOO-BAR-BaZ”> *.TpL.PhP THEmE FuNCTiOnS PREpROCeSS $VArS DR...
@moRtenDk #dRupaLTWIg #srijAnwW NODe.HTmL.TwIG
@moRtenDk #dRupaLTWIg #srijAnwW {% set classes = [ 'tags', 'field-' ~ field_name|clean_class ~ ' ] %} <div {{ attributes.a...
@moRtenDk #dRupaLTWIg #srijAnwW <i {{ attributes.removeClass(red) }}> … </i> 
 <i class=“blue”>…</i> <div class=“red blue”...
@moRtenDk #dRupaLTWIg #srijAnwW CLAsSYMODuLECORe <DIv CLaSs=“CORe”> ESSeNTIaL ClASSeS Ex: “IS-vISIbLE”
@moRtenDk #dRupaLTWIg #srijAnwW CLAsSYMODuLECORe <DIv CLaSs=“CORe MOdUlE”> $vaR[‘attRibuTes’]->AddCLass(‘modUle’)
@moRtenDk #dRupaLTWIg #srijAnwW CLAsSYMODuLECORe <DIv CLaSs=“CORe MOdULE THEmE”> {{ ATtRIBuTES.ADDcLASs(‘THEmE’) }}
@moRtenDk #dRupaLTWIg #srijAnwW CLAsSYMODuLECORe <DIv CLaSs=“CORe THeME”> {{ ATtRIBuTES.REMoVe(‘MODuLE’) }}
@moRtenDk #dRupaLTWIg #srijAnwW CLAsSYMODuLECORe <DIv CLaSs=“THEmE”> {{ ATtRIBuTES.REMoVe(‘MODuLE’,’CORe’) }}
@moRtenDk #dRupaLTWIg #srijAnwW jS- PreFix <DIv CLaSs=“JS-fOO fOO”>… $(.jS-FoO) .FOo{…}
@moRtenDk #dRupaLTWIg #srijAnwW <div class="blablabla"> {{ attributes .removeClass(‘blablabla’) .addClass(‘hero-main’) .se...
@moRtenDk #dRupaLTWIg #srijAnwW tWigBloCk MORe COoLNEsS FrOM tWiG
@moRtenDk #dRupaLTWIg #srijAnwW datA (pAge.Html.twiG) PAGe.HTmL.TwIGD8 datA (pAge.Html.twiG)
@moRtenDk #dRupaLTWIg #srijAnwW datA (pAge.Html.twiG) {% block foo %} {% endblock %} PAGe.HTmL.TwIGD8 datA (pAge.Html.twiG)
@moRtenDk #dRupaLTWIg #srijAnwW datA (pAge.Html.twiG) (paGe-—froNt.hTml.Twig) {% extends "page.html.twig" %} PAGe.HTmL.TwI...
@moRtenDk #dRupaLTWIg #srijAnwW PAGe.HTmL.TwIG PAGe—FROnT.HtML.tWiG
@moRtenDk #dRupaLTWIg #srijAnwW PAGe.HTmL.TwIG PAGe—FROnT.HtML.tWiG
@moRtenDk #dRupaLTWIg #srijAnwW CAUsE WhAT cOULd GO WROnG… lIve deMo
@moRtenDk #dRupaLTWIg #srijAnwW TINyURL.COM/DIViTiS dIviTis…
@moRtenDk #dRupaLTWIg #srijAnwW DRUpAL.oRG/tHEMe-GUiDe/8 DRUpAL.oRG/cODInG-StANDaRDS/CSS SMAcSS.cOM
 TWIg.SEnSIOlABS.ORG/D...
@moRtenDk #dRupaLTWIg #srijAnwW dOwnLoaD d8 BETa 14! - ONlY 11 BLoCKErS LeFT DRUpAL.oRG/dRUPaL8
@moRtenDk #dRupaLTWIg #srijAnwW WEEkLY mEETiNG’S THUrSDAy 1700 CEt #DruPalTwig
@moRtenDk #dRupaLTWIg #srijAnwW USE TWItTER #SRiJANwW QUEsTIOnS, cOMMeNTS & FEeDBAcK @MOrTENdK qUesTioNs
Upcoming SlideShare
Loading in …5
×

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

2,513 views

Published on

Drupal 8 has many new and exciting features, but none are as radical and essential as the changes made to the theme system. For over 10 years, Drupal's front end was designed and built by developers who tried their very best to figure out what the front end needed. The lack of dedicated front-enders in core resulted in a less than ideal front end architecture.

In this webinar, our speaker would share how Drupal 8 and Twig have changed it all. He would cover what’s new in Drupal 8 theme system, and how to use Twig to relieve the headache that you, as a themer, have been suffering from.

You can watch the complete webinar recording here: https://youtu.be/PxEpnGI5z6w

Published in: Software
no profile picture user

  • Login to see the comments

[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 RÖYALe 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 “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>
  7. 7. @moRtenDk #dRupaLTWIg #srijAnwW 5000LINeS Of PHpTEMpLATe.PHp TotAllY oK
  8. 8. @moRtenDk #dRupaLTWIg #srijAnwW <div class=“foo bar baz foo-more-more bar- more-yet another one”> 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 <? pHP dIe(‘PHPtEMPlAtE’) ?>
  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 }} København {% trans %} Copenhagen {{ var }} {% endtrans %} tRanSlaTe
  23. 23. @moRtenDk #dRupaLTWIg #srijAnwW {% if person=“mortendk” %} <h1>Loves Drupal8</h1> {% 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 <HTmL> .CSs CLAsS=“FoO” <HTmL> .CSs CLAsS=“FoO”
  29. 29. @moRtenDk #dRupaLTWIg #srijAnwW bAseTheMe corE claSsy my ThemE ? barTik sevEn $VArS
  30. 30. @moRtenDk #dRupaLTWIg #srijAnwW bAseTheMe <div> {{ foo }} </div> corE claSsy“MY tHEMe” NOT DEFiNeD
  31. 31. @moRtenDk #dRupaLTWIg #srijAnwW bAseTheMe <div class=“node node—article”> {{ foo }} </div> corE claSsy“MY 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 <div {{ attributes }}> class=“foo” data-drupal-foo aria-hidden=“true” aTtrIbuTes
  84. 84. @moRtenDk #dRupaLTWIg #srijAnwW CLAsSY <DIv CLaSs=“FOO FOO-BAR FOO-BAR-BaZ”> *.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 ~ ' ] %} <div {{ attributes.addClass(classes) }}>…</div> 
 <div class=“tags field-tags”>… aDdcLass
  87. 87. @moRtenDk #dRupaLTWIg #srijAnwW <i {{ attributes.removeClass(red) }}> … </i> 
 <i class=“blue”>…</i> <div class=“red blue”> … </div> BAD MODuLE oUTPuT rEmoVe ClaSs
  88. 88. @moRtenDk #dRupaLTWIg #srijAnwW CLAsSYMODuLECORe <DIv CLaSs=“CORe”> ESSeNTIaL ClASSeS Ex: “IS-vISIbLE”
  89. 89. @moRtenDk #dRupaLTWIg #srijAnwW CLAsSYMODuLECORe <DIv CLaSs=“CORe MOdUlE”> $vaR[‘attRibuTes’]->AddCLass(‘modUle’)
  90. 90. @moRtenDk #dRupaLTWIg #srijAnwW CLAsSYMODuLECORe <DIv CLaSs=“CORe MOdULE THEmE”> {{ ATtRIBuTES.ADDcLASs(‘THEmE’) }}
  91. 91. @moRtenDk #dRupaLTWIg #srijAnwW CLAsSYMODuLECORe <DIv CLaSs=“CORe THeME”> {{ ATtRIBuTES.REMoVe(‘MODuLE’) }}
  92. 92. @moRtenDk #dRupaLTWIg #srijAnwW CLAsSYMODuLECORe <DIv CLaSs=“THEmE”> {{ ATtRIBuTES.REMoVe(‘MODuLE’,’CORe’) }}
  93. 93. @moRtenDk #dRupaLTWIg #srijAnwW jS- PreFix <DIv CLaSs=“JS-fOO fOO”>… $(.jS-FoO) .FOo{…}
  94. 94. @moRtenDk #dRupaLTWIg #srijAnwW <div class="blablabla"> {{ attributes .removeClass(‘blablabla’) .addClass(‘hero-main’) .setAttribute('id', 'top') }} <div id="top" class="hero-main"> aTtrIbuTes
  95. 95. @moRtenDk #dRupaLTWIg #srijAnwW tWigBloCk MORe COoLNEsS FrOM tWiG
  96. 96. @moRtenDk #dRupaLTWIg #srijAnwW datA (pAge.Html.twiG) PAGe.HTmL.TwIGD8 datA (pAge.Html.twiG)
  97. 97. @moRtenDk #dRupaLTWIg #srijAnwW datA (pAge.Html.twiG) {% block foo %} {% endblock %} PAGe.HTmL.TwIGD8 datA (pAge.Html.twiG)
  98. 98. @moRtenDk #dRupaLTWIg #srijAnwW datA (pAge.Html.twiG) (paGe-—froNt.hTml.Twig) {% extends "page.html.twig" %} PAGe.HTmL.TwIGD8 datA (pAge.Html.twiG)
  99. 99. @moRtenDk #dRupaLTWIg #srijAnwW PAGe.HTmL.TwIG PAGe—FROnT.HtML.tWiG
  100. 100. @moRtenDk #dRupaLTWIg #srijAnwW PAGe.HTmL.TwIG PAGe—FROnT.HtML.tWiG
  101. 101. @moRtenDk #dRupaLTWIg #srijAnwW CAUsE WhAT cOULd GO WROnG… lIve deMo
  102. 102. @moRtenDk #dRupaLTWIg #srijAnwW TINyURL.COM/DIViTiS dIviTis…
  103. 103. @moRtenDk #dRupaLTWIg #srijAnwW DRUpAL.oRG/tHEMe-GUiDe/8 DRUpAL.oRG/cODInG-StANDaRDS/CSS SMAcSS.cOM
 TWIg.SEnSIOlABS.ORG/DOCuMENtATIoN lInks
  104. 104. @moRtenDk #dRupaLTWIg #srijAnwW dOwnLoaD d8 BETa 14! - ONlY 11 BLoCKErS LeFT DRUpAL.oRG/dRUPaL8
  105. 105. @moRtenDk #dRupaLTWIg #srijAnwW WEEkLY mEETiNG’S THUrSDAy 1700 CEt #DruPalTwig
  106. 106. @moRtenDk #dRupaLTWIg #srijAnwW USE TWItTER #SRiJANwW QUEsTIOnS, cOMMeNTS & FEeDBAcK @MOrTENdK qUesTioNs

×