Entwicklung & Design

Flexbox: Mit dem CSS-Framework-Bulma hübsche Layouts zaubern

Das CSS-Flexbox-Framework Bulma (Bild: GitHub)

Die CSS-Flexbox lässt Entwickler-Herzen höher schlagen. Ohne jegliche Einschränkungen können individuelle Layouts und Strukturen problemlos umgesetzt werden. Natürlich darf zu einer solchen grundlegenden Neuerung das passende Framework nicht fehlen. Wir schauen uns deshalb Bulma an – und geben einen Ausblick auf die kommende Entwicklung.

Das Flexbox-CSS-Framework Bulma

Das Flexbox-Grid mit Bulma erstellen. (Screenshot: Bulma)

Das Flexbox-Grid mit Bulma erstellen. (Screenshot: Bulma)

Die Flexbox ist in aller Munde, da war es nur noch eine Frage der Zeit, bis CSS-Frameworks entstehen und das alte Float-Grid auf die neue Flexbox umstellen. So wie auch Boostrap 4 auf Flexbox setzen wird, gibt es noch weitere Frameworks. Bulma ist eins davon. Es besteht aus einer einzelnen CSS-Datei, die für das passende Flexbox-Grid sorgt und zugleich noch hübsche kleine visuelle Gimmicks für Buttons, Navigationen oder Form-Elemente bereitstellt.

Um Bulma einzusetzen, muss nur die CSS-Datei eingebunden werden und die Struktur, mit den jeweiligen Bulma-Klassen, gesetzt werden.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.15/css/bulma.min.css">

<div class="columns">
<div class="column">First column</div>
<div class="column">Second column</div>
<div class="column">Third column</div>
<div class="column">Fourth column</div>
</div>

Das Grid wird automatisch vierspaltig unterteilt, wobei jedes Element sich den gleichen Platz nimmt. Wer lieber mit einem Offset arbeitet oder den Elementen eine feste Breite mitgeben will, kann dies natürlich mit den dazugehörigen Klassen tun.

Beispiele für weitere Flexbox-Grids und die dazugehörigen Elemente finden sich direkt auf der offiziellen Seite von Bulma. Wer zu dem Projekt etwas beitragen will, kann auch direkt auf GitHub aktiv werden. Da Bulma auf Sass setzt, kann das Framework im Handumdrehen auf seine Bedürfnisse angepasst werden, wie ihr der Dokumentation entnehmen könnt.

Das Fazit

Bulma befindet sich aktuell noch in der Alpha, bietet für seinen frühen Stand aber schon eine gute Basis an Grundfunktionalitäten und die damit verbundene Unterstützung der Flexbox. Wem Bootstrap oder andere Frameworks zu riesig sind und wer nur ein kleines Flexbox-Grid benötigt, ist mit Bulma sicherlich besser unterwegs.

Wer sich noch nicht mit der Flexbox beschäftigt hat, sollte das spätestens jetzt nachholen. Mit dem 20-teiligen Videokurs oder dem Flexbox-Froggy-Spiel seid ihr bestens gewappnet.

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

3 Kommentare
developer027343
developer027343

Blöd nur, dass die Demo mangels eingebundenem jquery nicht funktioniert.

Antworten
Philipp Blum
Philipp Blum

Haut mich jetzt auch nicht vom Hocker. Flex ist zwar ganz nett, wird aber momentan kaum eingesetzt. Erst der Edge Browser unterstuetzt es komplett und ohne Bugs. Da nutze ich lieber inline-block. Da kann ich auch super zentrieren, vertical und horizontal. Ebenso wie bottom und top.

Antworten

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