Boehrsi.de - Blog

Weiter geht es heute mit meiner kleinen Newssammlung zum Thema Boehrsi.de Statusseite. Heute geht es noch einmal um den reinen Code und wie ich die eigentliche UI erstellt habe. Während die folgenden Beiträge sich eher auf das Setup und Deployment beziehen. Bei Fragen stehe ich wie gewohnt gerne Rede und Antwort in den Kommentaren.
Das Thema Design ist für mich ein spezielles, da ich nicht sonderlich kreativ bin, aber trotz dessen versuche gut aussehende User Interfaces zu erstellen. Ich setze dabei meist auf Minimalismus und den Fokus auf den Content. Generell baue ich fast alles von Grund auf selbst, doch bei diesem Projekt habe ich einen anderen Weg eingeschlagen. Aus verschiedenen Gründen wollte ich weitere Erfahrungen zum Thema Bulma sammeln und entschied mich aus diesem Grund wieder für das CSS Framework.

So schön es ist coole HTML Templates mit Hugo bauen zu können, irgendwoher müssen die HTML und CSS Komponenten kommen. Bulma bietet diverse vorgefertigte Komponenten an, welche verschiedenste Bereiche eines Webprojekt abdecken. Die einzelnen Bausteine lassen sich einfach integrieren und für meine Statusseite war extrem wenig zusätzliches CSS nötig (siehe GitHub open_in_new).
Wichtig waren mir neben allgemeinen Dingen (Responsiveness open_in_new, Anpassbarkeit open_in_new, simple Nutzung und ein vorhandenes Layout-System open_in_new) die Grundbausteine, wie z.B. globale Layout Komponenten open_in_new (Container open_in_new, Header open_in_new und Footer open_in_new) und direkt nutzbare Komponenten open_in_new (Cards open_in_new, Navbar open_in_new und Messages open_in_new). Abgerundet wird das Ganze durch kleine Elemente open_in_new (Tags open_in_new und Icons open_in_new), welche es mir erlauben dem Design etwas mehr Leben einzuhauchen, ohne viel Aufwand zu betreiben.
Abseits von der Nutzung funktioniert auch die Konfiguration von Bulma ziemlich gut. In meinem konkreten Beispiel baute ich mir ein kleines simples Hugo Theme mit wenigen Dateien und nutzte die von Bulma gegebenen Komponenten (siehe GitHub open_in_new).
Vor allem begeistert war ich, von der extrem geringen Menge an Zusatzcode, welche nötig war um den gewünschten Feinschliff zu erhalten. Etwas mehr als 250 Zeilen eigener HTML, CSS und Template Code halten meine gesamte Statusseite zusammen. Ich kam komplett mit den gegebenen Komponenten zurecht, was bei einer komplexen Seiten durchaus anders sein könnte, sehe aber durchaus gutes Potential das man mit Bulma vieles was man braucht ab Werk abdecken kann.

Bulma arbeitet mit Klassen um die gewünschten Styles anzuwenden, während andere Frameworks teilweise direkt auf den HTML Tags arbeiten. Was man bevorzugt ist Geschmackssache, aber ich habe für mich gemerkt, dass ich lieber einige Klassen mehr schreibe und dafür explizite Kontrolle über alles habe, als implizit das Layout zu definieren. Bulma hat dabei meiner Meinung nach ein angenehmes, gut lesbares und vor allem verständliches Namensschema gewählt. Die Nutzung fühlt sich manchmal vielleicht etwas nach dupliziertem Code an (z.B. <section class="section">), aber dafür ist alles nachvollziehbar.
Für jemanden der normalerweise fast alles selber baut, ist es interessant sich auf vorgefertigte Komponenten zu verlassen, aber je nach Projekt ist dies völlig in Ordnung. Außerdem mache ich bei meinen Android und Flutter Projekten selbiges ja schon lange. Dort setzt man quasi ohne weiter nachzudenken auf Material Design open_in_new und mit diesem Konzept bin ich bis dato auch sehr gut gefahren.
Ich bin weiterhin auf mein erstes umfangreiches Projekt gespannt, welches auf Bulma setzt. Denn bei größeren Projekten zeigt sich ob ein CSS Framework wirklich alles bietet was man braucht oder ob es mit der Zeit doch wieder wesentlich mehr selbstgeschriebener UI Code wird.