Ich stehe gerade vor der schönen Aufgabe, mein erstes Shopware-Theme zu entwickeln. Um meine Nerven etwas zu schonen, verwende ich bereits die mitgelieferte Grunt-Config: Using Grunt for theme development
Die Frage ist nun, nach welchem Konzept ich das CSS schreiben soll? Shopware verwendet offenbar PocketGrid, ein CSS-Framework von 2013: PocketGrid Documentation. Das hat zwar ein Grid-System, welches einem aber nicht wirklich viel Arbeit abnimmt, zB. müssen width - Angaben und media queries noch selber geschrieben werden.
Meine Idee war also eher, Bootstrap via CDN im Theme einzubinden. Zwar kann ich Bootstrap dann nicht konfigurieren, aber ich habe zumindest die ganzen Features zur Hand, mit denen eine zügige Entwicklung möglich ist.
Smarty und Less sind ja gegeben, da wird sich also nichts ändern lassen.
Gibt es hier eine Empfehlung bezüglich der Theme-Entwicklung? Welches Grid verwendet ihr, oder schreibt ihr alles komplett selber? Verwendet jemand Bootstrap 4, und wenn ja, wie sollte es am besten eingebunden werden - gibt es da Erfahrungswerte?
Vermutlich wirst du vom Responsive-Theme ableiten und es erweitern, oder?
Ich persönlich bevorzuge es die vorhandenen Komponenten zu nutzen und zu erweitern.
Das hatte ich eigentlich auch vor und wollte bestimmt nicht das komplette Theme von der Pike auf neu schreiben. Von Bootstrap würde ich mir zumindest das Grid-Element wünschen, weil man damit Layouts sehr schnell für alle Geräte entwerfen kann. Wenn du also neue Elemente zu deinem Layout hinzufügst, dann gestaltest du das mit Hilfe von PocketGrid? Schreibst also alle Media Queries für alle Elemente und Endgeräte selber? Scheint mir einfach nicht sehr effizient.
Hey Paddelboot,
meinte das auch mehr als Entwicklungsgrundlage Ich kenne jetzt nicht den Upgrade Pfad von Bootstrap 3 auf 4, aber das Repo auf Github lässt sich sicherlich gut als Grundlage nehmen, um dann dieses auf Boostrap 4 zu updaten.
Für neue Elemente nutze ich Grid und Flexboxen. Auch die Media Querys schreibe ich selbst. Wenn du für gewisse Seiten ein komplett neues Layout entwirfst und dafür das Grid-System von Bootstrap nutzen möchtest, kannst du ja nur diese Komponente einbinden. Bei vorhandenen Seiten musst du bei der Arbeit mit Frameworks immer darauf achten, dass es bei unterschiedlichen Klassen (von Shopware und z.B Bootstrap) nicht zu Komplikationen kommt. Das aufeinander abzustimmen kann manchmal mehr Zeit kosten als es schnell selbst anzupassen. Wenn dir gewisse Bereiche grundsätzlich nicht gefallen und du sie komplett neu gestaltest, musst du dir darüber natürlich keine Gedanken machen. Deswegen kommt es bei der Frage Framework oder nicht wohl auf den Umfang deiner Anpassungen an. Die Arbeit an Themes von Shopware 6 wird da mit Bootstrap als Grundstein natürlich deutlich angenehmer.
Hey Paddelboot,
meinte das auch mehr als Entwicklungsgrundlage Ich kenne jetzt nicht den Upgrade Pfad von Bootstrap 3 auf 4, aber das Repo auf Github lässt sich sicherlich gut als Grundlage nehmen, um dann dieses auf Boostrap 4 zu updaten.
„We are indeed planning to upgrade to Bootstrap 4, but there are some difficulties to be solved first. The biggest one is how we are going to integrate Bootstrap 4’s Sass styles into Shopware’s Less-compiler.“ Bootstrap 4 verwendet Sass, ihr dagegen Less.
Mir fehlt die Zeit, da jetzt selber eine Lösung zu suchen, weil ich hier an einem Projekt mit engem Budget und Zeitrahmen sitze.
@robjke: Wenn das klappt, warum nicht. Also irgendwie so:
.myrow:extend(.row){}
.mycol-8:extend(.col-8){}
Müsste ich allerdings ersteinmal testen, bin mit LESS noch nicht vertraut.
@Lareniso Danke für die Ratschläge, ich werde mich mal in Grid einlesen und dann entscheiden. Aus Zeitgründen tendiere ich zu einem Import der Bootstrap-Features, ist weniger schick als mit CSS-Bordmitteln, aber deutlich schneller in der Entwicklung.
@Lareniso Danke für die Ratschläge, ich werde mich mal in Grid einlesen und dann entscheiden. Aus Zeitgründen tendiere ich zu einem Import der Bootstrap-Features, ist weniger schick als mit CSS-Bordmitteln, aber deutlich schneller in der Entwicklung.
Nicht wirklich - Mit CSS Grid hauste du zwei Zeilen rein und hast ein komplettes Grid.
Ohne den ganzen murx mit margins, abstand zum content, zahlreichen classes usw. Wenn man auf IE11 pfeift, ist CSS Grid genial.
Kombiniert mit Flexbox exrem mächtig und vor allem flexibel.
Nachteil: Shopware ist hier oldschool und sehr eingeschränkt, so kanns du bspw. nich direkt Autoprfixer verwenden. Du müsstest dir also ggf. mixins bauen für die Prefixes. Du kannst Autoprefixer zwar in der Entwicklung nutzen, bringt aber relativ wenig, wenn der Less Compiler von Shopware das nich mit beachtet. Kompiliert dann jemand im Backend das Theme sind die prefixes futsch … Falls aber jemand eine Lösung haben sollte: Immer her damit
@Shopwareianer Kennst du die Mixins in themes/Frontend/Bare/frontend/_public/src/less/_mixins? Diese Mixins können natürlich auch durch eigene Mixins im eigenen Theme ergänzt werden.
@Lareniso Danke für die Ratschläge, ich werde mich mal in Grid einlesen und dann entscheiden. Aus Zeitgründen tendiere ich zu einem Import der Bootstrap-Features, ist weniger schick als mit CSS-Bordmitteln, aber deutlich schneller in der Entwicklung.
Nicht wirklich - Mit CSS Grid hauste du zwei Zeilen rein und hast ein komplettes Grid.
Jo, CSS Grid sieht schon gut aus. Ich bin mir derzeit unsicher, ob ich
Ein Theme komplett von Grund auf erstellen soll - wie vorgeschlagen mit Grid und Flexbox für die einzelnen Sektionen -, und einzelne Komponenten wie Warenkorb, Checkout usw. aus Bare übernehme
Das Responsive Theme erweitern soll und irgendwie so hinbiege, dass es aussieht wie die Vorlagen für den Webshop, den wir gerade bauen
Wenn ich mir die Smarty-Templates von Bare anschaue, zieht sich mein Magen zusammen, ich sehe da nur wenig Spaß, das zu erweitern. Vielleicht kommt das ja mit der Übung… Wobei Übung wenig Sinn macht, wenn in einigen Wochen Shopware 6 rauskommt mit einer ganz anderen Herangehensweise (Twig, Bootstrap und was sonst noch).
Ich habe die Befürchtung, dass du die Neuentwicklung eines Themes etwas unterschätzt. Vermutlich ist es der einfachere Weg das Responsive-Theme zu erweitern. Wenn du das Prinzip von Smarty verstanden hast, wird dir der Umstieg auf Twig wirklich nicht schwer fallen. Die Syntax ist etwas anders, aber das Prinzip ist gleich.
Ich glaube, es ist normal, dass man sich ganz am Anfang etwas erschlagen fühlt. Du wirst dich sicher schnell dran gewöhnen. Du entwickelst vermutlich schon in einer IDE, oder? Ansonsten kann ich dir PhpStorm wärmstens empfehlen.
Ich bin hier wahrscheinlich etwas grün rübergekommen, dabei geht es wirklich nur darum, das Konzept von Shopware zu verstehen und wie ich das Theme am effizientesten entwickle. Der Tipp mit PHPStorm ist ganz gut, allerdings verwende ich es schon… :=) Visual Studio Code wirkt auf den ersten Blick übrigens sehr überzeugend, nicht nur wegen der Ladezeit von ca. 2 Sekunden.
@Shopwareianer Kennst du die Mixins in themes/Frontend/Bare/frontend/_public/src/less/_mixins? Diese Mixins können natürlich auch durch eigene Mixins im eigenen Theme ergänzt werden.
Klar kenn ich die - Warum?
Für Flexbox & Co. musst du eben deine eigenen mixins schreiben, da es eben mit Autoprefixer nicht direkt funktioniert. Alleine dafür ist ja auch der Großteil der mixins da … Warum Shopware hier nie Autoprefixer eingsetzt hat, ist mir allerdings schleiferhaft.
Ich bin hier wahrscheinlich etwas grün rübergekommen, dabei geht es wirklich nur darum, das Konzept von Shopware zu verstehen und wie ich das Theme am effizientesten entwickle. Der Tipp mit PHPStorm ist ganz gut, allerdings verwende ich es schon… :=) Visual Studio Code wirkt auf den ersten Blick übrigens sehr überzeugend, nicht nur wegen der Ladezeit von ca. 2 Sekunden.
Am effizientesten ist es damit zu arbeiten, was einen an die Hand gegeben wird.
Es macht relativ wenig Sinn hier noch on-top Bootstrap drauf zu klaschen. Wofür brauchst du das Grid? Schreibe halt dein paar eigene classes und gut ist. Komplett von vorne zu starten mach in den wenigsten Fällen Sinn. Du startest in der Regel mit der Abhängigkeit des Responsive Themes und baust darauf auf / änderst es ab.
Ob Pocketgrid nun aus 2013 ist, ist ja erst einmal nicht wirklich relevant. Natürlich kannst du auch alles komplett umbauen, ob das sinnvoll ist musst du dann wohl selbst entscheiden.
Am effizientesten ist es damit zu arbeiten, was einen an die Hand gegeben wird.
Effizienz hat auch damit zu tun, was einem persönlich gut liegt. Smarty zB. scheint mir theoretisch ganz gut, in der Praxis jedoch umständlich. Warum es jetzt dennoch am effizientesten sein soll, verstehe ich nicht.
Aber mal eine andere Frage zu CSS Grid: wie löst ihr dort das Problem mit den Innen- und Außenabständen der Grid-Blöcke? Bootstrap macht das mit negativen Margins der row - Elemente, d.h. die Blöcke im Grid haben keinen Abstand zum sie umgebenden Container, nur zu den anderen Grid-Blöcken. Da müsste man sich ja eine eigene Lösung basteln, wenn man CSS Grid verwendet.
Genau das Problem habe ich jetzt auch in meinem Layout mit PocketGrid.
Effizienz hat auch damit zu tun, was einem persönlich gut liegt. Smarty zB. scheint mir theoretisch ganz gut, in der Praxis jedoch umständlich. Warum es jetzt dennoch am effizientesten sein soll, verstehe ich nicht.
Was ist denn an Smarty umständlich? Smarty ist zwar nicht mehr wirklich aktuell, aber umständlich ist sicherlich was anderes ^^
Kommt natürlich immer auf den Zweck an. Effektiv ist es aber nicht, dass System komplett umzubiegen und jetzt bspw. alles versuchen auf Twig, Blade oder sonst was umzustelle … Daher sagte ich, dass es effektiv ist, was dir an die Hand gegeben wird.
Danke für den Hinweis. Ich habe CSS Grid völlig verschlafen, bestimmt auch deswegen, weil ich für Grids immer Bootstrap herangenommen habe.
Ingesamt komme ich mit der Shopware-Frontendentwicklung nicht sehr gut klar, anders als im Backend. Ob das jetzt an dieser starren Ausrichtung aus gewisse Technologien liegt, weiß ich nicht.
Michael Telgmann
Michael Telgmann
Ich kenne jetzt nicht den Upgrade Pfad von Bootstrap 3 auf 4, aber das Repo auf Github lässt sich sicherlich gut als Grundlage nehmen, um dann dieses auf Boostrap 4 zu updaten. 
Mein Problem mit Smarty in diesem Kontext ist eher die Lesbarkeit der Templates, weniger die Logik von Smarty selber.