Gibt es schon Erfahrungen mit Contao und Bootstrap?

Druckbare Version

13.07.2012, 19:07
rene-ddorf

Gibt es schon Erfahrungen mit Contao und Bootstrap?

Hello,
ich informier mich gerade ein wenig über Bootstrap. Es gibt im englischen Forum ja schon einen Eintrag und der Kollege da, hat bei Github mal was angefangen. Es scheint aber so, dass er da nicht mehr weitermacht ... Ich bin mir auch nicht sicher wie man genau drangehen sollte ...
Ich könnte mir vorstellen, dass man Tristans Theme+ dafür nehmen könnte. Die CSS-Dateien als externe Dateien einchecken. Die Javascripts ebenso. Die müssten dann halt alle wahrscheinlich unter tl_files, nicht wie in der Lösung bei Github im Plugins-Ordner.
Man hat dann aber immernoch das Problem, dass die CSS-Klassen-Struktur natürlich deutlich anders ist als bei Contao. Da kommt man, glaube ich zumindest, nicht um eine Menge Templateanpassungen herum - was den Nutzen wieder relativieren würde ... Die Klassenzuweisungen werden doch via PHP generiert? Könnte man da nicht irgendwie eingreifen (Bin leider kein PHP-Mann, ich sehe immer nur die Variablen in den Templates)?
Einige Teile von Bootstrap bräuchte man vielleicht auch gar nicht (das Grid zum Beispiel) ...
Habt Ihr Euch schonmal damit beschäftigt? Oder Bootstrap sogar schonmal in Contao benutzt irgendwie?
Viele Grüße
René
13.07.2012, 20:20
BugBuster

Contao Boilerplate

Hi,
auf der Konferenz gabs sowas ähnliches: Contao Boilerplate

https://github.com/menatwork/ck2012-boilerplate
22.08.2012, 12:24
droptix

Contao Bootstrap
So, dann teil ich mal meine Erfahrungen mit Contao in Verbindung mit Bootstrap mit: ich kriege es nicht hin :cool:

Hier erstmal meine prinzipielle Vorgehensweise:
1. Bootstrap heruntergeladen
2. Bootstrap entpackt nach tl_files/theme_bootstrap_default/bootstrap
3. Neues Theme erstellt
4. Keine weiteren CSS erstellt
5. Die nötigsten Module erstellt (Navigationsmenü, Login Formular)
6. Ein Standard-Layout erstellt und dort unter Experten-Einstellungen Zusätzliche <head>-Tags hinzugefügt:
Code:

<link href="tl_files/theme_bootstrap_default/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet"> <script src="tl_files/theme_bootstrap_default/bootstrap/js/bootstrap.min.js"></script>

Im Quelltext stehen dann auch im <head> die Verweise mit korrekter Pfadangabe zum Bootstrap CSS und JavaScript.

Das Frontend sieht aber unverändert aus, also kommt Bootstrap nicht zum Tragen :-(

Ist an der Vorgehensweise erstmal grundsätzlich etwas falsch oder würdet ihr auch so vorgehen?

Nachtrag: Es macht keinen Unterschied, ob man den Haken bei Das CSS-Framework deaktivieren setzt oder deaktiviert.
22.08.2012, 12:41
droptix

Aaah, man nehme bootstrap.min.css statt der responsive-Variante, dann kann man auch einen Unterschied sehen und getrost den Haken deaktivieren bei Das CSS-Framework deaktivieren.

So, dann mal ran ans Template editieren... Klar: in der Praxis ist es schon doof, wenn man sich die Standard-Templates verbiegt und Contao in einer späteren Version Änderungen im Template macht. Das würde bedeuten, dass man viele Templates nochmal anpassen muss.

Nächstes Problem: ich editiere z.B. das Grund-Template fe_page (egal ob fe_page.html5 oder fe_page.xhtml). Die Änderungen sind im Frontend nicht sichtbar, auch nicht im Quelltext. In den Experten-Einstellungen meines Standard-Layouts kann ich aber auch gar kein anderes Template wählen außer fe_page.

^^ Mache ich etwas falsch oder habe ich eben einen Bug entdeckt? Ich verwende Contao 2.11.4
22.08.2012, 15:35
BugBuster

Nach Templateänderungen eine Systemwartung ausführen, sonst kommt die Seite oder das Template aus dem Cache bzw. aus dem Original.
24.08.2012, 18:52
rene-ddorf

Also ich bastel auch wieder gerade etwas damit rum ... Habe ein paar Templates angepasst, bin mir aber nicht sicher, dass das der richtige Weg ist. Das entscheidende Problem ist, dass der html-Quellcode den Bootstrap für viele Dinge voraussetzt natürlich in Contao ganz anders ist. An der ein- oder anderen Stelle kann man einfach eine bootstrap-CSS-Klasse eintragen und dann geht es auch, an anderer Stelle müsste man aber alles umbauen - hmm ... Zum Beispiel geht bootstrap bei checkboxen davon aus dass die mit dem Label verschachtelt sind ...

Code:

<label class="checkbox"> <input type="checkbox"> Remember me </label>

Bei Contao stehen die aber nacheinander. Natürlich könnte man das jetzt das Template umbauen, was aber halt extrem update-unfreundlich wäre und auch viel Arbeit ...
Ich habe schon darüber nachgedacht, ob man via less oder via php das eine less-datei erzeugt eine Art "Transformationsdatei" baut - Also mit Mixins die bootstrap-Anweisungen in die für Contao nötigen CSS-Selektoren "übersetzt" ...
JS-Dateien kann man ja via theme+ und jQuery-Plugin integrieren, less-Dateien ebenso via theme+ und phpless ...
Cool wäre halt, wenn man die bootstrap- und die Contao-Quelle unangetastet lassen könnte. Dann müsste man bei einem Update auf der einen oder anderen Seite nur die "Transformationsdatei" updaten ... Klingt das irgendwie machbar? Hmm - ich forsche mal weiter.
24.08.2012, 19:58
fiedsch

Zitat:

Zitat von rene-ddorf

Code:

<label class="checkbox"> <input type="checkbox"> Remember me </label>

So etwas ließe sich ja per Javascript DOM-Manipulationen "korrigieren". Ob das allerdings praktikabel ist, kann ich nicht einschätzen. Aber zumindest blieben die Contao-Templates dabei unangetastet.
28.08.2012, 10:20
rene-ddorf

Ich habe also etwas weiter geforscht ... Eigentlich wäre es ja schön, wenn man nicht während der Laufzeit das Dom-Gerüst umbauen müsste ( ... ich spreche hier natürlich vom Wunschziel ;-))
Deshalb habe ich mal was versucht mit less ... Rein theoretisch könnte man die normale bootstrap.css nehmen und die via @import in eine bootstrap-contao-bridge.less importieren ... Dort müsste man dann auf alle Klassen der bootstrap.css Zugriff haben und diese dann quasi übersetzen ... Zum Beispiel um einem submit-Button ohne die Klassenzuweisung .btn dessen Eigenschaften zu übergeben sowas wie:
.submit { .btn; } , also als mixin ...
Leider scheitert dieser Versuch zur Zeit schon bei dem @import ... Ich benutze dazu Tristans Theme+ und phpless ...
Es scheint so, dass der Pfad, der da übergeben wird, falsch ist ... Und mit absolutem Pfad ging's leider auch nicht ...
Ich dachte daran die Dateien anders zu verbinden. Über die Funktion der Zusammenlegung, aber ich glaube, das passiert nach dem Less-Parser.
In der bootstrap.css (umbenannt zu bootstrap.less) funktioniert die Zuordnung ebenfalls nicht ... Sehr seltsam ... Da die bootstrap.less ja schon eine geparste Datei ist dürfte es eigentlich kein Problem von mehreren verschachtelten Mixins sein. Sprich die über Mixins zugeordneten Klassen enthalten keine anderen Mixins (was der Fall wäre, wenn man die original Bootstrap-Less-Dateien nehmen würde). Ich bin gerade etwas ratlos ... Vielleicht geht es ja einfach auch nicht, kann schon sein, aber irgendwie erscheint es mir rein theoretisch möglich.
Ich denke, dass man um einige Templateanpassungen (fe_page, navigation usw.) nicht rumkommt. Aber die meisten anderen Elemente für Forms, Tabellen, Buttons usw. ohne Eingriff durch den Nutzer direkt in der Bridge-Datei zu übersetzen wäre schon ein ziemlicher Hammer, da man so sehr schnell das Framework nutzen könnte ( zumal ich gesehen habe, dass es für die anderen CMS eine Anpassung gibt - wobei ich nicht weiss wie weitreichend die jeweils ist, da ich eigentlich keine Lust habe nur deshalb mal Typo oder Joomla oder WP zu installieren ;-)
Naja, vielleicht hat ja jemand 'ne Idee...
Gruß
René
04.01.2013, 18:19
droptix

think reverse

Habe von jemandem gehört, der es genau anders herum angegangen ist: nicht Contao verbiegen, damit es mit Bootstrap funktioniert, sondern er hat Bootstrap angepasst.

Ich versuch ihn mal zu erreichen, dann kann er seine Erfahrungen hier vielleicht posten.

P.S. Warum interessiert mich eigentlich das Ganze? Weil Bootstrap einfach gewaltig ausgereift ist und ohne viel Arbeit quasi blitzschnell ein hübsches Layout hervor zaubert... was dazu noch per Knopfdruck "template-bar" (also austauschbar) ist. Außerdem ist die responsive-Sache schon ein sehr wichtiges Feature, das Contao nicht verschlafen sollte. Diskussionen dazu gibt es ja bereits...
17.04.2013, 17:32
djo

Das Könnte interessant sein:

https://github.com/muckz/Bootstrap-for-Contao
http://denniserdmann.de/bootstrap-mit-contao-betreiben/

Sollte ich mal was gebastelt bekommen, meld ich mich. :-)

Liebe Grüße,
Daniel
11.05.2013, 12:00
aadursun

@djo

gibt was neues bei Dir zu Bootstrap, kamst du in deinem Vorhaben weiter? Kann man sich was anschauen?

Viele Grüße
aadursun
11.05.2013, 12:54
djo

Also, ich habe mal ein wenig experimentiert, hat auch teilweise funktioniert - aber ich muss mich da noch mal intensiv dransetzen.
Ich teste gerade folgenden Weg:
Auf der Bootstrap-Seite den Quellcode der Beispielseiten anschauen und die Klassen im Template der fe_page.html5 Bootstrap entsprechend ergänzen. Das gleiche würde ich dann für das Navigationstemplate, Formulare etc. machen. Ich teste das in der RC1 von Contao 3.1 und würde mich melden sobald ich richtig erfolgreich bin.
Anscheinend soll man die CSS-Files von Bootstrap direkt im fe_page-Template einbinden, da es Probleme mit den gecachten Contaoscripts geben soll.

Hier wurde was für Contao 2.11 vorbereitet.

https://github.com/muckz/Bootstrap-for-Contao

Liebe Grüße,
Daniel
21.05.2013, 23:01
bpoiss

Sry, falsches Thema, Post bitte löschen
22.05.2013, 09:31
kayyy

Wo liegt denn genau das Problem ?

Natürlich reicht es nicht aus, nur die Bootstrap CSS Dateien einzubinden.

Ich bin gerade dabei meine dritte Seite mithilfe von Bootstrap und Contao umzusetzen.
22.05.2013, 10:00
bpoiss

Ich denke das Problem wird bei den meisten daran liegen, dass z.B. die Bootstrap Navigation andere Klassennamen verwendet als die standard Navigation von Contao, siehe Thema: Bootstrap Navigation DropDown. Die Bootstrap dateien will ich nicht verändern, daher habe ich das Problem so gelöst, dass ich die Templates angepasst habe, jedoch finde ich das sehr umständlich.
22.05.2013, 12:35
kayyy

Zitat:

Zitat von bpoiss

Ich denke das Problem wird bei den meisten daran liegen, dass z.B. die Bootstrap Navigation andere Klassennamen verwendet als die standard Navigation von Contao, siehe Thema: Bootstrap Navigation DropDown. Die Bootstrap dateien will ich nicht verändern, daher habe ich das Problem so gelöst, dass ich die Templates angepasst habe, jedoch finde ich das sehr umständlich.

Naja wie soll es auch sonst gehen :)
Die Template Dateien müssen ebend angepasst werden. Ist doch nicht alles copy & paste

Allerdings gibt es hier glaube ich ein Problem mit dem Dropdown Menü, hier müsste man im template eine php if Abfrage machen.
"Wenn level1, dann zeige das an, wenn level2 diesen code".
22.05.2013, 13:20
bpoiss

Zitat:

Zitat von kayyy

Allerdings gibt es hier glaube ich ein Problem mit dem Dropdown Menü, hier müsste man im template eine php if Abfrage machen.
"Wenn level1, dann zeige das an, wenn level2 diesen code".

Genau das habe ich gemacht.

PHP-Code:

<ul class="<?php echo $this->level; if($this->level == level_1) echo ' nav'; else if($this->level == level_2) echo ' dropdown-menu'; ?>"> <?php foreach ($this->items as $item): ?> <?php if ($item['isActive']): ?> <li class="<?php echo $item['class']; if(strpos($item['class'], 'submenu') !== false) echo ' dropdown'; ?>"> <?php if(strpos($item['class'], 'submenu') !== false): ?> <a class="dropdown-toggle <?php echo $item['class']; ?>" data-toggle="dropdown"> <?php echo $item['link']; ?> <b class="caret"></b> <?php else: ?> <a class="<?php echo $item['class']; ?>"> <?php echo $item['link']; ?> </a> <?php endif; ?> </a> <?php echo $item['subitems']; ?> </li> <?php else: ?> <li<?php if ($item['class']): ?> class="<?php echo $item['class']; if(strpos($item['class'], 'submenu') !== false) echo ' dropdown'; ?>" <?php endif; ?>> <a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; if(strpos($item['class'], 'submenu') !== false) echo ' dropdown-toggle'; ?>" <?php if(strpos($item['class'], 'submenu') !== false) echo 'data-toggle="dropdown"'; ?> <?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?> <?php if(strpos($item['class'], 'submenu') !== false): ?> <b class="caret"></b> <?php endif; ?> </a><?php echo $item['subitems']; ?> </li> <?php endif; ?> <?php endforeach; ?> </ul>

Sieht allerdings jetzt nicht mehr sehr übersichtlich aus, schon garnicht in dem Editor von Contao. Das Template funktioniert so für mich, allerdings auch nur wenn meine Seitenstruktur nicht mehr als 2 Level hat, für 3 Level müsste man den Code nochmal um ein Stück erweitern. Allerdings habe ich mich dazu entschieden bei künftigen Contao-Seiten ohne Bootstrap zu arbeiten, und die Navigation so wie sie standardmäßig im Template ist, mit eigenen css Anweisungen zu stylen.
22.05.2013, 13:39
kayyy

Zitat:

Zitat von bpoiss

Sieht allerdings jetzt nicht mehr sehr übersichtlich aus, schon garnicht in dem Editor von Contao. Das Template funktioniert so für mich, allerdings auch nur wenn meine Seitenstruktur nicht mehr als 2 Level hat, für 3 Level müsste man den Code nochmal um ein Stück erweitern. Allerdings habe ich mich dazu entschieden bei künftigen Contao-Seiten ohne Bootstrap zu arbeiten, und die Navigation so wie sie standardmäßig im Template ist, mit eigenen css Anweisungen zu stylen.

Ich habe mit Bootstrap keinerlei Probleme, läuft alles wunderbar und geht schnell.
Ich arbeite aber derzeit an einem Contao Bootstrap Theme für die Community.

Wird man sich dann später auf Github downloaden können.
22.05.2013, 14:00
aadursun

@kayyy

kannst du uns 1-2 URLs senden; das wäre klasse von Dir.

Was meinst du, wann das Theme im Github landen würde?

Viele Grüße
aadursun
05.06.2013, 19:17
kayyy

Hier ist mal ein Layout, was allerdings noch in Arbeit ist:
http://www.pixelianer.com/neu/

Das Bootstrap Theme wird denke ich bis ende diesen Monat dauern, bis es auf Github veröffentlich wird.
Ich versuche möglichst alles so umzuschreiben, damit Bootstrap perfekt integriert wird.

So müssen eben auch viele Templates umgeschrieben werden wie breadcrumb, nav etc.
18.06.2013, 10:34
ffreak

Hey, bin sehr interessiert an dem Template, jetzt mit Bootstrap 3 vor der Tür, wäre da auch
eine Kompatibilität in die Richtung denkbar?

Liebe Grüße
Robert
19.07.2013, 10:01
lackschuh

Zitat:

Zitat von kayyy

Das Bootstrap Theme wird denke ich bis ende diesen Monat dauern, bis es auf Github veröffentlich wird.
Ich versuche möglichst alles so umzuschreiben, damit Bootstrap perfekt integriert wird.

So müssen eben auch viele Templates umgeschrieben werden wie breadcrumb, nav etc.

Hi

Gibts schon Neuigkeiten?

mfg
19.07.2013, 12:01
kayyy

Das freie Bootstrap Theme wird mit unserer neuen Seite in den nächsten 1 bis 2 Wochen released.
30.07.2013, 03:23
Slind

Zitat:

Zitat von kayyy

Das freie Bootstrap Theme wird mit unserer neuen Seite in den nächsten 1 bis 2 Wochen released.

gibt es schon was zu sehen ?
31.07.2013, 09:16
lackschuh

Zitat:

Zitat von Slind

gibt es schon was zu sehen ?

Schau auch mal hier vorbei.
31.07.2013, 11:53
kayyy

Zitat:

Zitat von Slind

gibt es schon was zu sehen ?

Ich schreibe gerade hier das Tutorial. Nachdem Tutorial gibt es dann auch das Bootstrap Theme als Download.

http://www.pixelianer.com/tutorials-...bootstrap.html
Forum Thema: https://community.contao.org/de/show...338#post277338