Responsives Template auf Basis von Azure - mit Bootstrap + SASS und Grunt

Hallo Community,

ich betreue in meiner Freizeit den Onlineshop meiner Frau, Flechtie, und habe die letzten Wochen damit verbracht, diesen auf [B]Responsives Design[/B] umzustellen. Die Testversion ist auf http://test.flechtie.de/ gelauncht, soll aber hier gar nicht Thema sein.

Damit die Erfahrungswerte nicht nur in meinen Kopf bleiben, hab ich das ganze verbloggt: OXID Azure ins Responsive Zeitalter katapultieren: mit Bootstrap + SASS und Grunt

Nun die Frage in die Runde: Wer hat ähnliche Schritte unternommen? Wie sind die Erfahrungswerte daraus? Gibts einfachere Wege?

Mich würde u.a. brennend interessieren wie das professionelle OXID-Agenturen machen. Vielleicht plaudert mal jemand aus dem Nähkästchen. Ich würde mich sehr freuen :slight_smile:

Ich finde es super, dass du dir die Arbeit gemacht hast. Ich persönlich würde nie Bootstrap nehmen, viel zu aufgeblasen für das was man braucht, darunter leidet die Performance.

Ich bin auch kein Freund von grunt/gulp/whatever. Aber das liegt primär daran, dass es für meinen Workflow nicht passt und auch eine Komplexität in den ganzen Prozess einzieht, die meiner Meinung nach unnötig ist, um am Ende minifizierte CSS-Dateien zu bekommen.

Danke msslovi0 für dein ehrliches Feedback. Bin gespannt was noch so kommt.

[QUOTE=msslovi0;157057]Ich finde es super, dass du dir die Arbeit gemacht hast. Ich persönlich würde nie Bootstrap nehmen, viel zu aufgeblasen für das was man braucht, darunter leidet die Performance.[/QUOTE]

Wenn man Bootstrap “out of the box” nimmt, ist das bestimmt recht umfangreich. Dafür gibt es dann einen Schritt, der sich Customization nennt: nimm nur das, was du brauchst, und schwupps! wird das ganze Paket wesentlich schlanker. Ich nehm ja auch net das ganze Kaufhaus mit, wenn ich einen neuen Mixer kaufen möchte :wink: :smiley:

[QUOTE=msslovi0;157057]Ich bin auch kein Freund von grunt/gulp/whatever. Aber das liegt primär daran, dass es für meinen Workflow nicht passt und auch eine Komplexität in den ganzen Prozess einzieht, die meiner Meinung nach unnötig ist, um am Ende minifizierte CSS-Dateien zu bekommen.[/QUOTE]

Grunt bietet dir weiß Gott mehr Möglichkeiten, als “nur minifizierte Dateien” zu bekommen. Grunt kann dir die CSS-/ Javascript-Dateien minimieren, komprimieren und zu einer einzelnen Datei zusammenfassen -> Performance FTW!

Davon abgesehen nimmt dir GruntJS auch eine Menge anderer Tasks ab, wie du hier sehen kannst: http://gruntjs.com/plugins Wenn es halt nicht in deinen Prozess passt bitte, aber ich hab lieber einen Manager, der mir solche Sachen händelt anstatt das alles von Hand zu machen :wink:

@rha1703:
Mich würde interessieren, wie du Bootstrap in das HTML eingebaut hast bzw. wie dein HTML generell aussieht. Vorhandene Klassen wie .submitButton mit Mixins anzureichen find ich schonmal nicht verkehrt :slight_smile: Allerdings verlangt das original Azure-HTML seeeeehr viel Liebe :wink: :smiley:

Ich finds beinahe schon spektakulär, wobei ich wahrscheinlich das komplette HTML umgeschrieben hätte, so dass hier keine Relikte mitgeschleppt werden. Azure aufzubauen finden ich hier schon ziemlich krass, auf diese Idee wäre ich nicht gekommen.

Ich nehme an, dass die meisten Agenturen das Template komplett umschreiben oder eine Templatebasis verwenden, die bereits komplett auf Bootstrap basiert. Da wurde dann quasi das komplette umschreiben bereits im Vorfeld erledigt.

GruntJS finde ich auch spitze, verwende ich bei meinem alten Shop sogar mit der Option,
dass die neuen, minifizierten Dateien direkt via FTP auf den Server gelegt werden.

Aber zum eigentlichen Thread. Echt klasse umgesetzt und tolles Tutorial!

Ich würde gern mal eine Statistik sehen, ob dieser Customization-Knopf bei jQuery oder Bootstrap seltener gedrückt wird. Und ob bei einem der beiden der Prozentsatz derer, die ihn benutzen, überhaupt über 1% liegt. Denn voll aufgeblähte Bootstrap- und jQuery-Files sind die Regel, nicht die Ausnahme. Auch in diesem Shop wiegen die CSS-Files allein 300kB - da kann ich mir dann auch das Concatenating sparen, die paar HTTP-Requests machen in dem Fall das Kraut auch nicht mehr fett.

Also, aus persönlicher Erfahrung:
Die oxid.css hat 94kb normal. Nach einer einfachen Minimierung hatte die nur noch 66kb und nach einer Überarbeitung (doppelte Styles raus usw.) und Minimierung hatte die dann nur noch ca. 32kb. D. h. mit ein wenig Mühe und Gehirnschmalz reduzierst du den Ladeaufwand um zwei Drittel der Originalgröße. Ist doch was, oder? :slight_smile:

Im Übrigen rede ich nicht von dem Customization-Button von Bootstrap. Ich lade mir eigentlich immer das gesamte Paket runter und verwende dann nur das, was ich tatsächlich brauche. Dem Server ist es egal, wie viele Dateien da rumliegen, solange er nicht alle ausliefern muss. Im OXID Dev-Channel in Skype wurde letztens mal eine Zahl dazu genannt: Bootstrap komplett eingebunden + eigene Styles + base64-encodete Bilder im CSS minimiert und komprimiert als eine Datei 168kb. Und jetzt kommst du :wink: :smiley:

[QUOTE=coarsy;157093]Ich nehme an, dass die meisten Agenturen das Template komplett umschreiben oder eine Templatebasis verwenden, die bereits komplett auf Bootstrap basiert. Da wurde dann quasi das komplette umschreiben bereits im Vorfeld erledigt.

Aber zum eigentlichen Thread. Echt klasse umgesetzt und tolles Tutorial![/QUOTE]

Ganz meine Meinung, tolles Projekt! Allerdings würde ich aus meiner Sicht heraus auch nicht mehr auf dem Azure-Template aufsetzen, da das HTML einfach nur unordentlich ist bzw. für Bootstrap einige umfangreiche Umbauten vorgenommen werden müssen. Daher lieber ein Stand-Alone-Theme :slight_smile:

Aber weiter so!

Servus Rha,

Sehr cooles Theme und schöne Arbeit die du dir da gemacht hast! Bin mal gespannt wie es aussieht, wenn du fertig bist.

Kleiner Hinweis. Ab Größe 480*800 hast du zwischen Logo und container ein margin-top: 20px; - das würd ich rausnehmen. das sieht nicht ganz so schick aus und du verlierst wertvolle Höhe. Stichwort: above the fold!

Siehe screenshot…

Viel Erfolg!