Contao Grid vs. Bootstrap vs. Foundation

**doescher** · 05.03.2016, 16:03

Hallo zusammen,

ich bin mit der Darstellung meiner Website auf mobilen Geräten nicht wirklich zufrieden und würde gerne das Arbeiten mit Grids ausprobieren.

Leider habe ich keine Anleitung für den Umgang mit dem Contao Grid finden können. Außerdem bin ich bei der Suche auf die Erweiterungen für Bootstrap und Foundation gestoßen.

Warum setzt man auf diese beiden Erweiterungen anstatt auf das Contao Grid? Was ist zum Einstieg in das Thema die bessere Lösung, Contao oder die anderen beiden? Lieber Foundation oder Bootstrap?

Wo kann ich eine gute Dokumentation zu den drei Grids finden, vielleicht ein gutes Tutorial?

Danke schon einmal für Eure Tipps und viele Grüße
Jan-Dirk

**Socki** · 05.03.2016, 16:21

Hello, leider kann ich dir die genauen Unterschiede zwischen den einzelnen Grids nicht erläutern.
Ich verwende zudem noch ein eigenes Grid.

Allerdings hab ich doch ein paar vl interessante Links für dich:

http://erdmann-freunde.de/css-kurs/t...ntao-grid.html
http://holdirbootstrap.de/

Ich denke man muss sich mit den unterschiedlichen Grids beschäftigen, um zu schauen welches seinen Wünschen/Vorstellungen am ehesten gerecht wird.
Also ob Desktop-First oder Mobil-First., ob du ein Pixel oder Prozentuales Grid (fluid grid) möchtest usw, usw.

Soweit ich mich erinnere basiert das Contao Grid auf dem holygrail grid.

Grüßle Socke

**M.Schwarz** · 05.03.2016, 16:26

Ich kann dir nur Bootstrap empfehlen hier hast du ein Grid-System, welches auf Prozent basierd und meiner Meinung nach, das beste ist welches es so gibt. Ich selbst baue alle Webseiten auf Bootstrap auf.
Das Contao Grid System finde ich in dem Fall weniger gut, da es leider auf Pixel basierend ist.

Der Container geht immer von einer größe mit 960 Pixel aus. Also ist deine Seite größer als 960 Pixel in der Breite bekommst du schon Probleme und müsstest das Default Grid-System von Contao umbauen. Entspricht deine Seite aber dieser größe ist es nicht schlecht und du kannst es sehr gut verwenden. Aber das passende Grid-System muss jeder für sich selbst finden.

Ich kann dir nur Bootstrap empfehlen.

**BugBuster** · 05.03.2016, 17:07

Meine 16er Grid (Pixel und Prozent) basieren auf die 12er von Contao. Dazu habe ich mal ne Seite vor längerer Zeit gemacht die auch erklärt die wie funktionieren.
http://contaogrid.glen-langer.de/

**doescher** · 05.03.2016, 20:12

Danke für Eure Antworten.

http://contaogrid.glen-langer.de/ habe ich mir auch angeguckt, war mir aber nicht so im Gedächtnis geblieben, muss ich noch mal machen...

M.Schwartz, welches sind denn neben der Angabe in Prozent weitere Vorteile? Sind es die vorgefertigten CSS-Stiles wie Buttons, Navigation etc.? Gibt es neben der Seite von Erdmann noch eine gute Site, wo ich (auf deutsch) die Vorteile sehen kann?

**doescher** · 06.03.2016, 11:43

Jetzt habe ich noch einmal die Links durchgelesen und bin tatsächlich etwas schlauer.

Wie sieht es denn eigentlich mit den Angaben in % im Contao Grid aus?

BugBuster
Meine 16er Grid (Pixel und Prozent) basieren auf die 12er von Contao. Dazu habe ich mal ne Seite vor längerer Zeit gemacht die auch erklärt die wie funktionieren.
http://contaogrid.glen-langer.de/

Dein Erweiterung funktioniert ja nur bei Seiten mit 1140px Breite, oder geht das auch bei anderen Seitenbreiten (da ja prozentbasierend)? Kann ich das Grid von Contao dann auch wie Bootstrap benutzen?

M.Schwarz
Ich kann dir nur Bootstrap empfehlen hier hast du ein Grid-System, welches auf Prozent basierd und meiner Meinung nach, das beste ist welches es so gibt. Ich selbst baue alle Webseiten auf Bootstrap auf.

Ist Bootstrap schwer in Contao zu integrieren? Ich habe etwas gelesen, dass das nur über den Composer geht. Damit habe ich keine Erfahrungen und bei einer kurzen Recherche gelesen, dass das bei vielen anderen Erweiterungen zu Problemen führt. Oder wird auch hier, wie beim Contao Grid, einfach das externe Stylesheet geladen und gut is (kann ich mir nicht wirklich vorstellen)?
Es soll demnächst ein neues Bootstrap 4 geben, das REM-basierte Einstellungen hat. Ist das schon aktuell für Contao?

Zu Foundation hat keiner Erfahrungswerte, oder?

Sorry für die vielen Fragen, aber ich würde mich ungerne in eines der Grids einarbeiten und dann merken, dass ich auf das falsche (veraltete) Pferd gesetzt habe...
Jan-Dirk

**planepix** · 06.03.2016, 18:39

Hallo Jan-Dirk,

hier noch etwas Linkfutter zu Contao & Foundation:

https://www.youtube.com/watch?v=rW9wAyI9omY

https://contao.org/de/erweiterungsli...contao.de.html

http://www.foundation-to-contao.de/c...nfuehrung.html

http://erdmann-freunde.de/css-kurs/t...tion-grid.html

**Monique Hahnefeld** · 06.03.2016, 20:20

Danke Thomas

! nur als kleine Ergänzung...

die Erweiterung heißt jetzt anders und ist 3-teilig

https://contao.org/de/erweiterungsli...d/codeowl.html

-> https://community.contao.org/de/show...l=1#post390935

**doescher** · 06.03.2016, 22:56

Zitat von Monique Hahnefeld

Danke Thomas

! nur als kleine Ergänzung...

die Erweiterung heißt jetzt anders und ist 3-teilig

https://contao.org/de/erweiterungsli...d/codeowl.html

-> https://community.contao.org/de/show...l=1#post390935

Danke Monique,

ich muss die Erweiterungen über den Composer installieren, richtig?
Ich kenne mich mit dem Composer gar nicht aus und habe hier im Forum von einigen Problemen gelesen.
Verträgt sich der Composer mit den "regulären" Erweiterungen?
Ich möchte halt eine bestehende Webside von Layout Builder auf ein Grid-System umbauen, ohne alles neu denken zu müssen, was die verwendeten Erweiterungen angeht. Der Umbau ist schon Aufgabe genug...

Danke und viele Grüße
Jan-Dirk

**planepix** · 06.03.2016, 23:03

Um das Reindenken und Verstehen wie ein CSS-Framework funktioniert wirst du sicher nicht drumrum kommen, wenn du es anwenden willst.

Einfach etwas Zeit nehmen und probieren - muss man durch

**doescher** · 07.03.2016, 06:55

Zitat von planepix

Um das Reindenken und Verstehen wie ein CSS-Framework funktioniert wirst du sicher nicht drumrum kommen, wenn du es anwenden willst.

Einfach etwas Zeit nehmen und probieren - muss man durch

planepix, klar, dass ich mich da erst reindenken muss (und auch will).
Aber genau deswegen möchte ich ungerne in der Mitte des Wegs feststellen, dass ich aufs falsche Pferd gesetzt habe...

Aber Danke an alle bis hierhin, ich werde mal anfangen und mich bei Fragen gerne wieder melden.

Viele Grüße
Jan-Dirk

**Andreas** · 07.03.2016, 23:07

Wenn du nur das Grid-System benötigst, wäre vielleicht auch die Erweiterung dma_simple_grid https://github.com/DMAGmbH/dma_simple_grid etwas für dich. Es stellt Inhaltselemente zum Wrappen der Reihen und Spalten zur Verfügung. Die Auswahl der Klassen erfolgt über Selects. Das benutzte Framework kannst du einstellen. Zur Zeit

Contao Grid
Bootstrap
Bootstrap 4
Bootstrap 4 (with GRgrid)
Foundation
DELOS
unsemantic

Eigene Frameworks kann man aufsetzen.

Das CSS der Frameworks mussst du selber laden.

**dackelchen** · 09.03.2016, 22:37

Zitat von planepix

Um das Reindenken und Verstehen wie ein CSS-Framework funktioniert wirst du sicher nicht drumrum kommen, wenn du es anwenden willst.

Einfach etwas Zeit nehmen und probieren - muss man durch

Muss man durch - ich möchte ergänzen, dass es dazu nicht soooooooooooooooooo arg entscheident ist, womit Du lernst. Wenn Du erst einmal das Prinzip verstanden hast, wie ein Framework funktioniert, ist der Umstieg auf ein anderes nicht besonders schwierig.

Einschränkend will ich das allerdings dahingehend, dass ich nicht weiß, ob Du das Wissen lediglich für eine einzige Seite brauchst? Falls ja, wäre zu überlegen, ob Du jemanden damit beauftragen möchtest, Dir das zu machen.

Ich persönlich arbeite gerne mit Foundation. Monique hat zudem eine super gute Einführungsseite dazu gemacht. (Link siehe oben).

**macbee** · 20.04.2016, 14:34

Hey.

Ein ejungfräuliche Contao 3.5.4 - habe mit die Daten oben aus dem Link https://contao.org/de/erweiterungsli...d/codeowl.html heruntergeladen und manuell in die Ordner gelegt, so wie hier http://www.foundation-to-contao.de/c3.5lts/ beschrieben...
Dann gabs die Error Message und weder backend/frontend noch install.php lassen sich aufrufen :-(((

Code:

The module dependencies could not be resolved.

Array
(
    [codeowl_fw_foundation] => Array
        (
            [0] => core
            [1] => multicolumnwizard
            [2] => codeowl_design_presets
            [3] => codeowl_grid_control
        )

)

Über den Composer hab ich das erst gar nicht versucht. Der läuft bei mir nicht. Und über die normale Erweiterungsverwaltung bekomme ich genau dasselbe Prob.

Hat da jmd ne Idee?

LG

**BugBuster** · 20.04.2016, 16:00

Sind diese 3 Erweiterungen auch installiert? Die brauch das Teil:

Code:

[1] => multicolumnwizard 
[2] => codeowl_design_presets 
[3] => codeowl_grid_control

**BugBuster** · 20.04.2016, 16:02

normale Erweiterungsverwaltung bekomme ich genau dasselbe Prob.

welche Probleme?

**macbee** · 21.04.2016, 10:05

Hey. habe nun nach dreimaligem Versuch alles installieren können... aber... Die der dem Tutorial für der bei der Installation angesproche Navigationspunkt "FW Einstellungen" fehlt genauso, wie jegliche Designvorgaben.

??? Iwas fehlt da wohl noch :-))

Habe nochmal alles aktualisiert :-) Jetzt gehts ...