Erfahrungen mit Bootstrap

[freak_me11]

Hallo,

ich versuche mir gerade einen guten Workflow für responsive websites an zu eigenen und teste gerade die Boilerplate Bootstrap ein wenig.

Habt Ihr schon Erfahrungen mit Bootstrap in Verbindung mit Contao gemacht? Auf den ersten Blick klingt das für mich alles sehr gut, doch bevor ich mich da jetzt richtig einarbeite, wollte ich erst mal hier fragen, was ihr davon haltet und welche Erfahrungen ihr damit schon gemacht habt?


Freue mich auf euer Feedback!

[webstar]

Such hier mal im Forum, da gab es schon einmal ein paar Erfahrungen.

Ich selbst habe Bootstrap auf einer Website mit Contao eingesetzt, wo es schnell gehen musste. Mit ein paar Templateanpassungen/CSS-Klassen Eintragungen im Backend funktioniert es wunderbar zusammen.

[freak_me11]

Hi,

ja, das habe ich schon gelesen. Mich würde vor allem interessieren, wie es mit C3 funktioniert...

Auf was ich auch noch gestoßen bin ist LESS -> Wäre doch mit Bootstrap eigentlich eine nette Zusammenstellung oder?

[freak_me11]

Wo ich noch nicht so richtig weiter weiß ist folgendes: Der generell Aufbau von Bootstrap sieht so aus:

div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>


Die zweite div class kann ich einfach im Artikel vergeben. Das ist kein Problem. Also sage ich z.B. Kopfzeile div class = span4
Wo aber kann ich das row hin packen? Muss ich die fe_page umschreiben?

[webstar]

Bootstrap arbeitet ja auch mit Less... einfach mal die Doku anschauen. Mit Theme+ kann man das beispielsweise auch in Contao einbinden (auch wenn es wohl zur Zeit keine kompatible C3 Version von Theme+ gibt). Ob mit Contao 3 oder 2 ist ja an sicht egal. Im Hintergrund läuft ja eh nur HTML & CSS

Bezüglich des Aufbaus kommt halt drauf an, was du brauchst und möchtest. Bei mir sind die Artikel oftmals als Zeile deklariert und die Inhaltselemente darin dann mit den span Klassen gekennzeichnet. Bei deinem Fall könnte man irgendwo in der fe_page die Container Klassse row setzen...

[freak_me11]

Was mir aufgefallen ist:

Wenn man die bootstrap-responsive(.min).css einbindet, verändert sich nicht wirklich viel. Nur die bootstrap(.min).css wirkt. Es ist ja z.B. so, dass Buttons vor definiert sind mit btn btn-primary ein blauer button. Wirkt nur bei bootstrap(.min).css nicht bei bootstrap-responsive(.min).css

Oder muss ich einfach beides CSS Dateien einbinden:
<link href="/files/themes/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/files/themes/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet"> ?

[zonky]

Wo aber kann ich das row hin packen?

die "schnelle Methode"
* vor den span-Containern ein HTML-Element mit dem row
* nach den span-Containern ein HTML-Element mit dem abschließenden div-Tag (ggf. gleich wieder ein row-Start)

... nicht schön, aber geht

[aadursun]

Wo finde ich die Contao Bootstrap Boilerplatte?

mfg
aadursun

[aadursun]

Dann kann man sich davon auch ein besseres Bild machen.

Viele Grüße
aadursun

[zonky]

Wo finde ich die Contao Bootstrap Boilerplatte?

mfg
aadursun

ich würd mal sagen: nirgens ;-)

der HTML-Aufbau von Bootstrap und von Contao sind eher "inkompatibel" da für die Formatierung notwendigen class- oder data-Attribute so nicht geändert/eingegeben werden können oder wie bei dem Beispiel oben für eine Zeile der Start- und End-Tag in Contao fehlen.

Man kann sich sicher einigen "hinbasteln" - aber für ein "geschmeidiges Arbeiten" sehe ich derzeit wenig Chancen :-(

... find ich auch schade!

eine Möglichkeit wäre ein Contao-Bootstrap-Fork - wäre aber ein Berg an Arbeit

[zonky]

Wo ich noch nicht so richtig weiter weiß ist folgendes: Der generell Aufbau von Bootstrap sieht so aus:

div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>


Die zweite div class kann ich einfach im Artikel vergeben. Das ist kein Problem. Also sage ich z.B. Kopfzeile div class = span4
Wo aber kann ich das row hin packen? Muss ich die fe_page umschreiben?

es gibt für die Erweiterung subcolums eine Anpassung für das Bootstrap-CSS als Alternative zum eingesetzten YAML

[schman]

Wo ich noch nicht so richtig weiter weiß ist folgendes: Der generell Aufbau von Bootstrap sieht so aus:

div class="row">
<div class="span4">...</div>
<div class="span8">...</div>
</div>


Die zweite div class kann ich einfach im Artikel vergeben. Das ist kein Problem. Also sage ich z.B. Kopfzeile div class = span4
Wo aber kann ich das row hin packen? Muss ich die fe_page umschreiben?

Also ich arbeite hier mit Artikeln, bei den Artikeln kannst du die row als Klasse vergeben. Wie schon gesagt wurde, ist die Arbeit allerdings nicht so geschmeidig wie ich das gerne hätte
Es funktioniert aber.

[zonky]

an "Workarounds" gibt es sicher einige Möglichkeiten

* man könnte sich auch zwei Module erstellen um den "row-DIV-Container" zu öffnen und zu schließen
* eine Erweiterung basteln, die über den Template-Hook den fehlenden DIV-Container hinzufügt

Bootstrap finde ich schon recht prima und würde es auch gern "geschmeidiger" einsetzen - ggf. würde eine Liste helfen was Bootstrap erwartet und was Contao liefert bzw. nicht liefert

[kayyy]

Wo liegt denn genau das Problem ?

Einfach fe_page entsprechend anpassen und dann kann man Contao auch wunderbar mit Bootstrap umsetzen.

Habe derzeit mein drittes Projekt mit Boostrap umgesetzt.

[zonky]

habe ich letztens erst entdeckt: [wrapper] https://contao.org/de/extension-list...rapper.de.html

damit könnte man auch die row´s organisieren

[zonky]

@kayyy: sind die Seiten online? Links?

[kayyy]

@kayyy: sind die Seiten online? Links?

Zwei sind leider Kunden Seiten, die noch nicht online sind.

Meine eigene woran ich gerade arbeite, lade ich gerade mal hoch. Dauert aber ein wenig.

Bzgl. der rows, ich verstehe das Problem nicht ganz. Wollt Ihr etwa Bootstrap einsetzen ohne das Template zu bearbeiten ?
Denn mir scheint es so, dass das hier niemand macht.

[kayyy]

habe ich letztens erst entdeckt: [wrapper] https://contao.org/de/extension-list...rapper.de.html

damit könnte man auch die row´s organisieren

http://api.jquery.com/wrap/

[zonky]

Wollt Ihr etwa Bootstrap einsetzen ohne das Template zu bearbeiten?

wie schon oben geschrieben - Möglichkeiten den Quelltext "Boostrap-like" zu bekommen gibt es einige....

sofern ein Artikel eine "row" darstellt ist das recht simpel - und die Inhaltselemente werden als "span" ausgezeichnet

... sollen aber in einen Artikel mehrere "row´s", so müssen die ja erzeugt werden z.b. mit einem eigenen HTML-Element bzw. dem Wraper - auch notwendig, wenn man eine Verschachtelung herstellen möchte...

[kayyy]

wie schon oben geschrieben - Möglichkeiten den Quelltext "Boostrap-like" zu bekommen gibt es einige....

sofern ein Artikel eine "row" darstellt ist das recht simpel - und die Inhaltselemente werden als "span" ausgezeichnet

... sollen aber in einen Artikel mehrere "row´s", so müssen die ja erzeugt werden z.b. mit einem eigenen HTML-Element bzw. dem Wraper - auch notwendig, wenn man eine Verschachtelung herstellen möchte...

Könnte man ja ganz einfach mit jquery lösen. dem zu verschachtelnden div eine class wrap geben und dann per jquery wrap ein div erzeugen mit der class row

Etwa

$('wrap').wrap('<div class="row" />');

Achso btw: bzgl. der Verschachtelung, es gibt ja die Extension Subcolumns Die ist hierfür optimal, hierfür gibt es auch eine Bootstrap Erweiterung.

[zonky]

Könnte man ja ganz einfach mit jquery lösen. dem zu verschachtelnden div eine class wrap geben und dann per jquery wrap ein div erzeugen mit der class row

Etwa

$('wrap').wrap('<div class="row" />');

... zu "einfach" würde ich das ad hoc nicht einsortieren - nehmen wir an ich habe fünf Inhaltselemente ce_text und will die in zwei rows (1x2 und 1x3) haben. Ausgangspunkt würde i.E. so aussehen:

<!-- row1 -->
<div class="ce_text span4">...</div>
<div class="ce_text span8">...</div>

<!-- row2 -->
<div class="ce_text span4">...</div>
<div class="ce_text span4">...</div>
<div class="ce_text span4">...</div> 

wie würde jQuery aussehen um das im DOM abzubilden:

<!-- row1 -->
<div class="row">
  <div class="ce_text span4">...</div>
  <div class="ce_text span8">...</div>
</div>

<!-- row2 -->
<div class="row">
  <div class="ce_text span4">...</div>
  <div class="ce_text span4">...</div>
  <div class="ce_text span4">...</div>
</div> 

Achso btw: bzgl. der Verschachtelung, es gibt ja die Extension Subcolumns Die ist hierfür optimal, hierfür gibt es auch eine Bootstrap Erweiterung.

...korrekt - Möglichkeiten gibt es viele... ;-)

[Bas]

Please stop using twitter bootstrap

Meine Empfehlung: SASS/Compass + Susy (Responsive grids for Compass)

Tutorials (natürlich alle englisch):
SASS Einführung (Screencasts)
Compass Einführung
Tutorial "Responsive Grids With Susy"

Falls Interesse besteht, bin ich gerne bereit zu erläutern warum ich SASS/Compass/Susy für die bessere Lösung halte.

[zonky]

Hallo Bas,

"das Bessere ist der Feind des Gutem" ;-)

...dann lass mal hören wie Deine Meinung ist.

Ich habe zwei Projekte (webbasierte DB-Applikation) per Yii + Bootstrap umgesetzt und das hat alles prima funktioniert.

Interessant finde ich http://www.blankwork.net/ (leider häufig nicht erreichbar...) und http://groundwork.sidereel.com/?url=home

[Lego2013]

Meine Empfehlung: SASS/Compass + Susy (Responsive grids for Compass)

Bas hat schon Recht, Susy ist ein tolles Gridsystem. Es wurde von Chris Eppstein entwickelt, der auch für Compass verantwortlich zeichnet. Und Compass wiederum wurde mit Sass/SCSS geschrieben. Das erklärt eigentlich, warum alles so gut harmoniert. Ich selbst habe 2 Projekte mit Susy umgesetzt und das lief problemlos - ist natürlich auch nicht kompliziert. Momentan ist in Compass ja noch Blueprint als Gridsystem enthalten. Das wird aber lt. Chris' Blog in Kürze durch Susy ersetzt.

Blankwork habe ich auch probiert, traf aber meinen Geschmack nicht so. Am liebesten hatte ich in der Vergangenheit immer Foundation 3 von Zurb (jetzt schon Version 4). Leider gibt es dafür keine Contao-Integration, weshalb ich jetzt auf YAML4 umgestiegen bin. Ich muss sagen, dass es sich hier um ein sehr durchdachtes System handelt, aber etwas gewöhnungsbedürftig (liegt aber sicher an mir). Die Contao-Integration ist super, wenn man die (kostenpflichtige) Erweiterung YAMLFront einsetzt.

[schman]

Falls Interesse besteht, bin ich gerne bereit zu erläutern warum ich SASS/Compass/Susy für die bessere Lösung halte.

Also mich würde das ganze sehr interessieren warum SASS/Compass/Susy. Ich wäre froh wenn du das erläutern kannst.

Ich habe zwei Projekte (webbasierte DB-Applikation) per Yii + Bootstrap umgesetzt und das hat alles prima funktioniert.

Also ich finde Bootstrap absolut klasse, gerade für Applikationen würde ich auch darauf bauen.

[Bas]

Dann will ich mal ausführen warum SASS/Compass/Susy meine Wahl ist (anstatt LESS und Bootstrap).
(Wer nicht weiss was SASS und LESS (oder Stylus etc.) ist der guckt einmal hier: http://www.vanseodesign.com/css/css-preprocessors/)

Die erste Entscheidung ist die zwischen SASS und LESS. Ich halte beide an sich für gleichwertig. (siehe auch sass-vs-less-vs-stylus-a-preprocessor-shootout)

Was den Unterschied macht ist Compass. Compass ist eine Bibliothek aufbauend auf SASS welche dem Webworker unzählige Mixins, Funktionen etc bereitstellt.
Wenn man z.B. ein Mixin zur Zuweisung eines Border-Radius nutzen möchte, macht man es sich entweder selbst oder greift auf Compass zurück. Ich empfehle einmal die Compass-Reference durch zu gucken, es gibt praktisch zu allem vorbereitete Mixins. Ich muss mir keine Gedanken darüber machen welche Definitionen ich für die verschiedenen Browser benötige, das hat Compass bereits für mich gemacht.
Meines Wissens gibt es für LESS nichts vergleichbares.

Als nächstes steht die Wahl des Grids an (Bootstrap gibt es auch für SASS, obwohl es von haus aus auf Basis von LESS ist.)
Bootstrap ist ein fertiges Framework, welches bestimmte Klassen etc. benötigt und bringt darüber hinaus Mixins für alles mögliche mit (Twitter-Like blaue Buttons etc.)
Susy ist im Vergleich weniger ein Framework, sondern ein Tool welches mich mein eigenes Grid definieren lässt. Ich bin total frei in der Definition meiner Klassen, Breakpoints etc. -- das ist im ersten Moment natürlich mehr Arbeit, aber ich bin total frei in meiner Definition und an keine Vorgaben gebunden. Was dazu führt das die Contao-Integration einfacher ist, .. sicher muss ich den Elementen noch meine vorbereiteten Klassen zuweisen, aber ich benötige keinerlei zusätzliche strukturierende Elemente wie Bootstrap.

---
Das war nun ein wenig kurz, aber muss im Moment ausreichen. Freue mich auf Feedback und Diskussion.

[zonky]

@Bas

gibt es eine Seite wo Umgesetzt? welche Erfahrungen?

btw: habe mal GroundworkCSS eingesetzt - wenn man es "schnell" haben will/muss... kann man alles über CSS-Klassen einstellen => dafür ist das FW recht groß

Beispiel: http://www.alles-zu-meiner-zeit.de

[jeykon]

Also ich schreibe die Row als Inhaltselemente mit Custom html und gebe dann dem Artikel die Container class.
Ich hab eine ganze Seite mit BS umgesetzt. Das erfordert aber auch die Anpassung einiger Templates.


Gesendet von meinem iPhone mit Tapatalk

[zonky]

Also ich schreibe die Row als Inhaltselemente mit Custom html und gebe dann dem Artikel die Container class.
Ich hab eine ganze Seite mit BS umgesetzt. Das erfordert aber auch die Anpassung einiger Templates.


Gesendet von meinem iPhone mit Tapatalk

dito: https://community.contao.org/de/show...l=1#post266721

[webstar]

Wenn es allein um die Wahl des Gridsystems geht, gibt es sicher bessere alternativen.

Wenn man viele Website umsetzt, kommt man immer wieder an den Punkt, wo man die selben Komponenten einsetzt. Für mich ist es dabei von Vorteil einen definierte Html/CSS Struktur zu haben, die sich egal wie das design ist, doch auch nicht ändert.

Darin liegt für mich der wert in bootstrap. Für mich hat sich die Struktur bewährt. Vor allem unter der 3er Version.

In der 3er Version wird es auch leichter durch die config das design anzupassen bzw. Wenn gewünscht komplett auszutauschen.

[mj1985]

Ich liebe Bootstrap mittlerweile, klar ist es erst eine heiden Arbeit umzudenken, aber dann geht es einem richtig gut von der Hand.
Natürlich spielt da auch mit, das es für Contao eine richtig gute Erweiterung gibt (nämlich die von webstar ).
Für mich liegt der Vorteil auf der Hand, es gibt bei uns externe Seiten die nicht auf Contao aufbauen können, aber das gleich die Design haben müssen. Und da wir auf der externen Seite auf Bootstrap setzen, gibt es nichts einfacheres.
Aber auch das Forumlargrid,- layout und die JS-Sachen helfen ungemein.