{"id":2300,"date":"2013-02-11T08:49:07","date_gmt":"2013-02-11T07:49:07","guid":{"rendered":"http:\/\/olbertz.de\/blog\/?p=2300"},"modified":"2013-02-11T08:49:07","modified_gmt":"2013-02-11T07:49:07","slug":"css-frameworks-bootstrap-foundation","status":"publish","type":"post","link":"https:\/\/olbertz.de\/blog\/2013\/02\/11\/css-frameworks-bootstrap-foundation\/","title":{"rendered":"CSS-Frameworks: Bootstrap \/ Foundation"},"content":{"rendered":"

\nIch 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<\/a> und Foundation<\/a>.\n<\/p>\n

\nBootstrap<\/em> 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<\/strong> mehr nach Bootstrap<\/em> aussieht. Deshalb habe ich mich jetzt für ein neues Projekt mal an Foundation<\/em> gewagt. Meine Erfahrung mit Foundation ist also noch recht klein, aber für einen ersten Vergleich reicht es.\n<\/p>\n

\n\"Bootstrap\n<\/p>\n

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

\nDafür kommt Foundation<\/em> mit wesentlich weniger Klassen im Markup aus. So wenigstens mein Eindruck bei der Anpassung des vorher in Bootstrap<\/em> gebauten Layouts.\n<\/p>\n

\n\"Foundation,\n<\/p>\n

\nBeide Frameworks basieren auf Grids und sind auf responsive Design ausgerichtet, wobei Bootstrap 3<\/em> „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<\/em> hier expliziter und damit klarer zu sein, was die Klassennotationen angeht.\n<\/p>\n

\nDer Umstieg von dem einen Framework zum anderen ist nicht so schwierig, zumindest so lange man noch keine eigenen CSS-Anpassungen vorgenommen hat. Bootstrap<\/em> 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.\n<\/p>\n

\nVerwirrend bei Foundation<\/em> 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<\/em> enthalten sind.\n<\/p>\n

\nIch werde das Projekt aber auf jeden Fall mal in Foundation<\/em> durchziehen. Mal abwarten, auf welche Überraschungen und Probleme ich noch treffen werde.<\/p>\n","protected":false},"excerpt":{"rendered":"

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 … Weiterlesen →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[74],"tags":[],"class_list":["post-2300","post","type-post","status-publish","format-standard","hentry","category-technik"],"_links":{"self":[{"href":"https:\/\/olbertz.de\/blog\/wp-json\/wp\/v2\/posts\/2300","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/olbertz.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/olbertz.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/olbertz.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/olbertz.de\/blog\/wp-json\/wp\/v2\/comments?post=2300"}],"version-history":[{"count":3,"href":"https:\/\/olbertz.de\/blog\/wp-json\/wp\/v2\/posts\/2300\/revisions"}],"predecessor-version":[{"id":2305,"href":"https:\/\/olbertz.de\/blog\/wp-json\/wp\/v2\/posts\/2300\/revisions\/2305"}],"wp:attachment":[{"href":"https:\/\/olbertz.de\/blog\/wp-json\/wp\/v2\/media?parent=2300"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/olbertz.de\/blog\/wp-json\/wp\/v2\/categories?post=2300"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/olbertz.de\/blog\/wp-json\/wp\/v2\/tags?post=2300"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}