7 @moRtenDk - - PowerPoint PPT Presentation

▶
7
SMART_READER_LITE
LIVE PREVIEW

7 @moRtenDk - - PowerPoint PPT Presentation

Feb 23, 2024 234 likes •1.92k views

7 @moRtenDk #drUpaltWIG DRUpAl 8 tH e mI n g DRUpALCoN BaRCElONA 2015 @moRtenDk #drUpaltWIG sLidEs SLIdES aRE oNLInE

slide-1
SLIDE 1 @moRtenDk #drUpaltWIG 7
slide-2
SLIDE 2 @moRtenDk #drUpaltWIG

tHemIng

DRUpALCoN BaRCElONA 2015 DRUpAl 8

slide-3
SLIDE 3 @moRtenDk #drUpaltWIG

SLIdES aRE oNLInE In 60 MInUTEs

sLidEs

slide-4
SLIDE 4 @moRtenDk #drUpaltWIG

@morTenDk

CLAsSy MAInTAInER GEEk RÖYALe THE ANGrY THEmER TaG1 CONsULTiNG

slide-5
SLIDE 5 @moRtenDk #drUpaltWIG

@MOrTENdK

slide-6
SLIDE 6 @moRtenDk #drUpaltWIG

#DRuPALtWiG

slide-7
SLIDE 7 @moRtenDk #drUpaltWIG

sOrry

Rc 1

slide-8
SLIDE 8 @moRtenDk #drUpaltWIG

bOoOOooOo

LET THE ANGeR OuT

slide-9
SLIDE 9 @moRtenDk #drUpaltWIG

sTocKhoLm sYndRome

slide-10
SLIDE 10 @moRtenDk #drUpaltWIG

DRUpAL7 MARkUP

slide-11
SLIDE 11 @moRtenDk #drUpaltWIG

“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>
slide-12
SLIDE 12 @moRtenDk #drUpaltWIG

5000

LINeS Of PHpTEMpLATe.PHp

TotAllY oK

slide-13
SLIDE 13 @moRtenDk #drUpaltWIG

<div class=“foo bar baz foo-more-more bar- more-yet another one”>

fEatUre

THE CLAsS SoUP IS AnOTHeR

slide-14
SLIDE 14 @moRtenDk #drUpaltWIG

nO mOre

aAaaRgh!

slide-15
SLIDE 15 @moRtenDk #drUpaltWIG

nEw

tHemE eNgiNe

GOOd-BYe PHPtEMPlAtE

HELlO TwIG

slide-16
SLIDE 16 @moRtenDk #drUpaltWIG

tHemE fUncTioNs dEad!

slide-17
SLIDE 17 @moRtenDk #drUpaltWIG

tWig tEmpLatEs

EVErYTHiNG iS

BLOcK.HtML.tWiG MARk.HTmL.TwIG TABlE.HtML.tWiG PAGe.HTmL.TwIG NODe.HTmL.TwIG VIEw.HTmL.TwIG FIElD.HtML.tWiG IMAgE-WiDGEt.HTmL.TwIG
slide-18
SLIDE 18 @moRtenDk #drUpaltWIG

tHemE iS iN cOntRol

ThE OF mARKuP & CSs

slide-19
SLIDE 19 @moRtenDk #drUpaltWIG

uNleArn pHptEmpLa te

<? pHP dIe(‘PHPtEMPlAtE’) ?>

slide-20
SLIDE 20 @moRtenDk #drUpaltWIG

REAdY?

slide-21
SLIDE 21 @moRtenDk #drUpaltWIG

tWig

DRUpAl 8

slide-22
SLIDE 22 @moRtenDk #drUpaltWIG

IS a “MODeRN” TEmPLAtE LaNGUaGe

  • > sYMPhONY

USEd BY OTHeR SySTEmS + It’S EaSY tO LeARN :)

tWig

slide-23
SLIDE 23 @moRtenDk #drUpaltWIG

{{ var }} {# comment #} {% functionality %}

{ # %

slide-24
SLIDE 24 @moRtenDk #drUpaltWIG

{{ data.is.here }} {{ also.this[#hashtags] }}

vAr DriLliNg

$yo[‘drupal_where ’]->is[‘und’][0]->my_data 7
slide-25
SLIDE 25 @moRtenDk #drUpaltWIG

{{ var|makemepretty(‘now’) }}

fUncTion

PIPe TWIg FUnCTIoN VaR

slide-26
SLIDE 26 @moRtenDk #drUpaltWIG

{{ username|uppercase }} MORTENDK

fUncTion

(mortendk)

slide-27
SLIDE 27 @moRtenDk #drUpaltWIG

{{ ‘Copenhagen’|t }} {% trans %} by {{ user }} date {{ date }} {% endtrans %}

tRanSlaTe

slide-28
SLIDE 28 @moRtenDk #drUpaltWIG

{% if person=“mortendk” %} <h1>Loves Drupal8</h1> {% endif %}

cOntRol

slide-29
SLIDE 29 @moRtenDk #drUpaltWIG

{{ sushi|raw}}

aUtoEscApe

SECuRITy IS SOMeTHInG DEVeLOPeRS LIKe

slide-30
SLIDE 30 @moRtenDk #drUpaltWIG {% set foo = “bar” %} {{ foo }} bar

cReaTe Var

slide-31
SLIDE 31 @moRtenDk #drUpaltWIG

cLasSy

THE DRUpAl 8 BAsE ThEmE

slide-32
SLIDE 32 @moRtenDk #drUpaltWIG

7

corE claSsy

<HTmL> .CSs CLAsS=“FoO” <HTmL> .CSs CLAsS=“FoO”

slide-33
SLIDE 33 @moRtenDk #drUpaltWIG

bAseTheMe

corE claSsy my ThemE

?

barTik sevEn

$VArS

slide-34
SLIDE 34 @moRtenDk #drUpaltWIG

bAseTheMe

<div> {{ foo }} </div>

corE claSsy

“MY tHEMe”

NO bASEtHEMe DEfINEd

slide-35
SLIDE 35 @moRtenDk #drUpaltWIG

bAseTheMe

<div class=“node node—article”> {{ foo }} </div>

corE claSsy

“MY tHEMe”

BASe THeME: CLAsSY

slide-36
SLIDE 36 @moRtenDk #drUpaltWIG

tEmpLatEs

CORe/THeME/cLASsY/*

MODuLES/[MODuLENaME]/*

7

aniMatiOn eXplaIninG how we MoveD shIt
  • utTa cOre And Into claSsy
slide-37
SLIDE 37 @moRtenDk #drUpaltWIG

dRupAl8 teMplAtes

CORe/THeMES/CLAsSy/

slide-38
SLIDE 38 @moRtenDk #drUpaltWIG

dEfiNe BasEthEme

base theme: classy

[THEmENAmE].iNFO.YmL

slide-39
SLIDE 39 @moRtenDk #drUpaltWIG

yOu DecIde!

corE claSsy

CLEaN As COrE CLAsSES YOU CAN TRUsT

slide-40
SLIDE 40 @moRtenDk #drUpaltWIG

corE claSsy

7

ZeN MOThERShIP

wAitAmiNutE!

slide-41
SLIDE 41 @moRtenDk #drUpaltWIG

MORtENDk JOHn ALbIN corE claSsy

7

ZeN MOThERShIP MAInTAInERS ?

slide-42
SLIDE 42 @moRtenDk #drUpaltWIG
slide-43
SLIDE 43 @moRtenDk #drUpaltWIG

sEtup

SETtING UP a THeME

slide-44
SLIDE 44 @moRtenDk #drUpaltWIG

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

slide-45
SLIDE 45 @moRtenDk #drUpaltWIG

tHemE cOnfIg FilEs

*.InFO.yMl *.LiBRArIES.YML *.BrEAKpOINtS.YmL *.ThEmE

slide-46
SLIDE 46 @moRtenDk #drUpaltWIG

*.inFo.Yml

THEmE CoNFIgURAtION, CSs & jS

slide-47
SLIDE 47 @moRtenDk #drUpaltWIG

BASiC INFo REGiOnS LIBrARIeS REMoVE cSS

slide-48
SLIDE 48 @moRtenDk #drUpaltWIG
slide-49
SLIDE 49 @moRtenDk #drUpaltWIG

*.liBraRieS.yMl

ADDiNG jS & CSs TO THE THEmE

slide-50
SLIDE 50 @moRtenDk #drUpaltWIG

FOO.INFo.YAmL FOO.LIBrARIeS.YaML SLIdER.cSS SLIdER.jS SLIdER FOO.CsS BAR.JS AWEsOmE

slide-51
SLIDE 51 @moRtenDk #drUpaltWIG .INfO.YmL .LIbRARiES.yML
slide-52
SLIDE 52 @moRtenDk #drUpaltWIG

NAMe DEPeNDEnCIEs CSS FILeS

*.liBraRieS.yMl

JS fILEs

slide-53
SLIDE 53 @moRtenDk #drUpaltWIG global: version: VERSION css: component: css/user/user.theme.css: {} theme: css/layout.css: {}

cSs OrgAniZing

BASe LAYoUt COMpONEnT STAtE THEmE

slide-54
SLIDE 54 @moRtenDk #drUpaltWIG

[*].BreAkpOinTs.Yml

RESpONSiVE iMAGeS

slide-55
SLIDE 55 @moRtenDk #drUpaltWIG

*.BrEAKpOINtS.YmL

slide-56
SLIDE 56 @moRtenDk #drUpaltWIG

*.BrEAKpOINtS.YmL

slide-57
SLIDE 57 @moRtenDk #drUpaltWIG

[*].TheMe WAS PHPtEMPlATE.PhP

slide-58
SLIDE 58 @moRtenDk #drUpaltWIG

.TheMe

.LIbRARiES.yML .THeME

slide-59
SLIDE 59 @moRtenDk #drUpaltWIG

tOols

HOW TO fIND STUfF & DEbUg

slide-60
SLIDE 60 @moRtenDk #drUpaltWIG

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

slide-61
SLIDE 61 @moRtenDk #drUpaltWIG

DOWnLOAd DEvEL mODUlE INStALL DEVeL + KINt INStALL DRUsH DRUsH En KInT DOCs.DRuSH.oRG/eN/MaSTEr/INsTALl/

dEvel

slide-62
SLIDE 62 @moRtenDk #drUpaltWIG

dIsaBle csS cAche

slide-63
SLIDE 63 @moRtenDk #drUpaltWIG

THEmE DeBUG FTW! SERvICEs.YMl

slide-64
SLIDE 64 @moRtenDk #drUpaltWIG

FILe NAmE SuGGEsTIOnS FILe NAmE SuGGEsTIOnS

slide-65
SLIDE 65 @moRtenDk #drUpaltWIG

PATh TO ACTiVE tEMPlAtE

slide-66
SLIDE 66 @moRtenDk #drUpaltWIG
slide-67
SLIDE 67 @moRtenDk #drUpaltWIG

kInt

{{ kint( foo ) }} KRUmO FoR DrUPAl 8 {{ content.field_image }}

screenshot af kint fra video
slide-68
SLIDE 68 @moRtenDk #drUpaltWIG

SITeS/AlL/DeFAUlT/SeRVIcES.yMl DRUsH Cr {{ KInT(FoO) }}

tWig deBug:

slide-69
SLIDE 69 @moRtenDk #drUpaltWIG

tEmpLatE sTruCtuRe

EVErYTHiNG iS A TEMpLATe FIlE

slide-70
SLIDE 70 @moRtenDk #drUpaltWIG

125 TemPlaTes

WE nUKEd THe THeME fUNCtIONs* TURnED iT AlL INTo A mETRiC FUCkTON OF tEMPlATEs

slide-71
SLIDE 71 @moRtenDk #drUpaltWIG
slide-72
SLIDE 72 @moRtenDk #drUpaltWIG

gRouPs

do we really need this here ?
slide-73
SLIDE 73 @moRtenDk #drUpaltWIG

tEmpLatE gRouPs

LAYoUT FIElD DATaSeT VIEwS BLOcK CONtENT-EDIt CONtEnT MISc USEr NAViGATiON FORm
slide-74
SLIDE 74 @moRtenDk #drUpaltWIG

hTml

HTMl.HTmL.TwIG CSS + Js HEAdER
slide-75
SLIDE 75 @moRtenDk #drUpaltWIG HTMl.HTmL.TwIG

pAge

PAGe.HTmL.TwIG
slide-76
SLIDE 76 @moRtenDk #drUpaltWIG HTMl.HTmL.TwIG REGiON.hTML.TWIg REGiON.hTML.TWIg REGiON.hTML.TWIg

rEgiOn's

PAGe.HTmL.TwIG
slide-77
SLIDE 77 @moRtenDk #drUpaltWIG HTMl.HTmL.TwIG

cOntEnt

BLOcK.HtML.tWiG NODe.HTmL.TwIG VIEw.HTmL.TwIG REGiON.hTML.TWIg
slide-78
SLIDE 78 @moRtenDk #drUpaltWIG

nOde

FIElD.HtML.tWiG NODe.HTmL.TwIG FIElD.HtML.tWiG FIElD.HtML.tWiG FIElD-—IMAgE.HtML.tWiG FIElD.HtML.tWiG FIElD.HtML.tWiG
slide-79
SLIDE 79 @moRtenDk #drUpaltWIG

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

WE’RE gONNa TAlK AbOUT FIElDS lATEr

slide-80
SLIDE 80 @moRtenDk #drUpaltWIG

lAyoUt

THE MAGiC Of WItHOUt

slide-81
SLIDE 81 @moRtenDk #drUpaltWIG

{{ content|without(‘field’) }}

wIthOut fuNctIon

PIPe NAMe TWIg FUnCTIoN VaR

slide-82
SLIDE 82 @moRtenDk #drUpaltWIG

NODe.HTmL.TwIG

slide-83
SLIDE 83 @moRtenDk #drUpaltWIG

conTeNt imaGe tagS

wIthOut

slide-84
SLIDE 84 @moRtenDk #drUpaltWIG

{{ coNtenT }} {{ imAge }}

{{ content }}

{{ teXt }} {{ taGs }}

slide-85
SLIDE 85 @moRtenDk #drUpaltWIG

{{ coNtenT | WithOut(*) }} {{ imAge }}

{{ content|without(‘image’) }}

{{ content.image }} {{ teXt }} {{ taGs }}

slide-86
SLIDE 86 @moRtenDk #drUpaltWIG

{{ coNtenT | WithOut(**) }} {{ imAge }}

{{ content|without(‘image’,‘tags’) }}

{{ content.image }} {{ teXt }} {{ taGs }} {{ content.tags }}

slide-87
SLIDE 87 @moRtenDk #drUpaltWIG

{{ coNtenT | WithOut(**) }} {{ imAge }}

{{ content|without(‘image’,‘tags’) }}

{{ content.image }} {{ teXt }} {{ taGs }} {{ content.tags }} {{ neW }}

NEW FIElD

slide-88
SLIDE 88 @moRtenDk #drUpaltWIG

CONtEnT

nOde.htMl.Twig

slide-89
SLIDE 89 @moRtenDk #drUpaltWIG

CONtENT.FIElD_ImAgE

slide-90
SLIDE 90 @moRtenDk #drUpaltWIG

CONtENT.FIElD_TaGS

slide-91
SLIDE 91 @moRtenDk #drUpaltWIG

fIeld

THE HEArT Of DRuPaL

slide-92
SLIDE 92 @moRtenDk #drUpaltWIG

HOW MANy <DiV>S DOEs IT TAKe TO MAKe A “SINgLE fIELd WItH OnE VaLuE” NO lABEl?

slide-93
SLIDE 93 @moRtenDk #drUpaltWIG
slide-94
SLIDE 94 @moRtenDk #drUpaltWIG

Yo!

slide-95
SLIDE 95 @moRtenDk #drUpaltWIG

Yo!

<div class=“field-items”> </div> <div class=“field 
 field-name-field-single 
 field-type-text 
 field-label-hidden”> </div> </div> <div class=“field-item even”> 7
slide-96
SLIDE 96 @moRtenDk #drUpaltWIG

Yo!

<div class=“field 
 field--name-field-single
 field--type-string 
 field--label-hidden field__items”> </div>

CLAsSY

slide-97
SLIDE 97 @moRtenDk #drUpaltWIG

Yo!

<div> </div>
slide-98
SLIDE 98 @moRtenDk #drUpaltWIG

Yo!

<div> </div>

ONE DIV ZERo CLaSSEs 100% DrUPAl

slide-99
SLIDE 99 @moRtenDk #drUpaltWIG

Yo!

<div class=“yolo”> </div>

ONE DIV ZERo CLaSSEs 100% DrUPAl

slide-100
SLIDE 100 @moRtenDk #drUpaltWIG

sIngLe nAked

WHAt DO I UsE A

<DIv>

dUde grEat

slide-101
SLIDE 101 @moRtenDk #drUpaltWIG

WHAtEVEr

YOU

WANt IT TO

slide-102
SLIDE 102 @moRtenDk #drUpaltWIG

fIelD mArkUp

slide-103
SLIDE 103 @moRtenDk #drUpaltWIG

fIeld

LABeL VALuE

slide-104
SLIDE 104 @moRtenDk #drUpaltWIG

SINgLE MULtIPLe LABeL LABeL

} }

slide-105
SLIDE 105 @moRtenDk #drUpaltWIG

FIElD.HtML.tWiG

slide-106
SLIDE 106 @moRtenDk #drUpaltWIG

SINgLE MULtIPLe SINgLE + LAbEL MULtIPLe + lABEl

slide-107
SLIDE 107 @moRtenDk #drUpaltWIG

LABeL DiSPLaY

mAnaGe DisPlay

slide-108
SLIDE 108 @moRtenDk #drUpaltWIG

“INLiNE” “VISuALLy HIDdEN” “ABOvE”

slide-109
SLIDE 109 @moRtenDk #drUpaltWIG

FIElD.HtML.tWiG

slide-110
SLIDE 110 @moRtenDk #drUpaltWIG

NO lABEl LABeL

slide-111
SLIDE 111 @moRtenDk #drUpaltWIG {% if label_hidden %} {% if multiple %} {% else %} {% endif %} {% else %} {% if multiple %} {% else %} {% endif %} {% endif %}
slide-112
SLIDE 112 @moRtenDk #drUpaltWIG <div> yo </div> <div> <div> label</div> <div>yo </div> </div> <div> <div>label</div> <div> <div>yo </div> <div>lo </div> </div> </div>
slide-113
SLIDE 113 @moRtenDk #drUpaltWIG

aTtrIbuTes

PURe CLaSS

slide-114
SLIDE 114 @moRtenDk #drUpaltWIG

<div {{ attributes }}>

class=“foo” data-drupal-foo aria-hidden=“true”

aTtrIbuTes

slide-115
SLIDE 115 @moRtenDk #drUpaltWIG

CLAsSY

<DIv CLaSs=“FOO FOO-BAR FOO-BAR-BaZ”>

*.TpL.PhP THEmE FuNCTiOnS PREpROCeSS

$VArS

DRUpAL7

7

slide-116
SLIDE 116 @moRtenDk #drUpaltWIG
slide-117
SLIDE 117 @moRtenDk #drUpaltWIG {% set classes = [ ‘field-' ~ field_name|clean_class ~ ' ] %} <div {{ attributes.addClass(classes) }}>…</div> 
 <div class=“tags field-tags”>…

aDdcLass

slide-118
SLIDE 118 @moRtenDk #drUpaltWIG <i {{ attributes.removeClass(red) }}> … </i> 
 <i class=“blue”>…</i> <div class=“red blue”> … </div> BAD MODuLE oUTPuT

rEmoVe ClaSs

slide-119
SLIDE 119 @moRtenDk #drUpaltWIG

CLAsSY

MODuLE CORe <DIv CLaSs=“CORe”> ESSeNTIaL ClASSeS Ex: “IS-vISIbLE”

slide-120
SLIDE 120 @moRtenDk #drUpaltWIG

CLAsSY

MODuLE CORe <DIv CLaSs=“CORe MOdUlE”>

$vaR[‘attRibuTes’]->AddCLass(‘modUle’)

slide-121
SLIDE 121 @moRtenDk #drUpaltWIG

CLAsSY

MODuLE CORe <DIv CLaSs=“CORe MOdULE THEmE”> {{ ATtRIBuTES.ADDcLASs(‘THEmE’) }}

slide-122
SLIDE 122 @moRtenDk #drUpaltWIG

CLAsSY

MODuLE CORe <DIv CLaSs=“CORe THeME”> {{ ATtRIBuTES.REMoVe(‘MODuLE’) }}

slide-123
SLIDE 123 @moRtenDk #drUpaltWIG

CLAsSY

MODuLE CORe <DIv CLaSs=“THEmE”> {{ ATtRIBuTES.REMoVe(‘MODuLE’,’CORe’) }}

slide-124
SLIDE 124 @moRtenDk #drUpaltWIG

jS- PreFix

<DIv CLaSs=“JS-fOO fOO”>…

$(.jS-FoO) .FOo{…}

slide-125
SLIDE 125 @moRtenDk #drUpaltWIG <div class="blablabla"> {{ attributes .removeClass(‘blablabla’) .addClass(‘hero-main’) .setAttribute('id', 'top') }} <div id="top" class="hero-main">

aTtrIbuTes

slide-126
SLIDE 126 @moRtenDk #drUpaltWIG

fIelD & atTriButEs

KISsING IN a TReEEEeEEEeEEEeE

slide-127
SLIDE 127 @moRtenDk #drUpaltWIG <div> yo </div> <div> <div> label</div> <div>yo </div> </div> <div> <div>label</div> <div> <div>yo </div> <div>hej </div> </div> </div>
slide-128
SLIDE 128 @moRtenDk #drUpaltWIG <div class=“field field__item”> yo </div> <div class=“field”> <div class=“field__label”> label</div> <div class=“field__item”>yo </div> </div> <div class=“field”> <div class=“field__label”>label</div> <div class=“field__items”> <div class=“field__item”>yo </div> <div class=“field__item”>lo </div> </div> </div>
slide-129
SLIDE 129 @moRtenDk #drUpaltWIG

LABeL VALuE

.field__item .field__label .field
slide-130
SLIDE 130 @moRtenDk #drUpaltWIG .field__item .field__label .field__items .field
slide-131
SLIDE 131 @moRtenDk #drUpaltWIG

FIX THE MARkUP

slide-132
SLIDE 132 @moRtenDk #drUpaltWIG
slide-133
SLIDE 133 @moRtenDk #drUpaltWIG

ADD & REmOVE CLAsSES

slide-134
SLIDE 134 @moRtenDk #drUpaltWIG
slide-135
SLIDE 135 @moRtenDk #drUpaltWIG

CHAnGE sTUFf WHeN 8

slide-136
SLIDE 136 @moRtenDk #drUpaltWIG
slide-137
SLIDE 137 @moRtenDk #drUpaltWIG {{ attach_library('classy/book-navigation') }}

cSs FilEs In TemPlaTe

slide-138
SLIDE 138 @moRtenDk #drUpaltWIG

tWigBloCk

MORe COoLNEsS FrOM tWiG

slide-139
SLIDE 139 @moRtenDk #drUpaltWIG

datA (pAge.Html.twiG)

PAGe.HTmL.TwIG

D8

datA (pAge.Html.twiG)

slide-140
SLIDE 140 @moRtenDk #drUpaltWIG

datA (pAge.Html.twiG)

{% block foo %} {% endblock %}

PAGe.HTmL.TwIG

D8

datA (pAge.Html.twiG)

slide-141
SLIDE 141 @moRtenDk #drUpaltWIG

datA (pAge.Html.twiG) (paGe-—froNt.hTml.Twig)

{% extends "page.html.twig" %}

PAGe.HTmL.TwIG

D8

datA (pAge.Html.twiG)

slide-142
SLIDE 142 @moRtenDk #drUpaltWiG
slide-143
SLIDE 143 @moRtenDk #drUpaltWIG

PAGe.HTmL.TwIG PAGe—FROnT.HtML.tWiG

slide-144
SLIDE 144 @moRtenDk #drUpaltWIG

PAGe.HTmL.TwIG PAGe—FROnT.HtML.tWiG

slide-145
SLIDE 145 @moRtenDk #drUpaltWIG

hAppY ?

ARE YOU NOT ENTeRTAiNED ?

slide-146
SLIDE 146 @moRtenDk #drUpaltWiG

SCReENShOt 2.0

slide-147
SLIDE 147 @moRtenDk #drUpaltWiG

mEnu

pAgeRs

ONLy 1 (OnE) tEMPlATE FILe MENu.HTmL.TwIG

slide-148
SLIDE 148 @moRtenDk #drUpaltWiG

pAger

FUN FOR EVErYBOdY ? PAGeR.HtML.tWiG

slide-149
SLIDE 149 @moRtenDk #drUpaltWIG

8 thIngS cHanGed

T L ; D L TOO LONg - DIDn'T lISTeN!

slide-150
SLIDE 150 @moRtenDk #drUpaltWIG
  • 1. iE sUppOrt?

NO mORE SUPpORT FOR IE6, Ie7 & iE8

slide-151
SLIDE 151 @moRtenDk #drUpaltWIG
  • 2. mArkUp CleAnup

HTMl5 CSS IS sMACsS & BEm BAsEd “MODeRN” PRaCTIcE #iD ReMOVeD 
 SEVeN Is REsPONsIvE

slide-152
SLIDE 152 @moRtenDk #drUpaltWIG

jS sEpeRatIon

SEPaRATeD JAVaSCRiPT’S FuNCTiONAlITY CSS STYlING IS sEPArATEd .JS-FOObAR{ …} .FOoBaR{ COlOR: BLUe}

slide-153
SLIDE 153 @moRtenDk #drUpaltWIG

dIviTis

90%

OF tHE mARKuP Is GOnE

slide-154
SLIDE 154 @moRtenDk #drUpaltWIG

jQueRy DepEndEncy

DONt WAnT 32K Of LOvE ? … THeN DoN’T

slide-155
SLIDE 155 @moRtenDk #drUpaltWIG

cLasSy!

CLAsSY SEPaRATeD ThE MaRKUp FROm COrE

slide-156
SLIDE 156 @moRtenDk #drUpaltWIG

sAluTe!

FOR THOsE ThAT rOCKeD ThE TwIG WE sALUtE YoU!

slide-157
SLIDE 157 @moRtenDk #drUpaltWIG

i loOovE uUu

COTtSeR JOEl LEWiS EMMa LAUrII #FReERUbEN DAViD HeRNAnDeZ JOHn ALbIN WIM LEErS JEN LAMpToN FABiAN

slide-158
SLIDE 158 @moRtenDk #drUpaltWiG

DRUpAl 7

slide-159
SLIDE 159 @moRtenDk #drUpaltWIG

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

lInks

slide-160
SLIDE 160 @moRtenDk #drUpaltWIG

dOwnLoaD d8

BUIlD StUFF NOW! DRUpAL.oRG/dRUPaL8

slide-161
SLIDE 161 @moRtenDk #drUpaltWIG

WEEkLY mEETiNG’S THUrSDAy 17:00 CEt

#DruPalTwig

slide-162
SLIDE 162 @moRtenDk #drUpaltWIG

USE TWItTER #DRuPALtWIG QUEsTIOnS, cOMMeNTS & FEeDBAcK @MOrTENdK

qUesTioNs

slide-163
SLIDE 163 @moRtenDk #drUpaltWiG

sEssIons

DRUpALCoN

slide-164
SLIDE 164 @moRtenDk #drUpaltWiG

FROnTENd UNiTED BELuGAM

BOF ROOm XXx FROnTENd UNiTeD

slide-165
SLIDE 165 @moRtenDk #drUpaltWiG

ALL WEEk !
 DRUpAL fRONtEND SPRiNt

CODeR LoUNGe SPRiNT lEADeRs: (FRoNTEnD UnITEd)

slide-166
SLIDE 166 @moRtenDk #drUpaltWIG

FONtS: 
 DAFt BRuSH, BRUsH Up, BiTTEr ICOnS: SMAlL IcONS 2

cRedIts