• DE

vimeo.com/135330984

-> für das Fluid-Template wird die HTML-Vorlage vorbereitet -> die index.html -> von initializr.com
-> in Fluid gibt es -> Layouts -> Templates -> Partials -> siehe Grafik!


-> in Fluid lassen sich HTML-Vorlagen in diese Bereiche aufglieden: Layouts -> Templates -> Partials
-> das initializr.com Layout ist responsive und hat oben eine Hauptnavigation -> unten einen footer ->

rechts ein aside-Feld

-> 8.2 das Shema für das Fluid-Design
-> "Layout" ändert sich nicht -> "Layout" ist komplett statisch ->umfasst alle anderen Inhalte
-> verschiedene "Templates" können innerhalb eines "Layouts" verwendet werden
-> innerhalb des "Templates" kann man die einzelnen Bereiche in Partials aufteilen

-> die index.html von initializr.com wird für Fluid bearbeitet -> öffnen in PhpStorm
-> 1. Es müssen im Verzeichnis Recources/Private drei weitere Verzeichnisse angelegt werden:
-> Layouts, Templates, Partials

-> 2. Headbereich der index.html wird ignoriert -> wichtig zuerst: -> Bereich ab öffnenden body-Tag
-> 3. ein Layout anlegen
-> dafür wird eine neue Datei angelegt -> DefaultLayout.html -> dort hinein kommem nur die ersten Zeilen

unter <body> -> das ist der conditional comment (if ..)

<!--[if lt IE 8]>
    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a

href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->

-> 4. Im DefaultLayout.html darunter ein Partial anlegen -> mit einem neuen Namen "Header"
-> wird Fluid-ViewHelper render Partialnamen = Header
-> das ist: <f:render partial ="Header" />
-> das ist ein einzeiliger ViewHelper, der mit einem Slash + geschlossene spitze Klammer geschlossen wird

-> also so: />

-> 5. Maincontainer wird ausgelagert -> in einer Section -> direkt unter dem Header-Partial
-> das ist: <f:render section ="Main" />
-> dieser ViewHelper kommt auch in die DefaultLayout.html
 
-> 6. Der Footer bekommt auch ein eigenes Partial
-> das ist: <f:render partial ="Footer" />
-> dieser ViewHelper kommt auch in die DefaultLayout.html

-> 7. DefaultLayout.html ist damit fertig

-> 8. DefaultTemplate.html erstellen -> im Verzeichnis Private/Templates

-> 9. <div class="main-container"> ... </div> -> aus der index.html ausschneiden

-> 10 hier sind noch der article und der aside Bereich enthalten -> wird später durch TYPO3-generierte

Inhaltselemente ersetzt
-> die Inhalte sind noch hardcodiert -> dient später als Stoff zum Test

-> 11 hier muss noch definiert werden, welches Layout verwendet werden soll -> das ist der

LayoutViewHelper
-> <f:layout name="DefaultLayout" />
-> das ist der Dateiname (!) des zu verwendenden Layouts - aber ohne Dateiendung!-> das wird oben als

erste Zeile in die DefaultTemplate.html gesetzt

-> 12 unter Punkt 5 -> wurde im Default-Layout die Section "Main" angesprochen
-> im Template muss deshalb gesagt werden, wo diese Section ist
-> das wird erreicht durch einen section-ViewHelper im DefaultTemplate.html:
<f:section name="Main"></f:section>
-> das ist kein einzeiliger ViewHelper -> der ViewHelper umschließt einen Bereich, also mehrere Zeilen
-> der einleitende Tag dieses ViewHelper wird also mit einer einfachen spitzen Klammer geschlossen (ohne

Slash):
-> PhpStorm schlägt hier gleich den schließenden Tag vor -> der muss ausgeschnitten und an die die

richtige Stelle verschoben werden -> d.h an das Ende des betreffenden Bereichs
-> das ist der schließende Tag:
</f:section>




<f:layout name="DefaultLayout" />
-> der beendende Tag des VieHelpers hat einen Slash(/) vor der spitzen Klammer
-> den generiert PhpStorm (per Autovervollständigung)
-> der beendende Teil des ViewHelpers -> />f:section> -> wird deshalb ausgeschnitten
-> und an das Ende des Inhalts gesetzt

13 -> Im Layout gibt es noch den Partial "Header" -> dafür neue Datei anlegen im Verzeichnis Partials ->

Header.html
-> Aus der index.html den Kontainer -> div class="header-container"> -> herauskopieren -> und in

Header.html kopieren

14 -> Im Layout gibt es noch den Partial "Footer" -> dafür neue Datei anlegen im Verzeichnis Partials ->

Footer.html
-> Aus der index.html den Kontainer -> div class="footer-container"> -> herauskopieren -> und in

Footer.html kopieren

15 -> Für die Zeilen des Headers aus der index.html wird ein Partial angelegt -> im Verzeichnis Partials

-> mit dem Namen Header.html
-> zunächst ohne ViewHelper nur der div-container "header-container"

16 -> einen Partial für den footer anlegen -> d.h. eine Footer.html im Verzeichnis Partials -> footer aus

der index.html ausschneiden -> und dort einfügen -> keinen ViewHelper vor das HTML