Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

News

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

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

(Grafik: bulma.io)

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

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)

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.

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.

Du hast noch nicht mit Flexbox gearbeitet? Dann erfährst du hier, wie du Flexbox spielerisch lernen kannst.

Finde einen Job, den du liebst zum Thema TYPO3, Webdesign

10 Reaktionen
ntiedt
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
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
regtrhjtrherhtehte

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

Rene Woerz
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
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
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
rthrthrthtr

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

t3n geht den bach runter
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
Peter
Peter

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

Antworten
Leser
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
Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden