TYPO3 Twitter Bootstrap Fluidtemplates

0

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

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

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

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

About Author

PHP Kurs und Inhouse Schulungen für Webdevelopment mit Continuous Integration - Clean Coder, Blogger, Autor, Dozent und Senior Webdeveloper www.rolandgolla.de

Leave A Reply

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.