Bulma.io Warum das CSS Framework 2018 auf deinen Zettel sollte

Bulma.io - Warum das CSS Framework 2018 auf deinen Zettel sollte

Moderne Frontends werden heutzutage mit vielen nützlichen Funktionen versehen, damit sie zeitgemäß, funktional und wartbar sind. Damit das Rad nicht ständig neu erfunden werden muss, nehmen diesen Part gerne CSS Frameworks ein. Sie bringen allerlei Funktionen, einfache Methoden und Klassensysteme mit, damit man schnell gute Ergebnisse erhält. Bekannte Platzhirsche und direkte Alternativen unter den CSS Frameworks sind Foundation oder Bootstrap 4.

Cool & sexy …

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

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.

Fotografien auf Fotolia und Adobe Stock verkaufen

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.

  • Moderne 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

Fotografien auf Fotolia und Adobe Stock verkaufen

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 … Die Installation

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

Integration über CDN

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

Installation über NPM

$ npm install bulma

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!