Auf der Suche nach einem responsiven, nicht überladenen CSS Framework mit „Mobile First“ Ansatz zur Integration in myfactory, haben wir uns selbstverständlich auch mit dem Bootstrap Framework beschäftigt. Bootstrap ist ein gutes, etabliertes und umfangreiches CSS Framework, was wir an dieser Stelle nicht verschweigen möchten, bietet aber einen Überfluss an Funktionen und Klassen und stellt dementsprechend große Dateien zur Verfügung. Dadurch entstehen unnötig lange Seitenladezeiten. Also begaben wir uns auf die Suche nach einer geeigneten Alternative und stießen dabei auf das Bulma Framework. Doch wie gut eignet sich Bulma eigentlich für E-Commerce Projekte? Kann man Bulma für Webshops einsetzen und wie kompliziert ist der Umgang mit der Syntax? Eignet es sich auch für große Projekte und wie verhält sich Bulma innerhalb der myfactory? Viele Fragen die vorab geklärt werden mussten.

Einfaches Klassensystem

Erst einmal bietet Bulma die Möglichkeit, viele grundlegende HTML-Strukturen, wie Dropdown-Navigationen, Listen, Eingabefelder und weitere Designelemente ohne viel Arbeit zu erstellen und den eigenen Wünschen nach anzupassen. Dabei basiert alles auf einem modernen und dynamischen Flexbox Layout. Die Auswahl an Elementen wird stetig erweitert, auch dank der schnell wachsenden Community.

Der Umgang mit dem Framework ist durch die sprechenden Bezeichnungen für Klassen sehr einfach. Das Gridsystem über die Klassen .section, als äußerer Container, .container, für den inneren Container, ermöglicht es schnell und unkompliziert das Grundlegende Layout zu erstellen. Dieses Layout lässt sich um einen Footer, .footer, als auch einen Hero, .hero, beliebig erweitern. Will man seinen Inhalt strukturieren, werden ebenfalls Klassen, .columns als begrenzender Container und .column für die einzeln positionierten Bereiche, zur Verfügung gestellt. Ein weiterer Vorteil ist der Aufbau des CSS über SASS (Syntactical Awesome Stylesheets), dadurch lassen sich Änderungen ganz einfach und schnell vornehmen.

• Einfach anpassbares SASS
• Mobile First
• 100% Responsive
• Open Source
• Von mehr als 100.000 Entwicklern genutzt
• Modular
• Schnell wachsende Community

Weil Bulma ein rein auf CSS basierendes Framework ist, schließt dies die Notwendigkeit von JavaScript nicht automatisch aus. In einigen Bereichen, wie z.B. eine sich öffnende Quickview oder die mobile Version einer Navigation, wird gelegentlich auch JavaScript benötigt.

Bulma in myfactory

Bulma lässt sich in der myfactory größtenteils einfach anwenden, an einigen Stellen ist das Konstrukt der Klassen jedoch nicht direkt in der myfactory anwendbar. Die strukturelle Logik des Layoutdesigners in myfactory basiert auf Elementen, welche sich aus HTML und den zugehörigen Funktionen zusammensetzen. Da hier das HTML vorgegeben ist, benötigt es an einigen Stellen eine Anpassung der Syntax um die bereitgestellten Klassen des Framework korrekt anwenden zu können.

Fazit

Abschließend lässt sich sagen, Bulma ist ein stetig wachsendes und einfach anzuwendendes CSS Framework. Gleichzeitig ist es eine gelungene Alternative zu den Platzhirschen wie Bootstrap oder Foundation. Dabei empfiehlt sich das Framework nicht nur für komplexe Webprojekte. Aufgrund seiner einfachen und klaren Strukturierung ist es ebenfalls für Einsteiger in das Thema CSS geeignet. Auch wenn Anpassungen an der Elementstruktur notwendig sind, gibt es von uns eine klare Empfehlung zur Nutzung des Frameworks innerhalb der myfactory für Ihr nächstes E-Commerce Projekt.