Eine der größten Herausforderungen, die es zur #Neuzeit im Bezug auf Responsive Design und CMS Webdesign, wie TYPO3 gibt, ist es passendes HTML zu generieren. Gerade hier möchte man Clean HTML Code neben TYPO3 Clean CSS Code im Frontend generieren und keine überflüssigen HTML DIV-Elemente von TYPO3 zusätzlich in seinen HTML Code bekommen. Es gibt drei Wege das in der Entwicklung zu realisieren.
Möglichkeiten für Clean HTML Code in TYPO3
- die gesamte Frontend ausschalten uns nachprogrammieren
- die HTML Snippets aus TYPO3 anpassen beziehungsweise ausschalten
- FLUID Templates und Fluid Content Types nutzen
TYPO3 Twitter Bootstrap Fluidtemplates
Die erst aufgeführte Möglichkeit, daß komplette TYPO3 Frontend selber zu generieren, ist extrem Entwicklungsaufwändig und muss für alle Elemente, gerade auch für alle Content Types, durchgeführt werden. Mit der zweiten Möglichkeit kommt man schon sehr weit. Hier ist es möglich, daß HTML Basis Layout mit Responsive Webdesign HTML zu nutzen, die Fluid Templetes der aktuellen Extension anzupassen und häufig verwendete Content Types mit Typoskript anzupassen. Die dritte Möglichkeit ist am komfortabelsten. Hier nutzt man direkt eigene Bootstrap Contenttypes, in die man dem User beziehungsweise Editor im TYPO3 Backend zur Verfügung stellt.TYPO3 und Twitter Bootstrap mit Fluidtemplates durch fedext
Twitter Responsive Design mit Bootstrap Template
Eine Best Practice Webdesign Lösung steht hierfür zum ein Download bereit. mit der TYPO3 Erweiterungen und Extension Sammlung von Fedext und dem TYPO3 Introduction Package ist es möglich sehr schnell Fluid Templates für Responsive Webdesign Layouts und Fluid Contenttypes zu nutzen.
TYPO3 Twitter Bootstrap Fluidtemplates
Installation von Fedext und dem TYPO3 Introduction Package
TYPO3 Introduction Package
Man legt sich ein Basisverzeichnis auf seinem Webserver an und checked hier das GIT Repository von Fedext aus. Diese Inhalte ergänzt man dann mit denen des TYPO3 Introduction Package. Wichtig ist hierbei die Ordner aus dem GIT Repository von Fedext nicht zu überschreiben, sondern nur die anderen Ordner zu ergänzen. Danach ruft man wie gewohnt den Install Vorgang des TYPO3 Introduction Package auf und hat dann an der Stelle, an der man sonst die Installation mit Dummy Inhalte auswählen kann, die Möglichkeit Twitter Bootstrap Templates und Contenttypes für TYPO3 auszuwählen.
Weiterführende Links zum Thema Responsive Design mit TYPO3 und Twitter Bootstrap Templates
Offizielle Internetseite für die Extesionsammlung Fedext für TYPO3 Fluid Templates und Fluid Contenttypes mit Twitter Bootstrap
http://fedext.net
Fedext Github Link für das Bootstrap Package
https://github.com/Ecodev/bootstrap_package
offizieller Link zum TYPO3 Introduction Package Download
http://typo3.org/download/
Responsive Webdesign mit Twitter Bootstrap
http://twitter.github.io/bootstrap/
TYPO3 Introduction Package mit fedext Fluid Templates
TYPO3 Twitter Bootstrap Fluidtemplates Bildquelle
http://www.i-group.de/news/responsive-design-mit-typo3-und-bootstrap-fuer-polytec.html
