Templates, Boilerplates, Frameworks & Co.
Code-Sammlungen in der Übersicht
Immer häufiger greifen Designer auf fertige HTML- und CSS-Komponenten oder Javaskripte als Grundlage für ihre Projekte zurück. Wir haben einige interessante Code-Sammlungen zusammengetragen.
Ob die Verwendung fertiger Code-Bausteine gut oder schlecht ist, darüber lässt sich streiten. Für Bausteine spricht, dass man mit ihrer Hilfe schneller vorwärts kommt. Gute Code-Sammlungen enthalten außerdem besonders weit gereifte und umfangreich getestete Lösungen.
Gegen Fertiglösungen spricht, dass sie häufig mehr Funktionen beinhalten, als das konkrete Projekt benötigt, und die Ladezeit damit unnötig verlängern. Zudem geht beim einfachen Zusammenkopieren fertiger Code-Bausteine unter Umständen das Verständnis dafür verloren, wie etwas funktioniert.
Nach unserer Ansicht überwiegen die Vorteile der auch Templates, Boilerplates oder Frameworks genannten Code-Sammlungen die Nachteile aber bei Weitem, vorausgesetzt, der Einsatz geschieht in Maßen und mit Umsicht. Selbst wenn Sie sich nicht dafür begeistern sollten, so können Sie bestimmt durch etwas Spicken im Code der folgenden Projekte wertvolle Ideen für Ihre eigenen Vorhaben sammeln.
HTML5 Boilerplate
Das derzeit bekannteste Frontend-Framework ist HTML5 Boilerplate (H5BP). Es vereint eine Reihe erfolgreicher Einzelprojekte und selbstentwickelten Code zu einer Sammlung von Best Practices, die jeder Webentwickler kennen sollte.
Da ist zum Beispiel Normalize.css, das die HTML-Darstellung in verschiedenen Browsern nivelliert. Zu den übrigen Grundbausteinen von H5BP gehört nicht nur jQuery, sondern auch Modernizr. Letzteres rüstet Websites mit zahllosen nützlichen Eigenschaften aus. So kann Modernizr zahlreiche Browserfunktionen testen, zum Beispiel CSS3 Gradients, Border Radius und rgba().
Ratgeber: 80 clevere Freeware-Tools
In Abhängigkeit vom Testergebnis fügt Modernizr dem html-Tag Klassen hinzu, zum Beispiel touch oder no-touch oder lädt passende Polyfills nach. Darüber hinaus enthält H5BP eine Vielzahl interessanter Details, etwa Beispiele für HiDPI Media Queries, CSS zum Formatieren der Hintergrundfarbe ausgewählten oder angetippten Textes, ein auf Geschwindigkeit getrimmtes Google-Analytics-Snippet und so weiter. Dank des via Modernizr geladenen HTML5 Shim funktioniert HTML5 Boilerplate auch in älteren Browsern.
Twitter Bootstrap
Twitters Bootstrap enthält eine umfangreiche Sammlung fertiger Website-Bausteine. Ob Sie nun eine einfache Navigationsleiste brauchen oder ein Dropdown-Menü, Breadcrumbs oder Paginierung - Bootstrap enthält die entsprechenden Komponenten. Hinzu kommen Button-Gruppen, Buttons mit darin enthaltenen Dropdowns, Embleme, Hinweise und Fortschrittsbalken.
Auf dieser Grundlage können Sie rasch einen Prototypen entwickeln oder das Backend einer Webanwendung. Alle Elemente funktionieren bis herunter zum Internet Explorer 7. Wie HTML5 Boilerplate basiert auch Bootstrap auf Normalize.css, so dass sich beide Frameworks mit geringem Aufwand im selben Projekt nutzen lassen.
Normalize.css
Normalize.css versteht sich als der moderne CSS-Reset. Anders als klassische Resets setzt es nicht zuerst alles Aussehen auf Null, um dann das Aussehen von HTML-Elementen von Grund auf neu aufzubauen. Vielmehr setzt Normalize.css auf den vorhandenen Darstellungseigenschaften auf und führt diese zusammen. Klassikern wie
* { margin: 0; padding: 0 }
ist es damit nicht nur beim Umgang mit Formularen haushoch überlegen. Wer noch klassische CSS-Resets einsetzt, sollte sich Normalize.css unbedingt näher ansehen. In der aktuellen Version 2.0.1 wird IE 7 allerdings nicht mehr unterstützt, so dass Sie gegebenenfalls noch auf Version 1.0.1 zurückgreifen müssen. Beide finden Sie unter.
Foundation 3
Responsive Webdesign ermöglicht die optimale Präsentation einer Website unter verschiedenen Auflösungen - vom Smartphone über Tablets und Desktops bis hin zum TV-Gerät. Foundation 3 ist ein auf die Entwicklung entsprechender Websites gerichtetes Gridsystem auf Basis von box-sizing: border-box. Das flexible Gridsystem unterstützt Nesting (korrekte Darstellung von Grid im Grid) und Offsets, also um eine bestimmte Anzahl von Spalten versetzte Spalten.
Ratgeber: Software-Grundausstattung für jeden PC
Auf Geräten mit kleinem Display ordnet Foundation den Inhalt der Spalten automatisch untereinander an, lässt sich aber auch durch Hinzufügen entsprechender Klassen zum HTML-Code zu einer vierspaltigen Darstellung überreden. Der Zugänglichkeit Ihrer Seite kommt zugute, dass es Foundation 3 egal ist, in welcher Reihenfolge Sie die verschiedenen Spalten im Quellcode positionieren.
HTML5 Mobile Boilerplate
HTML5 Mobile Boilerplate ist die auf mobile Endgeräte optimierte Variante von H5BP. Als solche bringt sie zum Beispiel statt jQuery das leichtgewichtigere, aber weitgehend kompatible Zepto.js mit. Modernizr ist in einer auf Smartphones und Tablets optimierten Version enthalten.
Außerdem finden Sie in HTML5 Mobile Boilerplate zahlreiche kleine Kniffe, wie zum Beispiel einen für verschiedene Smartphone-Betriebssysteme optimierten Viewport, verbesserte Schriftendarstellung im mobilen IE und iPhone Web App Meta. Textbereiche wachsen automatisch mit, das Adressfeld wird versteckt. HTML5 Mobile Boilerplate ist gut dokumentiert und enthält sinnvolle Fallbacks für ältere Smartphone-Betriebssysteme.
HTML Email Boilerplate
Seit jedes bessere Smartphone HTML-E-Mails vernünftig darstellt, gehen auch den hartnäckigen Verfechtern von Plain Text langsam die Argumente aus. Wer allerdings glaubt, mit IE 6 schon in jeden Abgrund geblickt zu haben, den HTML und CSS bereithalten, der hat noch keine Vorlage für HTML-E-Mails entwickelt.
Hier haben Sie es nämlich nicht nur mit einer Handvoll leidlich kompatibler Browser zu tun, sondern mit Dutzenden von E-Mail-Clients, die Ihren Code alle unterschiedlich interpretieren. Um so hilfreicher ist das HTML Email Boilerplate, das eine Sammlung funktionierender Techniken beinhaltet.
Kaufberatung: Die beste Sicherheits-Suite
Dazu gehören neben dem optimalen Doctype (XHTML) zum Beispiel auch Conditional Comments (für Outlook ab 2007) und Media Queries (für mobile Endgeräte). Den gesamten Code finden Sie unter htmlemailboilerplate.com.
underscores.me
Underscores.me ist ein Grundgerüst, aus dem Sie eigene Wordpress-Themes bauen können. Es versteht sich ausdrücklich nicht als Parent Theme, das mit einem Child Theme erweitert werden soll, sondern als Grundlage für eigenständige Designs.
Im Vergleich mit dem Standard-Theme Twenty Twelve und seinen Vorgängern fällt der deutlich abgespeckte, aber wohldokumentierte Code von underscores.me positiv auf. Außerdem ist das Framework ausgestattet mit einem hilfreichen 404, Beispielen für Custom Header, die der Nutzer via WP-Admin verändern kann, Beispielen für Theme- Optionen und so weiter.
Im layouts-Ordner finden Sie gleich fünf verschiedene Beispiellayouts. Nicht alles, was an Beispielen in underscores.me enthalten ist, wird man in jedem Projekt gebrauchen können, aber es ist dennoch ein interessantes Framework.
jQuery Boilerplate
Gerade Einsteiger tun sich schwer dabei, ihr Javascript in jQuery-Plug-ins zu gießen. Diese Aufgabe erleichtert das jQuery Boilerplate. Es enthält fertigen Code, der sicherstellt, dass andere Skripte Ihr Plug-in nicht durch fehlende Semikola oder versehentliches Definieren von undefined behindern. Außerdem zeigt das Boilerplate, wie Sie Standardparameter elegant setzen und Ihr Plug-in vor mehrfacher Instanziierung schützen.
