Wir sind auf der Suche nach dem ultimativen responsive Web Template, nach der eierlegenden Wollmilchsau, mit der jedes Webprojekt direkt gestartet werden kann, oder fast jedes ...

Die Anforderungen

Wir wünschen uns vom Template:

• kleinen Code
• Responsive
• Responsive Menu das mit ul li Struktur arbeitet
• Grid
• Valides HTML
• Unabhängig von Javascript 

Vorhandene Lösungen:

Free to use under the MIT license.
http://www.opensource.org/licenses/mit-license.php

Skeleton

http://getskeleton.com/

Skeleteon ist klein, das ist ein Vorteil, es ist Responsive, das ist noch ein Vorteil.

Es gibt eine Vorlage für eine Landingpage und verschiedene Basiselemente:

Ein Grid, Typografie, Button, Formulare, Listen, Code, Tabellen, Media Queries und ein paar Extras.

Das ist eine sehr hohe Basisabdeckung, zudem ist alles noch unabhängig von Javascript.

Was mir als erstes fehlt: Ein responsive Menü. Das läßt sich nach Anleitung nachbauen: 

Foundation

http://foundation.zurb.com/

Dokumentation 

Foundation ist ein Boilerplate der Firma ZURB, einer Designfirma.

Zurb unterscheidet zwischen Templates für Webseiten und für Emails und ist inzwischen bei Version 6 angelangt. Die Email Templates sind hier schon im Einsatz.

Nach dem Download der Verion 6.2.4 Complete gibt es erstmal eine nicht sehr ansprechende index-Seite, die zwar die Fähigkeiten des Grid und von Formelementen darstellt, aber sonst doch eher nichtsagend ist.

Im Template wird auch jQuery geladen und ein paar JavaScript Codes.

Obwohl der erste Eindruck etwas schwach ist, eine Freude: Es gibt eine fertige Lösung für Responsive Menüs:

http://foundation.zurb.com/sites/docs/responsive-navigation.html 

Auch die Übersicht der Steuerelemente macht einen vielversprechenden Eindruck: 

http://foundation.zurb.com/sites/docs/kitchen-sink.html#0

Foundation sieht schon nach einer etwas ausgereifteren Lösung als Skeleton aus.

Außerdem gibt es eigne Icon Fonts: http://zurb.com/playground/foundation-icon-fonts-3

Bootstrap

http://getbootstrap.com/

Bootstrap von Twitter war sicher eines der ersten und bekanntesten Boilerplates für das Web.

Ich bin auch mit der Version 2 angefangen und war anfangs begeistert. Diese Begeisterung hab ich allerdings verloren:

Beim Update von Bootstrap 2 auf Version 3 wurden elementare Klassen umbenannt, so daß Teile nicht mehr zu gebrauchen waren.

In einem großen Projekt wurden stellenweise beide Versionen nebeneinander benutzt wegen zweier Layouts, eine Katastrophe.  

Was auch sehr abnervend ist meiner Meinung nach, daß es sehr viele Layouts auf Bootstrap Basis gibt, die man auf den ersten Blick erkennt.

Das Argument, daß der Benutzer sich in solchen Layouts schneller zurechtfindet, ist nicht unbedingt meins.

Aber trotz aller Kritik bietet Bootstrap einiges, aber auch responsive Menüs ?

Über die Komponente navbar lassen sie sich Out-of-the-box anlegen: https://getbootstrap.com/components/#navbar

Bootstrap hat allerdinge keinen großen Kredit mehr bei mir, dazu trägt auch bei, daß die Glypicons in Version 4 entfernt werden sollen. Ich möchte gerne langfristige Lösungen ... 

Eine eigene Lösung

Es gibt schon einige selbstentwickelte Komponenten, wie Grid oder das Holy Grail Layout mit Flex. Man könnte sich auch hier und da etwas aus den vorliegenden Frameworks abschauen, aber es spricht zu vieles dagegen:

1. Ich bin kein Designer

2. Der ganze Aufwand, um auf verschiedensten Geräten zu testen, ist viel zu groß.

Vergessen wir das ... 

Die Entscheidung

Nach der vorhandenen Abneigung gegenüber Bootstrap und der Ablehnung einer eigenen Implementierung, muß die Entscheidung zwischen Skeleton und Foundation fallen.

Zu den fehlenden Responsive Menüs auf Skeleton ist mir hier noch eine universelle Lösung vor die Füße gefallen:

http://www.w3schools.com/howto/howto_js_topnav.asp

Was noch für Skeleton spricht, ist das es eine etwas langlebigere Entwicklung hat als Foundation und Bootstrap, die anscheinend alls 2-3 Jahre mit neuen Major Versionen und umfassenden Neuerungen glänzen wollen. Das schreckt mich eher ab.

Das nächste Entscheidungskriterium sind die vorhandenen Icon-Fonts, eine Übersicht gibt es hier: http://tagliala.github.io/vectoriconsroundup/

Für Skeleton würde ich hier im ersten Schritt an die Einbindung durch FontAwesome denken.

Um eine Entscheidung zu fällen, sollte ich noch einen Nacht drüber schlafen, aber in mir reift folgender Gedanke:

Das nächste Projekt wird mit dem Skeleton Framework aufgesetzt und FontAwesome für Icons. Hierzu wird ein Basis Layout geschaffen, auf das ein Child Layout gesetzt werden kann.

Das übernächste Projekt bekommt ein Zurn Template. Erst danach wird ein Vergleich getroffen, was die Dauer der Umsetzung und das Ergebnis betrifft.

Fein :-) 

Weitere Schritte

Nach dem Download und der Anpassung des Boilerplates von Skeleton bzw. Foundation an mein CMS, geht es darum, noch einige weitere Anpassungen vor zu nehmen.

Sehr hilfreich ist noch dieser ZURB Artikel, insdbesondere mit dem Hinweis auf Flex, einer sehr hilfreichen CSS Anweisung für dynamische Layouts:u

http://tutorialzine.com/2016/08/20-protips-for-writing-modern-css/