Boehrsi.de - Blog

In den letzten Tagen habe ich mich mal wieder mit der Erstellung von Webseiten beschäftigt und dort vor allem mit der Gestaltung. In diesem Bereich habe ich in der letzten Zeit wenig getan, denn mein Blog ist aktuell in einem guten Zustand und ich habe mit Flutter und Kotlin verschiedene andere Projekte. Allerdings wollte ich mal ausprobieren mit wieviel HTML und CSS + gegebenenfalls ein wenig JavaScript ich eine ordentliche Grundstruktur und einige wiederverwendbare Komponenten erstellen kann.
Grund dafür ist unter anderem dieser Beitrag meinerseits, in welchem ich mich etwas darüber aufrege das in der heutigen Zeit, welche uns das Flex Layout open_in_new bietet und diverse andere schöne HTML5 + CSS3 Komponenten, alles mit teils extrem umfangreichen UI-Libraries gelöst werden muss. Dies fällt nicht nur in die Kategorie mit Kanonen auf Spatzen schießen, auch die Ladezeit und die Individualität einer Webseite kann dadurch leiden.
Ich will hier nicht gegen Bootstrap open_in_new und ähnliche Libraries wettern. Sie sind meistens extrem gut und bieten für viele Einsatzzwecke genau was man braucht, aber die kleine Firmenseite von Nebenan muss vielleicht nicht unbedingt damit gebaut werden. Hier sollte gelten, dass man nicht immer den einfachsten Weg für den Entwickler nimmt, sondern vielleicht den optimalen allgemeinen Weg. Etwas mehr Aufwand für den Entwickler, dafür mehr Kontrolle, mehr Individualität und auch mehr Flexibilität z.B. bei Kundenwünschen.

Ich habe auf diese Weise in den letzten Tagen ein kleines Template für Hugo gebaut, welches mit unter 10 Template HTML Seiten auskommt, welche immer unter 25 Zeilen Code haben. Damit kann ich mir Listen von Elementen, einzelne Seiten und Inhalte, sowie eine gesonderte Index-Seite anzeigen lassen. Eine Responsive-Navigation ist gegeben, Header und Footer sind ordentlich angeordnet und der Content-Bereich kann nach Wunsch mit mehreren horizontalen Elementen gefüllt werden. Diese werden je nach Bildschirmgröße dann angepasst, sodass auch der Content responsive ist.
Damit der Inhalte nicht langweilig aussieht habe ich mir simple Boxen und Material Cards open_in_new als wiederverwendbare Komponenten gebaut. Beide Komponenten unterstützen horizontale und vertikale Bilder, die entsprechend des Bildschirms angepasst werden und auch ein farblich hinterlegter Header kann genutzt werden. Die Material Cards können zusätzlich mit einer kleinen Klasse auf Hover-Events reagieren.
Zur Umsetzung habe ich ca. 200 Zeilen SCSS open_in_new Code und ca. 10 Zeilen JavaScript Code benötigt. Natürlich fehlen hier noch einige häufig genutzte Komponenten, die UI muss noch etwas hübscher werden, aber generell kann man hiermit schon diverse Dinge umsetzen. Kleinere Erweiterungen vorausgesetzt und die obligatorische Firmen-, Portfolio- oder Produkt-Website kann damit umgesetzt werden. Das Ganze werde ich in den nächsten Wochen mal produktiv nutzen, um fehlende Komponenten zu identifizieren und ich bin gespannt wie sich mein lieber-selber-minimalistisch-machen Ansatz so schlägt.