Viele Aufgaben im Alltags eines Webentwicklers wiederholen sich, oder sind zumindest sehr ähnlich. Viele hervorragende Tools begegnen dieses Problem und vereinfachen dabei die Arbeit. Für mich sind Contao und Bootstrap zwei dieser Tools, dies ich zunehmend gemeinsam einsetze.

Da auch hier immer wiederkehrende Arbeitsschritte beim gemeinsamen Einsatz vorkommen, habe ich eine Erweiterung erstellt, die als Grundlage für die Frontendentwicklung mit Contao und Bootstrap genommen werden kann. Die Erweiterung stelle ich der Community zur Verfügung. Sie richtet sich an diejenigen, für die sowohl Contao als auch Bootstrap kein Neuland mehr sind.

Sie versucht nicht das Rad neu zu erfinden, sondern Bewährtes zusamenzubringen und dabei einen einheitlichen Arbeits-Workflow zu gewährleisten. So wurden einige Komponenten neu entwickelt (Tab, Carousel, Icon Auswähler), während auf andere zurückgegriffen (Subcolumns, Contao Akkordeon) wurde.

Features
  • Unterstützung des Gridsystems
    • Im Layout Grid-Klassen zuweisen (anstelle der festgelegten Breite)
    • Spaltensets mithilfe von Subcolumns
    • Artikelbasiertes Spaltensets
    • flexible Erstellung von Spaltensets im Backend
  • Auswahl der Komponenten
    • Theme+ basierend
    • Mitgebrachte und benötigte Javascript- und CSS-Dateien können einfach importiert werden
    • Unterstützung von Bootstrap-Select sowie Swipe-Funktionalitäten des Sliders
  • Formulare
    • Unterstützung von spaltenbasierten Layout und einfachen Layout
    • Umsetzung von Eingabegruppen
      (Einheit, Symbol, Schaltfläche können hinzugefügt werden)
    • Bootstrap Schaltfläche mit Icon
  • Icons
    • Einfache Icon-Auswahl für Schaltflächen und Eingabegruppen
    • Unterstützung für Font-Awesome und Glyphicons Halflings
    • Icon-Insterttag icon::example::additionalCssClass
  • Navigation
    • Frontend-Modul für die Navigationsleiste
    • Quicklink und Quicknavigation Templates
  • Kompatibilität
    • keine Core-Funktionalitäten werden überladen
    • geänderte Templates werden dynamisch geladen
    • Funktionen konfigurier/deaktivierbar
  • Außerdem
    • Untersützung der Bootstrap Komponenten Carousel, Tabs, Akkordeon, Modal
    • Angepasste und neue Templates
    • umfangreiche Konfigurationsmöglichkeiten
Bootstrap Komponenten
  • Bootstraps Akkordeon
    • wird mit Contaos Akkordeon-Inhaltselement abgebildet
    • Entwicklung eines Gruppen-Elements, zur Zuordnung einzelner Akkordeon-Elemente zu einer Gruppe
  • Bootstrap Carousel
    • Entwicklung eines neuen Inhaltselement
    • folgt der Bedienungslogik der Spaltenset Erweiterung
  • Bootstrap Tabs
    • Entwicklung eines neuen Inhaltselement
    • folgt der Bedienungslogik der Spaltenset Erweiterung
  • Bootstrap Modal
    • Umsetzung als Frontend-Modul
    • Laden von Formularen, Artikeln, Templates, Text und HTML möglich
    • Einbindung per Insert-Tag
Angepasste Templates
  • Merkmale
    • werden dynamisch geladen, falls Bootstrap im Layout aktiviert wurde
    • Schlank gehalten. Extra-Logik werden über Template-Modifier ausgeführt
    • Anpassung der Templates für Bootstraps Markup
  • Veränderte Templates
    • Akordeon:
      • ce_accordion
      • ce_accordion_start
    • Formular:
      • form
      • form_widget
      • form_captcha
      • form_checkbox
      • form_explanation
      • form_headline
      • form_message
      • form_password
      • form_radio
      • form_submit
    • Module:
      • mod_breadcrumb
      • mod_comment_form
      • mod_quicklink
      • mod_quciknav
      • mod_search_advanced
    • Sonstige:
      • pagination
      • nav_default
Weitere Templates
  • Entwicklung von Templates, die mit Bootstrap und Contao zusammenarbeiten
  • Alternativen zu bestehenden Templates
    • fe_bootstrap
    • com_bootstrap
    • gallery_grid
    • gallery_carousel
    • nav_bootstrap_dropdown
    • search_default
  • Templates für neue Komponenten
    • bootstrap_buttons
    • bootstrap_buttons_item
    • mod_navbar
    • mod_navbar_container
    • mod_bootstrap_modal
    • navbar
    • navbar_brand
    • navbar_toggle
    • form_checkbox_generate
    • form_radio_generate
    • ce_accordion_group
    • ce_bootstrap_button
    • ce_bootstrap_buttons
    • ce_bootstrap_columnset
    • ce_bootstrap_carousel
    • ce_bootstrap_tab
    • nav_bootstrap_dropdown
Entwickler-Werkzeuge
  • Formulare
    • frei konfigurierbare Elemente, die für Eingabegruppen zugelassen sind
    • Generierung aller Formular-Widgets kann über Templates gesteuert werden
      (Beispiel form_checkbox_generate, form_radio_generate)
    • konfigurierbare Grid-Klassen für das Zweispaltenlayout
  • Basisklasse für Wrapper-Elemente
    • Zuordnung von Start-, Trenn- und Stopelementen
    • Management des Löschens- und Anlegens
  • Hilfsklassen
    • Icons zur Verwaltung der Iconschriftart
    • Gravatar Erstellt Gravatar-Links
  • Templates
    • Dynamisches Laden
    • Modifer
      • Änderung von Template-Variablen während des Parsens
      • Ersetzen von Platzhalten oder Ausführen von Callbacks
  • Icons
    • beliebige Icon-Sets können definiert werden
    • Anpassung der Icon-Ausgabe
Dokumentation & Demo ausprobieren