Bulma.io – Warum das CSS Framework 2019 auf deinen Zettel sollte

Moderne Frontends werden heutzutage mit vielen nützlichen Funktionen versehen, damit sie zeitgemäß, funktional sind eine hohe Wartbarkeit haben. Damit das Rad nicht ständig neu erfunden werden muss, nehmen euch diesen Teil der Arbeit sogenannte CSS Frameworks wie Bulma ab. Sie bringen allerlei Funktionen, einfache Methoden und Klassensysteme mit, damit man schnell gute Ergebnisse erhält. Platzhirsche unter den CSS Frameworks sind Foundation und Bootstrap 4, die bereits in unzähligen Webprojekten verwendet werden.

Cool & sexy ...

.. so kommt Bulma.io daher. Aufregend viele Möglichkeiten um HTML Elemente zu Stylen. Dropdown, Listen, Responsive Designs und dynamische Flexbox Layouts. Alles klein Problem mit Bulma. Mit einem einfachen Klassensystem und SASS Support ist es sehr einfach sich schnell in Bulma einzuarbeiten.

Anzeige

Durch die Möglichkeit, Bulma über NPM (Node PackageManager) zu integrieren und in der Style-Manifest-Datei direkt in die node-modules ordner von Bulma zu verlinken, macht den Einbau in bestehende Projektstrukturen sehr einfach. Allerdings muss man auch sagen, dass die Hauptklassen .columns und .column von Bulma für Grids etwas unglücklich gewählt ist, da es zum Beispiel bei Magento 2 kollidiert. Hier kann es, wenn man nicht aufpasst, zu ziemlich heftigen Layoutproblemen kommen. Aber auch das lässt sich ziemlich einfach lösen.

Ziele von Bulma

Bulma möchte Jung und frisch sein und kommt daher mit einigen Features um die Ecke, mit denen es sich mit Bootstrap und Co. messen will.

  • Modern Features  Modernes CSS3 wie Flexbox
  • Einfaches Gridsystem – wenige Klassen und großartige Ergebnisse für Mobile First
  • Schnell erlernbare Syntax – Einfache, lesbare Klassennamen .is-large oder .is-gapless
  • Font Awesome 5 Support – Icons für den Falls, dass man nicht ein eigenes Icon-Set nutzt
  • Über 100 SASS Helper – anpassbare SASS Helper mit vielen nützlichen Funkionen
  • Pure CSS ! – No JS – Bulma ist rein auf CSS ausgelegt.

Flexbox für das Gridsystem

Wie in den Zielen von Bulma schon definiert, wird das moderne Flexbox Grid für Layouts verwendet. Um dies zu realisieren braucht man nur an das umgebene Elemente die Klasse .columns und an die Kind-Elemente die Klasse .column anfügen. Schon werden die Elemente entsprechend positioniert. Mit einfachen Erweiterungen der Klassen der Kind-Elemente kann man deren Verhalten genauer definieren. Gibt man zum Beispiel die Klasse .is-half mit, wird das Element die halbe Breite einnehmen. Für solche Anpassungen stehen noch viele weitere Optionen zur Verfügung und können hier nachgeschlagen werden.

Getting Started ... Installation

Der Installationsprozess von Bulma ist denkbar einfach. Es gibt 2 Möglichkeiten zur Installation.

Fazit

Bulma ist ne feine Sache! An manchen Stellen muss man zwar noch manuell Nachhelfen, gerade wenn Bulma in größer Frontend-Projekte wie bei Magento 2 eingebudnen wird, kann es mit identischen Klassen bei Magento schnell problematisch werden. Auch die Integration in ein CSS Klassennamen-Konvention System wie BEM oder SMACCS ist nicht so einfach, aber dafür überwiegt die Menge an Funktionen, Möglichkeiten und die steile Lernkurve erheblich.
Daher ist Bulma aktuell für kleinere bis große Projekte ohne Anforderung an CSS Skalierbarkeit zum jetzigen Stand einen Blick wert!

Kommentar verfassen

Menü