Bootstrap

Eigenes Bootstrap einbinden

Das integrierte TYPO3.Twitter.Bootstrap gefällt mir nicht, da ich die Quellen mit Sass editieren möchte. Ich habe mir mein eigenes Paket erstellt auf Grundlage der obigen: RSYS.Twitter.Bootstrap.

./flow kickstart:package RSYS.Twitter.Bootstrap
./flow package:activate RSYS.Twitter.Bootstrap

Dann habe ich die nötigen Resourcen kopiert und statt der ganzen Bootstrap Versionen in css das aktuelle Bootstrap als Sass in Resources/Private kopiert.

Für Bootstrap das Css inkludieren in Default.html:

{namespace bootstrap=RSYS\Twitter\Bootstrap\ViewHelpers}
<bootstrap:include />

Das inkludiert alles automatisch. Für mehr Kontrolle:

<f:section name="stylesheets">
  <!--  Styles -->
  <link rel="stylesheet" href="{f:uri.resource(path: 'Styles/bootstrap.css', package: 'RSYS.DefaultSite')}" media="all" />
</f:section>

Weiter unten nach der body section:

<f:section name="bodyScripts">
  <!-- jQuery from Bootstrap -->
  <script src="{f:uri.resource(path: 'Libraries/jQuery/jquery-1.10.1.min.js', package: 'RSYS.Twitter.Bootstrap')}"></script>
   <!-- Bootstrap -->
  <script src="{f:uri.resource(path: 'JavaScript/bootstrap.min.js', package: 'RSYS.Twitter.Bootstrap')}"></script>
  <!-- Custom -->
  <script src="{f:uri.resource(path: 'JavaScript/main.js', package: 'RSYS.DefaultSite')}"></script>
    </f:section>

Dies inkludiert jQuery, bootstrap.js, und main.js. Für das letzte muss der Ordner Resources/Public/JavaScript in der Site angelegt werden und die Datei dorthin kopiert/angelegt werden.

In Root.ts2 in der body section:

// javascript
javascripts.site = TypoScript:Template {
  templatePath = 'resource://RSYS.DefaultSite/Private/Templates/Page/Default.html'
  sectionName = 'bodyScripts'
}

Bootstrap in Site

Allerdings hat man nun 2 Quellen die man für Sass Änderungen überwachen muss. Also bin ich dazu übergegangen, die Bootstrap scss Dateien in meine Site zu kopieren und das Plugin nur zum Inkludieren von jQuery und den Bootstrap Javascripten und Fonts zu verwenden. Ausserdem mache ich ja Site spezifische Anpassungen an den Bootstrap Styles, die im Plugin nicht richtig aufgehoben sind.

Erstellt: 03/2014| Geändert: 10/2015

Bootstrap Navigation

Das page.boy.parts.menu in Root.ts2 wird nun verbessert und als Bootstrap Menu gerendert. Dazu statt menu das mainMenu:

parts {
    mainMenu = Menu {
        entryLevel = 1
        templatePath = 'resource://RSYS.DefaultSite/Private/Templates/TypoScriptObjects/MainMenu.html'
        maximumLevels = 3
        site = ${site}
    }
}

In Default.htm statt

<nav class="menu">
    {parts.menu -> f:format.raw()}
</nav>

einsetzen von:

<div class="top-navigation-wrap">
    <div class="container">
        {parts.mainMenu -> f:format.raw()}
        {parts.secondLevelMenu -> f:format.raw()}
    </div>
</div>

 

Erstellt: 03/2014| Geändert: 10/2015