Vor einigen Tagen stieß ich auf das CSS-Framework Bulma. Der erste Eindruck war so reizvoll, dass ich es am Generationenprojekt ausprobierte. Zunächst wollte ich nur wissen, ob ich in der Lage wäre, mit diesem Framework aus dem Stand heraus eine akzeptable Website zu erstellen. Aber dann war das Ergebnis so gut, dass ich mich entschlossen habe, das Design des Generationenprojekts noch einmal zu verändern. Mit dem Ergebnis meines letzten Relaunchs war ich nämlich nie wirklich zufrieden.
Am Wochenende habe ich die Hugo-Templates des Generationenprojekts für Bulma angepasst. Ich kam mit Bulma gut zurecht. Da ich nicht alle Features des Framework benötige, habe ich die entsprechenden Stile erst gar nicht in die CSS-Datei aufgenommen. Außerdem kommt das neue Design fast ganz ohne Javascript aus. Der folgende Code-Schnipsel steuert das responsive Hamburger-Menü, das auftaucht, wenn der Bildschirm eine gewisse Breite unterschreitet.
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
// Get all "navbar-burger" elements
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach(function ($el) {
$el.addEventListener('click', function () {
// Get the target from the "data-target" attribute
var target = $el.dataset.target;
var $target = document.getElementById(target);
// Toggle the class on both the "navbar-burger" and the "navbar-menu"
$el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});
</script>Mehr Javascript wird nicht benötigt.
Ich hoffe, dass ich dieses Design nun für eine Weile beibehalte. Kleinere Optimierungen werde ich sicherlich mit der Zeit vornehmen. So gefallen mir die vertikalen Abstände im Text noch nicht. Die Autoren von CSS-Frameworks sind leider meistens keine Typographen.
