t3n News Entwicklung

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

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

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 .

Flexbox: Mit dem CSS-Framework-Bulma hübsche Layouts zaubern
Das CSS-Flexbox-Framework Bulma (Bild: GitHub)

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 . 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.

Newsletter

Bleibe immer up-to-date. Sichere dir deinen Wissensvorsprung!

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
3 Antworten
  1. von developer027343 am 02.03.2016 (09:21 Uhr)

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

    Antworten Teilen
  2. von Foo am 03.03.2016 (19:37 Uhr)

    Müll

    Antworten Teilen
  3. von Philipp Blum am 04.03.2016 (00:47 Uhr)

    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 Teilen
Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema CSS
Spectre.css: Macht das neue Framework Bootstrap und Co. Konkurrenz?
Spectre.css: Macht das neue Framework Bootstrap und Co. Konkurrenz?

Das neue Framework Spectre.css soll eine Menge cooler Möglichkeiten mitbringen. Wir stellen es euch vor und verraten, was hinter dem neuen Framework steckt. » weiterlesen

Wozu Frameworks gut sind ...
Wozu Frameworks gut sind ...

Inzwischen werden Frameworks für Frameworks erstellt. Ergibt das alles noch einen Sinn oder tun wir das bloß, weil wir es können? » weiterlesen

Modulares Blockchain-Framework von Microsoft: Das steckt hinter Project Bletchley
Modulares Blockchain-Framework von Microsoft: Das steckt hinter Project Bletchley

Unter dem Namen Projekt Bletchley hat Microsoft ein modulares Framework für Blockchain-basierte Anwendungen vorgestellt. Wir verraten euch, was sich hinter dem ungewöhnlichen Namen verbirgt. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?