Bootstrap

[tavaron]

Hallo zusammen,

ich starte zum ersten Mal jetzt mit einem Contao-Projekt, bei dem das Frontend auf Bootstrap basieren soll.

Jetzt wollte ich mal Fragen was sind denn so die best-practice Methoden Bootstrap in einem Contao-Projekt zu verwenden
und sollte man eher auf Bootstrap 4 oder auf Bootstrap 3 setzen?
Letzteres gerade auch in Hinblick auf die Verwendung von SCSS.

Nebenbei würde ich auch mal Fragen, ob es gute Tutorials zum Thema Frontend-Entwicklung in Contao 4 gibt?

Danke im Voraus!

[mlweb]

Schau Dir mal die Contao-Erweiterung für Bootstrap an http://contao-bootstrap.netzmacht.de/
Ich setz zwar kein Bootstrap ein und kenne die Erweiterung deshalb nicht aus der Praxis. Laut Internetseite und Forum gibt es aber für Contao 4 schon eine funktionierende Alpha-Version.

[markocupic]

Hallo
Ich würde ganz klar zu bs 4 tendieren. Nicht zu letzt, weil es auf flexbox setzt. Viele features kannst du nutzen indem du die templates mit den bootstrap Klassen versiehst.
Schau dir mal dma_simple_grid an, wenn es darum geht die Grid Komponente in Contao zu nutzen.
Unter http://github.com/markocupic habe ich auch ein paar Erweiterungen, die bootstrap ready sind.

Bezüglich Frontend Entwicklung schaust du dir am besten mal ein paar bestehende Erweiterungen an.
Liebe Grüsse
Marko

[webstar]

Hallo zusammen,

ich starte zum ersten Mal jetzt mit einem Contao-Projekt, bei dem das Frontend auf Bootstrap basieren soll.

Jetzt wollte ich mal Fragen was sind denn so die best-practice Methoden Bootstrap in einem Contao-Projekt zu verwenden
und sollte man eher auf Bootstrap 4 oder auf Bootstrap 3 setzen?

Als ich vor meinem ersten Bootstrap Projekt in Contao stand, habe ich mir die Frage auch gestellt. Es gibt an sich zwei Herangehensweisen: Bootstrap so anpassen, dass es mit Contaos Markup funktioniert oder Contao anpassen, sodass es mit Bootstrap funktioniert.

Ersteres geht wohl noch mit Bootstrap 3 ganz gut, spätestens mit Bootstrap 4, wo stark auch Klassen für Kindelemente angegeben werden, wo Contao keine Klassen besitzt, muss man schon einiges machen.

Lange Rede, kurzer Sinn: Ich empfehle die zweite Methode. Auf dieser Grundlage ist auch die hier bereits erwähnte Erweiterung contao-bootstrap entstanden. Für Contao 3.5 gibts diese für Bootstrap 3, für Contao 4.4 wird an einer Bootstrap 4 Version gearbeitet (Aktueller Stand Alpha, noch nicht alle Komponenten).

Die Erweiterung (für Contao 4.4) bietet die folgende Möglichkeiten:

• Layout mittels CSS-Klassen gestalten (anstatt des Layout-Builders von Contao)
• Einsatz einer Grid-Erweiterung. Großer Unterschied zu quasi allen anderen Grid Erweiterungen (Rock Solid Columns, Subcolumns, Easy Grid, euf_grid, ..., ...) ist dieser, dass die Spaltendefinitionen zentral erfolgen im Theme. Ein Redakteur muss also nicht alle Details kennen, wie das Grid aufgebaut ist. Auch wenn man mal für eine Gerätegröße etwas ändern muss, kann man dies an einer Stelle tun.
• Navbar Modul
• Formulare mit Bootstrap-Markup (wird für Contao 4.4 gerade entwickelt)

Was sie unter Contao 3.5 kann ist unter http://contao-bootstrap.netzmacht.de/ beschrieben.

Meine Erweiterung ist ein Ansatz. Es gibt auch einige andere Erweiterungen. Googlen liefert sie dir. Wie die funktionieren, weiß ich nicht. Leider ist bis jetzt keine Bereitschaft an einer gemeinsamen Lösung zu erkennen (bei denen ich angefragt habe).

Letzteres gerade auch in Hinblick auf die Verwendung von SCSS.

Gibt es auch für Bootstrap 3 als offiziellen Port. Ich würde aber auch für Bootstrap 4 tendieren, wenn die Wahl auf BS fällt. Es gibt hier halt noch einige Sachen, die ggf. geändert werden.

[mlweb]

Danke für Deine ausführliche Erklärung. Ist für den TO hoffentlich hilfreich.

[Sinus]

Hallo, ich benutze um meine Themes zu machen kein CSS von Contao oder Erweiterungen. Sondern nur bootsrap/sass :

https://github.com/twbs/bootstrap-sass

der große Vorteil besteht darin über "mixins" das Grid zu definieren und einzelnen Elementen im Markup keine Klasse geben zu müssen.

.wrapper {
  @include make-row();
}
.content-main {
  @include make-lg-column(8);
}
.content-secondary {
  @include make-lg-column(3);
  @include make-lg-column-offset(1);
}

Gruß Sinus

[tavaron]

Super, danke für die Hilfe.

[pumukel]

Schau Dir mal die Contao-Erweiterung für Bootstrap an http://contao-bootstrap.netzmacht.de/
Ich setz zwar kein Bootstrap ein und kenne die Erweiterung deshalb nicht aus der Praxis. Laut Internetseite und Forum gibt es aber für Contao 4 schon eine funktionierende Alpha-Version.

Hallo mlweb

Ist aber sehr umständlich zu installieren. Dann ist es eine alpha Version. Und hier stehe ich dann auch wieder auf dem Schlauch.

http://contao-bootstrap.readthedocs....ll.html#bundle

Bundle

Dank des Bundles gibt es einen komfortablen Weg alle Pakete von Contao-Bootstrap auf einmal zu installieren. Da das Bundle selbst keine Versionen vorgibt, empfiehlt es sich zusätzlich die Abhängigkeit zur Core Komponente zu setzen.

{
    "require": {
        "contao-bootstrap/core": "~1.0"
        "contao-bootstrap/bundle": "*"
    }
}

Muss ich hierfür ein json Datei mit obigen Inhalt erstellen? Und dann composer install DieErstellteJsonDatei benutzten oder wie oder was?. Ist eben wieder sehr toll dokumentiert. Ich habe ZURB Foundation und Bootstrap 3.3.7 in den letzten Monaten ziemlich ausgiebig getestet. Nicht mit Contao, sondern mit purem HTML. Fazit: Beide sind eigentlich eine absolute Katastrophe. Klassen Grab, Div Wüste usw. Hierbei meine ich jetzt nur das reine CSS Frame-Work. Bootsrtap 4 hat immer noch das gleiche beschissene Off Canvas Menu!!! Ich benutze lieber das YAML CSS Farmework 4.1.2 von Dirk Jesse. Ist einfach immer noch genial und auch heute noch unter den Top 4 CSS Frameworks. Es ist auch inteligenter aufgebaut.

Gruss pumukel

[mlweb]

Die Frage sollte eher an @webstar gehen und besser im entsprechenden Unterforum gestellt werden. Für Bootstrap mit Contao 4 würde ich das im Moment sogar genau unter folgendem Link machen https://community.contao.org/de/show...verf%C3%BCgbar
Ich wollte den TO nur darauf aufmerksam machen, dass es eine Bootstrap-Erweiterung für Contao gibt.
Ich selbst baue meine Layouts/Themes ohne Frameworks wie Bootstrap oder Foundation und kenne die Erweiterung deshalb nicht aus der Praxis.

Edit: Links hinzugefügt.

[webstar]

Hallo mlweb

Ist aber sehr umständlich zu installieren. Dann ist es eine alpha Version. Und hier stehe ich dann auch wieder auf dem Schlauch.

http://contao-bootstrap.readthedocs....ll.html#bundle

Bundle

Dank des Bundles gibt es einen komfortablen Weg alle Pakete von Contao-Bootstrap auf einmal zu installieren. Da das Bundle selbst keine Versionen vorgibt, empfiehlt es sich zusätzlich die Abhängigkeit zur Core Komponente zu setzen.

{
    "require": {
        "contao-bootstrap/core": "~1.0"
        "contao-bootstrap/bundle": "*"
    }
}

Muss ich hierfür ein json Datei mit obigen Inhalt erstellen? Und dann composer install DieErstellteJsonDatei benutzten oder wie oder was?. Ist eben wieder sehr toll dokumentiert.

Danke für die Blumen. ;-) Alle Bemühungen die Nutzer, die sich das selbst angeeignet haben mit in die Dokumentation einzubeziehen, sind gescheitert. Viele kommen ohne klar. Alle können aber dran mitarbeiten.

Ich habe ZURB Foundation und Bootstrap 3.3.7 in den letzten Monaten ziemlich ausgiebig getestet. Nicht mit Contao, sondern mit purem HTML. Fazit: Beide sind eigentlich eine absolute Katastrophe. Klassen Grab, Div Wüste usw. Hierbei meine ich jetzt nur das reine CSS Frame-Work. Bootsrtap 4 hat immer noch das gleiche beschissene Off Canvas Menu!!! Ich benutze lieber das YAML CSS Farmework 4.1.2 von Dirk Jesse. Ist einfach immer noch genial und auch heute noch unter den Top 4 CSS Frameworks. Es ist auch inteligenter aufgebaut.

Gruss pumukel

Es setzt sich leider nicht immer die Qualität durch. Aber zum Glück hat man ja die Qual der Wahl.

Zu deiner eigentlichen Frage: Die Doku bezieht sich auf v1.0. Bei der Alpha-Version ist es derzeit notwendig explizit die Alpha anzufordern. Dazu bei den jeweiligen Komponenten folgendes eingetragen: ~2.0@alpha (entweder in der composer.json oder über den CM)

Also derzeit:

• contao-bootstrap/core: ~2.0@alpha
• contao-bootstrap/grid: ~2.0@alpha
• contao-bootstrap/layout: ~2.0@alpha
• contao-bootstrap/navbar: ~2.0@alpha

[pumukel]

Danke für die Blumen. ;-) Alle Bemühungen die Nutzer, die sich das selbst angeeignet haben mit in die Dokumentation einzubeziehen, sind gescheitert. Viele kommen ohne klar. Alle können aber dran mitarbeiten.



Es setzt sich leider nicht immer die Qualität durch. Aber zum Glück hat man ja die Qual der Wahl.

Zu deiner eigentlichen Frage: Die Doku bezieht sich auf v1.0. Bei der Alpha-Version ist es derzeit notwendig explizit die Alpha anzufordern. Dazu bei den jeweiligen Komponenten folgendes eingetragen: ~2.0@alpha (entweder in der composer.json oder über den CM)

Also derzeit:

• contao-bootstrap/core: ~2.0@alpha
• contao-bootstrap/grid: ~2.0@alpha
• contao-bootstrap/layout: ~2.0@alpha
• contao-bootstrap/navbar: ~2.0@alpha

Hallo webstar

Zuerst vielen Dank für Deinen Hinweis. Da man lokal auf Win7/Win10 leider nicht (noch nicht oder eher nie?) mit dem CM arbeiten kann, benutze ich den Composer. Dabei bin ich natürlich kein Profi, was das kreieren von composer.json anbelangt. Ich werde es versuchen und mir anschauen ob es dann zu gebrauchen ist.

Gruss pumukel

[webstar]

Hallo webstar

Zuerst vielen Dank für Deinen Hinweis. Da man lokal auf Win7/Win10 leider nicht (noch nicht oder eher nie?) mit dem CM arbeiten kann, benutze ich den Composer. Dabei bin ich natürlich kein Profi, was das kreieren von composer.json anbelangt. Ich werde es versuchen und mir anschauen ob es dann zu gebrauchen ist.

Gruss pumukel

Im Prinzip das gleiche. Die composer.json musst du garnicht anfassen:

/pfad/zu/php composer.phar require contao-bootstrap/core:~2.0@alpha

[BeaB]

Sorry, eine blöde Frage: Warum setzt man im neuen Bootstrap Grid auf Flexbox und nicht auf CSS Grid?

https://caniuse.com/#search=grid

[lucina]

Kurze Antwort: Wegen des Baidu-Browsers, der ein hässliches 18%-Loch in der Unterstützungsmatrix hinterlässt. Kannst Du aber für Dich nachrüsten, Beispiel unter https://codepen.io/anon/pen/mMgGeV