Anzeige
Anzeige
News
Artikel merken

Bulma: Das Flexbox-Framework im Vergleich zu Foundation, Bootstrap und Co.

Klein aber fein. Ein modernes CSS-Framework, basierend auf Flexbox.

Von Jessy Kösterke
1 Min. Lesezeit
Anzeige
Anzeige

(Grafik: bulma.io)

Frontend-Frameworks sind sehr nützliche Tools für Webentwickler. Die beiden bekanntesten Frameworks Bootstrap und Foundation haben in den letzten Jahren ordentlich an Gewicht zugelegt. Aber neben den beiden Großen gibt es eine Menge an kleineren Frameworks, die häufig schneller einsatzbereit sind und sich durch eine deutlich bessere Performance auszeichnen. Eins davon ist Bulma.

Bulma: Das Flexbox-Framework

(Screenshot: bulma.io)

(Screenshot: bulma.io)

Anzeige
Anzeige

Die bekanntesten Frontend-Frameworks Bootstrap, Foundation und Grumby sind zwar mit allen erdenklichen Komponenten ausgestattet, bringen aber auch stolze 200 bis 300 KB auf die Waage. Zwar bieten die Frameworks inzwischen auch die Möglichkeit, nur ausgewählte Elemente herunterzuladen, doch die manuelle Modifikation ist umständlich und zeitraubend. Da ist es sinnvoller, gleich ein kleines Framework zu wählen, das direkt einsatzbereit ist.

Das CSS-Framework Bulma basiert auf Flexbox und hat komprimiert nur schlanke 74 KB. Wer bereits mit Flexbox arbeitet, weiß wie flexibel das System ist. Eine responsive Website ohne viel Aufwand ist also mit dem Bulma-Framework schnell gemeistert. Die Standardelemente für Websites, wie zum Beispiel eine Suche, Dropdowns, Formulare, Buttons, Checkboxen, Social-Media-Integrationen und vieles mehr, sind bei Bulma vordefiniert. Diese Elemente sind quasi aus keinem Webprojekt wegzudenken. Komplexere Bausteine sucht man jedoch vergebens. Bewusst lassen Frameworks viele Komponenten außen vor und liefern dafür ein schlankes und übersichtliches CSS.

Anzeige
Anzeige

Fazit

Bulma präsentiert sich auf den ersten Blick als ein nützliches, flexibles und schlankes Framework. Wer Flexbox beherrscht, aus verschiedenen Gründen größeren Frameworks abgeneigt ist und auf der Suche nach einem kleinerem ist, der sollte sich Bulma genauer angucken. Allerdings bringt ein modernes Framework auch Nachteile mit sich. Moderne Techniken wie Flexbox werden noch nicht überall vernünftig ausgeben. Der Internet Explorer unterstützt die Technik gar nicht und ab der Version 11 nur bedingt. Auch iOS-Geräte geben Flexbox erst ab der Version 9.2 fehlerfrei aus.

Anzeige
Anzeige
Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
10 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Leser

Was ist das für 1 Beitrag?

Der einzige vergleich sind die KB Größen.
Ich hätte eine Gegenüberstellung erwartet, wie verschiedene Lösungen in den genannten Frameworks angegangen werden.
So viel text nur um zu sagen das Bulma 74KB hat und die anderen 200 – 300…

Antworten
Peter

Zum Glück musste dafür kein Baum sterben… Informationsgehalt Fehlanzeige

Antworten
t3n geht den bach runter

Was habt ihr denn von t3n erwartet? Hier ist seit monaten eine unterirdische Newsqualität und ansonsten nur Clickbait und sponsored Posts.

Werde t3n auch aus meinen favoriten entfernen.

Antworten
Rene Woerz

Zumal ich mich frage warum man Flexbox beherrschen sollte wenn man Bulma nutzen möchte. Dieses Framework ist dafür da um sich genau darüber keine Gedanken machen zu müssen sondern einfach die Strukturen und Klassen nutzen kann um Inhalte mit dieser Technik umzusetzen und darzustellen.

Antworten
sdfds

Man sollte schon wenigstens die Grundlagen kennen, wenn man so ein Framework benutzt. Wenn man darauf keine Lust hat, sollte man lieber gleich was fertiges von Themeforest nehmen.

Antworten
Rene Woerz

Stimmt einfach nicht. Nenne mir eine Funktion des Frameworks, welche ich nicht nutzen kann, wenn ich nicht weiß wie das Flexbox Attribut funktioniert. Man hat als Developer 0 mit der Technik selber zu tun und verwendet die gegeben attribute und strukturen wie sie in der Dokumentation zu finden sind.

Btw.: Was hat „was fertiges von Themeforst“ mit einem CSS Framework zu tun?

rthrthrthtr

Themeforest hat frameworkspezifische Templates z.B. für Bootstrap.

ntiedt

1.
KB Vergleiche ist für DAUs. Warum? Ganz einfach. Es werden immer die Gesamtgröße eines Frameworks verglichen. Des weiteren sagt es noch weniger aus wenn man auf Basis eines CMS entwickelt wo minimieren und zusammen führen vom System übernommen wird. Außerdem sind ein paar KB in Zeiten von Full-HD Bildern totaler Humbug.

2.
Bevor man Flexbox empfiehlt sollte man vorher man auf http://caniuse.com/#search=flexbox schauen. Und hier nicht nur die grünen und großen Spalten sondern die Notes und Known issues.

Ich hab das Gefühl das das hier nur noch ein Sammelplatz von Scriptkiddys ist. (Inkl der sogenannten Fachleuten die solche Beiträge für eben diese Zielgruppe schreibt)

Antworten
ntiedt

Ach und 3.
HTML-Elemente mit Klassen dran ist total out, unflexibel und unübersichtlich.

Ich empfehle Euch mal http://susy.oddbird.net/ anzuschauen.

Antworten
regtrhjtrherhtehte

Jedes halbwegs moderne Framework, also auch dieses und Bootstrap hat Grid-Mixins, daher ist #3 überflüssig.

Abbrechen

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige