CSS-Frameworks: Bootstrap / Foundation

Ich bin kein Designer. Ich habe zwar ein ästhetisches Empfinden, kriege es aber nicht auf die Reihe mittels HTML und CSS irgendwas halbwegs anständiges auf die Beine zu bringen. Zu meiner Rettung gibt es CSS-Frameworks wie Bootstrap und Foundation.

Bootstrap war das erste CSS-Framework, dass ich genutzt habe. Und wie es bei so vielen Sachen ist: wenn man zu viel davon benutzt, wird es irgendwann langweilig. Ich habe mich einfach satt daran gesehen. Denn wie ich schon sagte: ich bin kein Designer und kann leider nicht mit ein paar handvoll Zeilen CSS das ganze so anpassen, dass es nicht mehr nach Bootstrap aussieht. Deshalb habe ich mich jetzt für ein neues Projekt mal an Foundation gewagt. Meine Erfahrung mit Foundation ist also noch recht klein, aber für einen ersten Vergleich reicht es.

Bootstrap Fluid

Bootstrap kommt mit einer großen Anzahl an verschiedenen Elementen daher, wobei im Vergleich zu Foundation eher die Zahl der Variationen überwiegt. Und die Dokumentation ist besser. Bei Foundation muss ich immer mal wieder rätseln, wie ein in der Doku angesprochenes Feature wohl umgesetzt wird.

Dafür kommt Foundation mit wesentlich weniger Klassen im Markup aus. So wenigstens mein Eindruck bei der Anpassung des vorher in Bootstrap gebauten Layouts.

Foundation, Rapid-Prototyping

Beide Frameworks basieren auf Grids und sind auf responsive Design ausgerichtet, wobei Bootstrap 3 „mobile-first“ sein wird. Bislang habe ich mich nicht übermäßig mit Anpassungen für mobile Endgeräte gekümmert, aber auf den ersten Blick scheint mir Foundation hier expliziter und damit klarer zu sein, was die Klassennotationen angeht.

Der Umstieg von dem einen Framework zum anderen ist nicht so schwierig, zumindest so lange man noch keine eigenen CSS-Anpassungen vorgenommen hat. Bootstrap scheint mir einfach verbreiteter zu sein, so findet man schneller Beispiele für die Verwendung in diverse PHP-Frameworks. Bei Symfony2 fällt da insbesondere das Form-Theming ins Gewicht. Andererseits sehen meine Formulare beim Foundation-Projekt auch ohne ein spezielles Theme im Moment ganz OK aus.

Verwirrend bei Foundation ist auf jeden Fall, dass deren Website selbst Komponenten benutzt, die nicht im Framework enthalten sind. Ich fand ein paar Elemente der Website nämlich ganz cool und habe versucht diese nachzubauen, bis ich dann feststellen musste, dass die gar nicht in Foundation enthalten sind.

Ich werde das Projekt aber auf jeden Fall mal in Foundation durchziehen. Mal abwarten, auf welche Überraschungen und Probleme ich noch treffen werde.

4 Gedanken zu „CSS-Frameworks: Bootstrap / Foundation

  1. Hmmm, hört sich beides schon interessant an. Ich muß zugeben, dass ich derartige Frameworks bisher immer gemieden – oder nur in Zeitnot eingesetzt habe, da mir die negativen Effekte (mehr Laden als notwendig, neues Konzept verstehen & verinnerlichen, weniger Flexibilität) immer überwiegt haben. Ich mag allerdings die Jungs von ZURB, die haben immer einen sehr guten Eindruck hinterlassen.

    Foundation scheint mir das Bauen von Formularen allerdings wesentlich besser zu unterstützen, als ich es von Bootstrap kenne (ja, ich habe Bootstrap auch mal eingesetzt :). Ich weiß jetzt nicht, wie flexibel man hinterher noch in den Foundation-Formularen ist, aber das sieht zumindest alles sinnvoll aus. Ich muss mir das mal mobil ansehen. Für eine kleinere Applikation (oder eine Webseite wie in Deinem Beispiel) kann ich mir vorstellen, dass man recht schnell brauchbare Ergebnisse erzielen kann. Bin gespannt auf Deine Erfahrungen.

  2. Obwohl ich persönlich Foundation als das „bessere“ Framework halte, musste ich letztens auch feststellen, dass die Jungs & Mädels scheinbar nicht so oft auf den mobilen Geräten testen und einige Sachen nicht so funktionieren wie in den Desktop-Varianten. Schade eigentlich.

    • Hast Du einen Bugreport geschrieben? Wäre ja auch mal ganz interessant zu sehen, wie das dort gehandhabt wird. Fehler können immer passieren, die Frage ist, ob die nur für sich selbst entwickeln, oder auch Anregungen von Außerhalb annehmen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.