Das könnte dich auch interessieren

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

Entwicklung

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

    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.

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

Alle Jobs zum Thema TYPO3, Webdesign
3 Reaktionen
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
developer027343
developer027343

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

Antworten

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

Abbrechen